@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27 → 4.0.0-alpha.10

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

@@ -10,30 +10,33 @@ export class TEXT_DEFAULT_STYLE {
 }
 
 interface IBUTTON_THEME_COLOR {
-  text: string
+  text: Color
   background: string
+  plainText: string | Color
 }
 
 export class BUTTON_THEME_COLOR {
   static get (type: string): IBUTTON_THEME_COLOR {
     switch (type) {
       case 'primary': return {
-        text: '#fff',
+        text: Color.White,
         background: '#1aad19',
+        plainText: '#1aad19'
       }
       case 'warn': return {
-        text: '#fff',
-        background: '#e64340'
+        text: Color.White,
+        background: '#e64340',
+        plainText: '#e64340'
       }
       default: return {
-        text: '#000',
+        text: Color.Black,
         background: '#f7f7f7',
+        plainText: Color.Black
       }
     }
   }
 }
 
-
 export class INPUT_TYPE_MAP {
   static get (type: string) {
     switch (type) {

package/dist/components-harmony-ets/utils/flexManager.ets

@@ -1,106 +1,89 @@
-import type { TaroAny, TaroElement } from '@tarojs/runtime'
+import type { TaroElement, HarmonyStyle } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
+import { getNormalAttributes } from './styles.ets'
+
+interface IFlexOptions {
+  direction: FlexDirection,
+  justifyContent: FlexAlign,
+  alignItems: ItemAlign,
+  wrap?: FlexWrap,
+  alignContent?: FlexAlign
+}
 
 class FlexManager {
-  static flexOptions (node: TaroElement): FlexOptions {
-    const hmStyle = node.hmStyle
+  static isFlexNode (node: TaroElement): boolean {
+    return !!node.hmStyle?.display?.includes('flex')
+  }
+
+  static convertFlexAlignItemsToColumnOrRow (direction: FlexDirection, alignItems: ItemAlign | undefined): 	VerticalAlign | HorizontalAlign {
+    if (direction === FlexDirection.Column) {
+      switch (alignItems) {
+        case ItemAlign.Center:
+          return HorizontalAlign.Center
+        case ItemAlign.End:
+          return HorizontalAlign.End
+        default:
+          return HorizontalAlign.Start
+      }
+    } else {
+      switch (alignItems) {
+        case ItemAlign.Center:
+          return VerticalAlign.Center
+        case ItemAlign.End:
+          return VerticalAlign.Bottom
+        default:
+          return VerticalAlign.Top
+      }
+    }
+  }
+
+  static useFlexLayout (node: TaroElement): boolean {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node) || {}
+    const isReverse = hmStyle.flexDirection && [FlexDirection.RowReverse, FlexDirection.ColumnReverse].indexOf(hmStyle.flexDirection) !== -1;
+    const isUnknownAlign = [ItemAlign.Stretch, ItemAlign.Baseline].indexOf(hmStyle.alignItems!) !== -1;
+    return !isUndefined(hmStyle.flexWrap) || isReverse || isUnknownAlign;
+  }
 
-    let flexDirection = hmStyle.direction
+  static flexOptions (node: TaroElement): IFlexOptions {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node) || {}
+    const isFlex = FlexManager.isFlexNode(node)
+    let flexDirection = hmStyle.flexDirection
     if (!flexDirection && flexDirection !== 0) {
       flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
     }
 
     return {
+      alignItems: isFlex ? (isUndefined(hmStyle.alignItems) ? ItemAlign.Start : hmStyle.alignItems) : ItemAlign.Start,
+      justifyContent: isFlex ? (isUndefined(hmStyle.justifyContent) ? FlexAlign.Start : hmStyle.justifyContent) : FlexAlign.Start,
       direction: flexDirection,
-      justifyContent: hmStyle.justifyContent,
-      alignItems: hmStyle.alignItems
-    }
-  }
-
-  static flexAlign (value: string | number | undefined): FlexAlign {
-    switch (value) {
-      case 'flex-end':
-        return FlexAlign.End
-      case 'center':
-        return FlexAlign.Center
-      case 'space-between':
-        return FlexAlign.SpaceBetween
-      case 'space-around':
-        return FlexAlign.SpaceAround
-      case 'space-evenly':
-        return FlexAlign.SpaceEvenly
-      default:
-        return FlexAlign.Start
+      wrap: isFlex ? hmStyle.flexWrap: FlexWrap.NoWrap,
+      alignContent: isFlex ? hmStyle.alignContent: FlexAlign.Start
     }
   }
 
-  static direction (value: string): FlexDirection {
-    switch (value) {
-      case 'row': return FlexDirection.Row;
-      case 'row-reverse': return FlexDirection.RowReverse;
-      case 'column-reverse': return FlexDirection.ColumnReverse;
-      default: return FlexDirection.Column;
+  static direction (node: TaroElement): FlexDirection {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    let flexDirection = hmStyle.flexDirection
+    if (!flexDirection && flexDirection !== 0) {
+      flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
     }
+    return flexDirection
   }
 
-  static itemAlign (value: string | number | undefined): ItemAlign {
-    switch (value) {
-      case 'flex-start':
-        return ItemAlign.Start
-      case 'flex-end':
-        return ItemAlign.End
-      case 'center':
-        return ItemAlign.Center
-      case 'stretch':
-        return ItemAlign.Stretch
-      case 'baseline':
-        return ItemAlign.Baseline
-      default:
-        return ItemAlign.Auto
+  static alignItems<T> (node: TaroElement): T {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    const isFlex = FlexManager.isFlexNode(node)
+    let flexDirection = hmStyle.flexDirection
+    if (!flexDirection && flexDirection !== 0) {
+      flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
     }
+    return (isFlex ? FlexManager.convertFlexAlignItemsToColumnOrRow(flexDirection, hmStyle.alignItems) : HorizontalAlign.Start) as T
   }
 
-  static justifyContent (value: string): FlexAlign {
-    return FlexManager.flexAlign(value)
-  }
-
-  static alignItems (value: string): ItemAlign {
-    return FlexManager.itemAlign(value)
-  }
-
-  static alignSelf (value: string): ItemAlign {
-    return FlexManager.itemAlign(value)
-  }
-
-  static flexWrap (value: string): FlexWrap {
-    return value === 'wrap' ? FlexWrap.Wrap : FlexWrap.NoWrap
-  }
-
-  static alignContent (style: Record<string, string | number> = {}): FlexAlign | undefined {
-    if (style.flexWrap !== 'wrap') return undefined
-    const value = style.alignContent
-    return FlexManager.flexAlign(value)
-  }
-
-  static flexSize (style: Record<string, string | number> = {}): [number, number, number | string] {
-    const flex = style.flex
-    const flexGrow = style.flexGrow || 0
-    const flexShrink = style.flexShrink || 0
-    const flexBasis = style.flexBasis || 'auto'
-    let res: [number, number, number | string] = [Number(flexGrow), Number(flexShrink), flexBasis]
-
-    if (typeof flex === 'number') {
-      res = [flex, 1, 0]
-    } else if (flex === 'auto') {
-      res = [1, 1, 'auto']
-    } else if (flex === 'none') {
-      res = [0, 0, 'auto']
-    } else if (typeof flex === 'string') {
-      const FlexList = flex.replace(new RegExp("/\s+/g"), ' ').split(' ')
-      FlexList.forEach((item, index) => {
-        res[index] = index < 2 ? Number(item) : item
-      })
-    }
-    return res
+  static justifyContent (node: TaroElement): FlexAlign {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    const isFlex = FlexManager.isFlexNode(node)
+    return isFlex ? (isUndefined(hmStyle.justifyContent) ? FlexAlign.Start : hmStyle.justifyContent) : FlexAlign.Start
   }
 }
 

package/dist/components-harmony-ets/utils/helper.ets

@@ -1,8 +1,9 @@
-import { getNormalAttributes, getFontAttributes } from './styles'
-import { bindAttributesCallback, ObjectAssign } from '@tarojs/runtime'
+import { VIEW } from '@tarojs/runtime/dist/runtime.esm'
 
-import type { TaroAny, TaroElement } from '@tarojs/runtime'
-import type { Func } from '@tarojs/runtime/dist/runtime.esm'
+import { getNormalAttributes, getFontAttributes, getStyleAttr } from './styles'
+
+import type { TFunc } from '@tarojs/runtime/dist/runtime.esm'
+import type { TaroElement, TaroNode } from '@tarojs/runtime'
 
 export const parseStyles = (styles = ''): Record<string, string> => {
   const styleObj: Record<string, string> = {}
@@ -21,8 +22,7 @@ export const parseStyles = (styles = ''): Record<string, string> => {
   return styleObj
 }
 
-
-export function shouldBindEvent (cb: Func, node: TaroElement, eventNames: string[], disabled = false) {
+export function shouldBindEvent (cb: TFunc, node: TaroElement | null, eventNames: string[], disabled = false) {
   if (!node || node._attrs?.disabled || disabled) return null
   if (!node.__listeners) {
     return null
@@ -33,67 +33,20 @@ export function shouldBindEvent (cb: Func, node: TaroElement, eventNames: string
 }
 
 export function getNodeThresholds (node: TaroElement): number[] | null {
-  if (!node) return null
-
-  const id = node._nid
-  const instance: TaroAny = node._instance
-
-  return instance?.nodeInfoMap?.[id]?.thresholds || null
+  return node?._nodeInfo?.thresholds || null
 }
 
-function convertToCamelCase(str: string) {
-  return str.replace(new RegExp("/-(.)/g"), (_, char: string) => char.toUpperCase()).replace(new RegExp("/^\w/"), firstChar => firstChar.toUpperCase())
-}
-
-// 动画绑定
-export function bindAnimation (node: TaroElement) {
-  bindAttributesCallback(node, 'animation', async (animation: TaroAny) => {
-    if (animation && animation.actions) {
-      for (let i = 0; i < animation.actions.length; i++) {
-        const anim: TaroAny = animation.actions[i]
-        // 动画队列
-        await new Promise<TaroAny>((resolve: TaroAny) => {
-          const timingFunction: TaroAny = anim.timingFunction
-          const animateParams: AnimateParam = {
-            duration: anim.duration,
-            delay: anim.delay,
-            tempo: 1,
-            // TODO: ETS转TS
-            playMode: PlayMode.Normal,
-            iterations: 1,
-            onFinish: resolve
-          }
-          if (timingFunction === 'step-start') {
-            animateParams.tempo = 0
-          } else if (timingFunction === 'step-end') {
-            animateParams.tempo = 0
-            animateParams.delay = anim.duration + anim.delay
-            animateParams.duration = 0
-          }
-          animateParams.curve = Curve[convertToCamelCase(timingFunction)] || Curve.EaseInOut
-          animateTo(animateParams, () => {
-            const component: TaroAny = node._instance
-            const transformOrigin: string = anim.transformOrigin
+export function isTagFirstChild (node: TaroElement, tagName = VIEW, level = 0): boolean {
+  const parent: TaroElement | null = node.parentElement
+  const list: TaroNode[] = node.parentNode?.childNodes || []
+  if (list.length < 1 || level < 0) return false
+  else if (!parent) return true
 
-            if (transformOrigin) {
-              const splitOrigin = transformOrigin.split(' ')
-              Object.keys(anim.rule).forEach(key => {
-                if (['scale', 'rotate'].includes(key)) {
-                  anim.rule[key] = ObjectAssign(anim.rule[key], {
-                    centerX: splitOrigin[0],
-                    centerY: splitOrigin[1],
-                  })
-                }
-              })
-            }
-
-            component.nodeInfoMap[node._nid].overwriteStyle = anim.rule
-            node.updateComponent()
-          })
-        })
-      }
-    }
-  })
+  if (parent.nodeName === tagName.toUpperCase()) {
+    return list[0] === node
+  } else {
+    return (list[0] === node) && isTagFirstChild(parent, tagName, --level)
+  }
 }
 
-export { getNormalAttributes, getFontAttributes }
+export { getNormalAttributes, getFontAttributes, getStyleAttr }

package/dist/components-harmony-ets/utils/htmlParser/HarmonyHTMLParser.ts

@@ -99,5 +99,4 @@ function parseTag(htmlString, startIndex) {
   return tag
 }
 
-
-export default parseHTML
+export default parseHTML

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

@@ -15,7 +15,7 @@ function buildDomTree(dom: TTreeNode) {
     case 'span': tagName = 'text'; break
   }
   if (!tagName) return null
-  
+
   const ele = document.createElement(tagName)
   attributes && Object.keys(attributes).forEach(key => {
     if (key === 'style') {

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

@@ -1,7 +1,10 @@
 import { convertNumber2VP } from '@tarojs/runtime'
-import { isNumber } from '@tarojs/shared'
+import { isNumber, isUndefined } from '@tarojs/shared'
 
-export function getSingleSelector(ctx, range, rangeKey): any[] {
+import type { RichTextProps } from '@tarojs/components/types/RichText'
+import type { TaroRichTextElement } from '@tarojs/runtime'
+
+export function getSingleSelector(range, rangeKey): any[] {
   return range.map((data) => data[rangeKey])
 }
 
@@ -18,66 +21,67 @@ export function getMultiSelector(ctx, range, rangeKey, value) {
   }))
 }
 
-export function getUnit (val) {
-  if (/\d+(vp)$/.test(val)) {
+export function getUnit (val: string | number): string {
+  if (isNumber(val) || /\d+px$/.test(val)) {
+    return convertNumber2VP(parseFloat(val as string))
+  } else if (/\d+(vp)$/.test(val)) {
     return val
-  } else if (isNumber(val) || /\d+px$/.test(val)) {
-    return convertNumber2VP(parseFloat(val))
   }
   return val
 }
 
-function handleNodeStyleData (dataValue: string, handler: (values: string[]) => { [key: string]: string } | void) {
-  let res: any = {}
-  if (dataValue) {
-    const values = dataValue.trim().split(/\s+/)
-    const data = handler(values)
-
-    if (!data) return res
-
-    res = data
+export function generateText (node: TaroRichTextElement): string {
+  return parseHtmlNode(node._attrs.nodes || '')
+}
 
-    Object.keys(res).forEach(key => {
-      const exec = `${res[key]}`.match(/(\d+)(px)$/)
-      if (exec && values.length > 1) {
-        res[key] = getUnit(+exec[1])
-      }
-    })
+// 将nodeTree转换成harmony需要的string结构
+function nodeToHtml(node: RichTextProps.Text | RichTextProps.HTMLElement): string {
+  if (node.type === 'text') {
+    return node.text
+  }
+  if (node.attrs) {
+    const attributes = Object.entries(node.attrs)
+      .map((item: [string, string]) => `${item[0]}="${item[1]}"`)
+      .join(' ')
+    const childrenHtml: string = typeof node.children === 'string' ? node.children : (node.children || []).map((child: RichTextProps.Text | RichTextProps.HTMLElement) => nodeToHtml(child)).join('')
+    return `<${node.name}${attributes ? ' ' + attributes : ''}>${childrenHtml}</${node.name}>`
   }
+  return ''
+}
 
-  return res
+function parseHtmlNode (nodes: Array<RichTextProps.Text | RichTextProps.HTMLElement> | string) {
+  return typeof nodes === 'string' ? nodes : `<div>${nodes.map(node => nodeToHtml(node)).join('')}</div>`
 }
 
-export function getNodeBorderRadiusData (dataValue: string) {
-  return handleNodeStyleData(dataValue, values => {
-    switch (values.length) {
-      case 1:
-        return { topLeft: values[0], topRight: values[0], bottomRight: values[0], bottomLeft: values[0] }
-      case 2:
-        return { topLeft: values[0], topRight: values[1], bottomRight: values[0], bottomLeft: values[1] }
-      case 3:
-        return { topLeft: values[0], topRight: values[1], bottomRight: values[2], bottomLeft: values[1] }
-      case 4:
-        return { topLeft: values[0], topRight: values[1], bottomRight: values[2], bottomLeft: values[3] }
-      default:
-        break
+// 背景偏移算法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position
+export function computeBackgroundPosition(style) {
+  let offsetX = style.backgroundPosition?.x || 0
+  let offsetY = style.backgroundPosition?.y || 0
+  if (style.backgroundSize && typeof style.backgroundSize !== 'number') {
+    if (!isUndefined(style.backgroundSize.width) && style.width) {
+      if (typeof style.backgroundPosition.x === 'string' && style.backgroundPosition.x.indexOf('%') > 0) {
+        // (container width - image width) * (position x%) = (x offset value)
+        const width = parseFloat(style.width)
+        const bgWidth = parseFloat(style.backgroundSize.width)
+        const bgOffsetX = parseFloat(style.backgroundPosition.x)
+        offsetX = Number((width - bgWidth) * (bgOffsetX) / 100) || 0
+      }
+    }
+    if (!isUndefined(style.backgroundSize.height) && style.height) {
+      if (typeof style.backgroundPosition.y === 'string' && style.backgroundPosition.y.indexOf('%') > 0) {
+        // (container height - image height) * (position y%) = (y offset value)
+        const height = parseFloat(style.height)
+        const bgHeight = parseFloat(style.backgroundSize.height)
+        const bgOffsetY = parseFloat(style.backgroundPosition.y)
+        offsetY = Number((height - bgHeight) * (bgOffsetY) / 100) || 0
+      }
     }
-  })
+  }
+
+  return { offsetX, offsetY }
 }
 
-export function getNodeMarginOrPaddingData (dataValue: string) {
-  return handleNodeStyleData(dataValue, values => {
-    switch (values.length) {
-      case 1:
-        return { top: values[0], right: values[0], bottom: values[0], left: values[0] }
-      case 2:
-        return { top: values[0], right: values[1], bottom: values[0], left: values[1] }
-      case 3:
-        return { top: values[0], right: values[1], bottom: values[2], left: values[1] }
-      case 4:
-        return { top: values[0], right: values[1], bottom: values[2], left: values[3] }
-      default:
-        break
-    }
-  })
+export function convertVp2Px(val: string | number) {
+  const vp = parseFloat(`${val}`)
+  return vp2px(vp)
 }