@tarojs/plugin-platform-harmony-cpp 4.1.0 → 4.1.1-alpha.0

package/dist/runtime/components/switch.ets

@@ -0,0 +1,73 @@
+import { AREA_CHANGE_EVENT_NAME, createTaroEvent, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
+
+import commonStyleModify from './style'
+import { getNodeThresholds } from './utils/helper'
+
+import type { TaroAny, TaroSwitchElement, TaroEvent } from '@tarojs/runtime'
+
+interface SwitchAttrs {
+  selectedColor?: ResourceColor
+  disabled?: boolean
+}
+
+@Extend(Toggle)
+function attrs(attr: SwitchAttrs) {
+  .selectedColor(attr.selectedColor)
+  .enabled(!attr.disabled)
+}
+
+function getAttributes (node: TaroSwitchElement): SwitchAttrs {
+  const attr: SwitchAttrs = {}
+  attr.selectedColor = node._attrs.color || '#04BE02'
+  attr.disabled = !!node._attrs.disabled
+  return attr
+}
+
+@Extend(Toggle)
+function themeStyles(isDisabled: boolean) {
+  .opacity(isDisabled ? 0.4 : 1)
+}
+
+@Component
+export default struct TaroSwitch {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroSwitchElement, layer?: number) => void = this.customBuilder
+  @ObjectLink node: TaroSwitchElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear () {
+    if (this.node && !this.node._isInit) {
+      this.node._isInit = true
+      this.node._instance = this
+      this.node._reset = this.node.checked || false
+    }
+  }
+
+  build () {
+    Toggle({
+      type: this.node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
+      isOn: this.node.checked,
+    })
+      .attrs(getAttributes(this.node))
+      .margin(0)
+      .themeStyles(!!this.node._attrs.disabled)
+      .onChange((isOn: boolean) => {
+        if (this.node) {
+          if (!this.node?._attrs.disabled) {
+            const event: TaroEvent = createTaroEvent('change', { detail: { value: isOn } }, this.node)
+
+            this.node.updateCheckedValue(isOn)
+            eventHandler(event, 'change', this.node)
+          } else {
+            this.node.updateComponent()
+          }
+        }
+      })
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        if (this.node) {
+          this.node._nodeInfo.areaInfo = res[1]
+        }
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+}

package/dist/runtime/components/tag.ts

@@ -0,0 +1,58 @@
+export const TaroViewTagName = 'view'
+export const TaroIconTagName = 'icon'
+export const TaroProgressTagName = 'progress'
+export const TaroRichTextTagName = 'rich-text'
+export const TaroTextTagName = 'text'
+export const TaroButtonTagName = 'button'
+export const TaroCheckboxTagName = 'checkbox'
+export const TaroCheckboxGroupTagName = 'checkbox-group'
+export const TaroFormTagName = 'form'
+export const TaroInputTagName = 'input'
+export const TaroLabelTagName = 'label'
+export const TaroPickerTagName = 'picker'
+export const TaroPickerViewTagName = 'picker-view'
+export const TaroPickerViewColumnTagName = 'picker-view-column'
+export const TaroRadioTagName = 'radio'
+export const TaroRadioGroupTagName = 'radio-group'
+export const TaroSliderTagName = 'slider'
+export const TaroSwitchTagName = 'switch'
+export const TaroCoverImageTagName = 'cover-image'
+export const TaroTextareaTagName = 'textarea'
+export const TaroCoverViewTagName = 'cover-view'
+export const TaroMovableAreaTagName = 'movable-area'
+export const TaroMovableViewTagName = 'movable-view'
+export const TaroScrollViewTagName = 'scroll-view'
+export const TaroSwiperTagName = 'swiper'
+export const TaroSwiperItemTagName = 'swiper-item'
+export const TaroNavigatorTagName = 'navigator'
+export const TaroAudioTagName = 'audio'
+export const TaroCameraTagName = 'camera'
+export const TaroImageTagName = 'image'
+export const TaroLivePlayerTagName = 'live-player'
+export const TaroVideoTagName = 'video'
+export const TaroCanvasTagName = 'canvas'
+export const TaroAdTagName = 'ad'
+export const TaroWebViewTagName = 'web-view'
+export const TaroBlockTagName = 'block'
+export const TaroMapTagName = 'map'
+export const TaroPageMetaTagName = 'page-meta'
+export const TaroNavigationBarTagName = 'navigation-bar'
+export const TaroSlotTagName = 'slot'
+export const TaroNativeSlotTagName = 'native-slot'
+export const TaroCustomWrapperTagName = 'custom-wrapper'
+
+export const TaroSpanTagName = 'span'
+export const TaroTabsTagName = 'tabs'
+export const TaroTabBarTagName = 'tab-bar'
+export const TaroTabContentTagName = 'tab-content'
+export const TaroListTagName = 'list'
+export const TaroListItemTagName = 'list-item'
+export const TaroOpenDataTagName = 'open-data'
+export const TaroIgnoreTagName = 'ignore'
+
+export const TaroStickySectionTagName = 'sticky-section'
+export const TaroStickyHeaderTagName = 'sticky-header'
+export const TaroListViewTagName = 'list-view'
+export const TaroWaterFlowTagName = 'water-flow'
+export const TaroFlowSectionTagName = 'flow-section'
+export const TaroFlowItemTagName = 'flow-item'

package/dist/runtime/components/utils/AttributeManager.ets

@@ -0,0 +1,252 @@
+import matrix4 from '@ohos.matrix4'
+import { convertNumber2VP } from '@tarojs/runtime'
+
+import type { TaroAny } from '@tarojs/runtime'
+
+type matrixNums = [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number]
+
+interface IRotate {
+  x?: number,
+  y?: number,
+  z?: number,
+  angle: number | string,
+  centerX?: number | string,
+  centerY?: number | string
+}
+
+interface ITranslate {
+  x?: number | string,
+  y?: number | string,
+  z? : number | string
+}
+
+interface IScale {
+  x?: number,
+  y?: number,
+  z?: number,
+  centerX?: number | string,
+  centerY?: number | string
+}
+
+interface ITransform {
+  rotate: IRotate
+  translate: ITranslate
+  scale: IScale
+  transform?: matrix4.Matrix4Transit
+}
+
+class AttributeManager {
+
+  static getNodeStyle<T = TaroAny> (style: TaroAny = {}, name: string, defaultValue?: TaroAny): T {
+    const res: TaroAny = style[name]
+
+    if (res === undefined) return defaultValue
+
+    return res
+  }
+
+  static getTextAlign (style: TaroAny = {}): TextAlign {
+    const value: string = style.textAlign
+    switch (value) {
+      case 'right':
+        return TextAlign.End
+      case 'center':
+        return TextAlign.Center
+      default:
+        return TextAlign.Start
+    }
+  }
+
+  static getNodeAnimationData (style: TaroAny = {}): TaroAny {
+    let res: TaroAny = {}
+    const dataValue: string = AttributeManager.getNodeStyle(style, 'animation')
+
+    if (dataValue) {
+      let values: string[] = dataValue.toString().trim().split(new RegExp("/\s+/"))
+      switch (values.length) {
+        case 4:
+          res = { duration: values[0], curve: values[1], delay: values[2] }
+          break
+        case 8:
+          res = { duration: values[0], curve: values[1], delay: values[2], iterations: values[3], playMode: values[4] }
+          break
+        default:
+          break
+      }
+
+      Object.keys(res).forEach(key => {
+        if (!isNaN(res[key]) && values.length > 1) {
+          res[key] = convertNumber2VP(res[key])
+        }
+      })
+    }
+
+    let playMode: PlayMode
+    switch (AttributeManager.getNodeStyle(style, 'animationDirection') || res.playMode) {
+      case 'reverse':
+        playMode = PlayMode.Reverse
+        break
+      case 'alternate':
+        playMode = PlayMode.Alternate
+        break
+      case 'alternate-reverse':
+        playMode = PlayMode.AlternateReverse
+        break
+      case 'normal':
+      default:
+        playMode = PlayMode.Normal
+    }
+    return {
+      duration: AttributeManager.parseTime2Number(AttributeManager.getNodeStyle(style, 'animationDuration') || res.duration || 1000),
+      tempo: 1,
+      curve: AttributeManager.getNodeStyle(style, 'animationTimingFunction') || res.curve || Curve.EaseInOut,
+      delay: AttributeManager.parseTime2Number(AttributeManager.getNodeStyle(style, 'animationDelay') || res.delay || 0),
+      iterations: Number(AttributeManager.getNodeStyle(style, 'animationIterationCount') || res.iterations) || 1,
+      playMode,
+      // TODO onFinish
+    }
+  }
+
+  static parseTime2Number (time = ''): number {
+    if (typeof time === 'number') return time
+    if (time === 'infinite') return Infinity
+    if (time === 'auto') return 0
+
+    const matchs = time.match(new RegExp("/^(\d*)([a-z]*)$/")) || []
+
+    const value = matchs[1]
+    const unit = matchs[2]
+
+    let ms = Number(value)
+    switch (unit) {
+      case 's':
+        ms *= 1000
+        break
+      case 'ms':
+      default:
+        ms *= 1
+    }
+    return ms
+  }
+
+  static getTransform(style: TaroAny = {}): ITransform {
+    const transform: string = style.transform || ''
+    const transformOrigin: string = AttributeManager.getNodeStyle(style, 'transformOrigin') || '0 0'
+
+    const origin: (string | number)[] = transformOrigin.split(new RegExp("/\s+/")).map(item => item)
+
+    const result: ITransform = {
+      rotate: { angle: 0 },
+      translate: {},
+      scale: {},
+    }
+    let resultTransform: matrix4.Matrix4Transit
+
+    const matches: string[] = transform.match(new RegExp("/(\w+)\(([^)]+)\)/g")) || [];
+
+    // 处理matrix
+
+    matches.forEach(match => {
+      const matchs = match.split(new RegExp("/\(|\)/")).filter(Boolean);
+      const name: string = matchs[0]
+      const params: string[] = []
+      for (let i = 1; i < matchs.length; i++) {
+        params.push(matchs[i])
+      }
+
+      switch (name) {
+        case 'translateX':
+          result.translate.x = parseTransformUnit(params[0])
+          break;
+        case 'translateY':
+          result.translate.y = parseTransformUnit(params[0])
+          break;
+        case 'translateZ':
+          result.translate.z = parseTransformUnit(params[0])
+          break;
+        case 'scaleX':
+          result.scale.x = parseFloat(params[0])
+          break;
+        case 'scaleY':
+          result.scale.y = parseFloat(params[0])
+          break;
+        case 'scaleZ':
+          result.scale.z = parseFloat(params[0])
+          break;
+        case 'rotateX':
+          result.rotate.x = parseFloat(params[0])
+          break;
+        case 'rotateY':
+          result.rotate.y = parseFloat(params[0])
+          break;
+        case 'rotateZ':
+          result.rotate.z = parseFloat(params[0])
+          break;
+        case 'translate':
+          const xy = params[0].split(new RegExp("/\s*,\s*/"))
+          result.translate.x = parseTransformUnit(xy[0])
+          result.translate.y = parseTransformUnit(xy[1])
+          break;
+        case 'translate3d':
+          const xyz = params[0].split(new RegExp("/\s*,\s*/"))
+          result.translate.x = parseTransformUnit(xyz[0])
+          result.translate.y = parseTransformUnit(xyz[1])
+          result.translate.z = parseTransformUnit(xyz[2])
+          break;
+        case 'scale':
+          result.scale.x = parseFloat(params[0])
+          result.scale.y = parseFloat(params[1]) || result.scale.x
+          break;
+        case 'scale3d':
+          result.scale.x = parseFloat(params[0])
+          result.scale.y = parseFloat(params[1]) || result.scale.x
+          result.scale.z = parseFloat(params[2]) || result.scale.x
+          break;
+        case 'rotate':
+          const angle = parseFloat(params[0])
+          const axis = parseTransformUnit(params[1]) || 'z';
+          switch (axis) {
+            case 'x': result.rotate.x = angle; break
+            case 'y': result.rotate.y = angle; break
+            case 'z': result.rotate.z = angle; break
+          }
+          break;
+        case 'rotate3d':
+          result.rotate.x = parseFloat(params[0]) || 0
+          result.rotate.y = parseFloat(params[1]) || 0
+          result.rotate.z  = parseFloat(params[2]) || 0
+          break;
+        case 'matrix':
+          const matrixArr: number[] = params[0].split(',').map(item => parseFloat(item))
+          result.transform = matrix4.init(convertMatrixToMatrix3d(matrixArr))
+          break;
+        case 'matrix3d':
+          const matrix3dArr: number[] = params[0].split(',').map(item => parseFloat(item))
+          result.transform = matrix4.init(matrix3dArr as matrixNums)
+          break;
+      }
+    })
+
+    return result
+  }
+}
+
+
+function parseTransformUnit (val: string) {
+  return parseFloat(val) === 0 ? 0 : val
+}
+
+
+// matrix 转 matrix3d
+function convertMatrixToMatrix3d(matrix2d: number[]): matrixNums {
+  const matrix3d: number[] = new Array(16).fill(0);
+  matrix3d[0] = matrix2d[0];
+  matrix3d[5] = matrix2d[3];
+  matrix3d[10] = 1;
+  matrix3d[15] = 1;
+  matrix3d[12] = matrix2d[4];
+  matrix3d[13] = matrix2d[5];
+  return matrix3d as matrixNums;
+}
+
+export { AttributeManager }

package/dist/runtime/components/utils/DynamicCenter.ts

@@ -0,0 +1,41 @@
+import { TaroElement } from '@tarojs/runtime'
+
+import type { TaroAny } from '@tarojs/runtime'
+
+export class DynamicCenter {
+  install (node: TaroElement, parentNode: TaroElement) {
+    if (!parentNode._isCompileMode) return
+
+    this.bindComponentToNodeWithDFS(node, parentNode._instance)
+  }
+
+  uninstall (node: TaroElement) {
+    if (!node._isCompileMode || !node._instance) return
+
+    if (node._attrs?._dynamicID) {
+      node._instance[node._attrs._dynamicID] = new TaroElement('Ignore')
+    }
+    node._instance = null
+  }
+
+  bindComponentToNodeWithDFS (node: TaroElement, component: TaroAny) {
+    if (!node) return
+
+    const dynamicID = node._attrs?._dynamicID
+
+    // dynamicID 只是为了更新到精准的 node
+    node._instance = component
+    node._isCompileMode = true
+
+    if (dynamicID) {
+      node._isDynamicNode = true
+      component[dynamicID] = node
+    }
+
+    if (!node.childNodes || !node.childNodes.length) return
+
+    for (let i = 0; i < node.childNodes.length; i++) {
+      this.bindComponentToNodeWithDFS(node.childNodes[i] as TaroElement, component)
+    }
+  }
+}

package/dist/runtime/components/utils/constant/event.ets

@@ -0,0 +1,25 @@
+export class TOUCH_EVENT_MAP {
+  static readonly TouchTypeUp = 'touchend'
+  static readonly TouchTypeMove = 'touchmove'
+  static readonly TouchTypeDown = 'touchstart'
+  static readonly TouchTypeCancel = 'touchcancel'
+
+  static get (event: TouchType) {
+    switch (event) {
+      case TouchType.Up: return TOUCH_EVENT_MAP.TouchTypeUp
+      case TouchType.Move: return TOUCH_EVENT_MAP.TouchTypeMove
+      case TouchType.Down: return TOUCH_EVENT_MAP.TouchTypeDown
+      case TouchType.Cancel: return TOUCH_EVENT_MAP.TouchTypeCancel
+    }
+    return TOUCH_EVENT_MAP.TouchTypeUp
+  }
+
+  static values () {
+    return [
+      TOUCH_EVENT_MAP.TouchTypeUp,
+      TOUCH_EVENT_MAP.TouchTypeMove,
+      TOUCH_EVENT_MAP.TouchTypeUp,
+      TOUCH_EVENT_MAP.TouchTypeUp,
+    ]
+  }
+}

package/dist/runtime/components/utils/constant/style.ets

@@ -0,0 +1,91 @@
+// 各种组件的默认样式
+
+export class TEXT_DEFAULT_STYLE {
+  static COLOR = 'black'
+  static FONT_SIZE = '24'
+  static FONT_WEIGHT = FontWeight.Normal
+  static FONT_FAMILY = 'HarmonyOS Sans'
+  static TEXT_ALIGN = TextAlign.Start
+  static TEXT_OVERFLOW = TextOverflow.Clip
+}
+
+interface IBUTTON_THEME_COLOR {
+  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: Color.White,
+        background: '#1aad19',
+        plainText: '#1aad19'
+      }
+      case 'warn': return {
+        text: Color.White,
+        background: '#e64340',
+        plainText: '#e64340'
+      }
+      default: return {
+        text: Color.Black,
+        background: '#f7f7f7',
+        plainText: Color.Black
+      }
+    }
+  }
+}
+
+export class INPUT_TYPE_MAP {
+  static get (type: string) {
+    switch (type) {
+      case 'text': return InputType.Normal;
+      case 'number': return InputType.Number;
+      case 'idcard': return InputType.Number;
+      case 'safe-password': return InputType.Password;
+    }
+    return InputType.Normal
+  }
+}
+
+export class INPUT_CONFIRM_MAP {
+  static go = EnterKeyType.Go	// 右下角按钮为“前往”
+  static send = EnterKeyType.Send	// 右下角按钮为“发送”
+  static done = EnterKeyType.Done	// 右下角按钮为“完成”
+  static next = EnterKeyType.Next	// 右下角按钮为“下一个”
+  static search = EnterKeyType.Search	// 右下角按钮为“搜索”
+
+  static get (type: string) {
+    switch (type) {
+      case 'go': return EnterKeyType.Go
+      case 'send': return EnterKeyType.Send
+      case 'done': return EnterKeyType.Done
+      case 'next': return EnterKeyType.Next
+      case 'search': return EnterKeyType.Search
+    }
+    return EnterKeyType.Done
+  }
+}
+
+export class CurveMap {
+  static default = Curve.Linear
+  static linear = Curve.Linear
+  static easeInCubic = Curve.EaseIn
+  static easeOutCubic = Curve.EaseOut
+  static easeInOutCubic = Curve.EaseInOut
+}
+
+export class BORDER_STYLE_MAP {
+  static solid = BorderStyle.Solid
+  static dotted = BorderStyle.Dotted
+  static dashed = BorderStyle.Dashed
+
+  static get(type: string): BorderStyle {
+    switch (type) {
+      case 'dotted': return BorderStyle.Dotted;
+      case 'dashed': return BorderStyle.Dashed;
+      default: return BorderStyle.Solid;
+    }
+  }
+}

package/dist/runtime/components/utils/events.ts

@@ -0,0 +1,26 @@
+import { TaroEvent } from '@tarojs/runtime'
+
+import type { EventOptions, TaroElement } from '@tarojs/runtime'
+
+export function createTaroEvent(type: string, opts: Partial<EventOptions> = {}, node?: TaroElement) {
+  opts.bubbles ||= true
+  opts.cancelable ||= true
+  const e = new TaroEvent(type, opts as Required<EventOptions>)
+
+  if (node) {
+    const properties: Record<string, PropertyDescriptor> = {}
+    properties.target = properties.currentTarget = {
+      get() {
+        return node
+      }
+    }
+    Object.defineProperties(e, properties)
+  }
+  for (const key in opts) {
+    if (['bubbles', 'cancelable'].includes(key)) {
+      continue
+    }
+    e[key] = opts[key]
+  }
+  return e
+}

package/dist/runtime/components/utils/flexManager.ets

@@ -0,0 +1,49 @@
+import { isUndefined } from '@tarojs/shared'
+
+import { getNormalAttributes } from './styles'
+
+import type { TaroAny, TaroElement, HarmonyStyle } from '@tarojs/runtime'
+
+class FlexManager {
+  static isFlexNode (node: TaroElement): boolean {
+    return !!node.hmStyle?.display?.includes('flex')
+  }
+
+  static convertFlexAlignItemsToColumnOrRow (direction: FlexDirection, alignItems?: ItemAlign): 	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 alignItems<T> (node: TaroElement): T {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    let flexDirection: TaroAny = hmStyle.flexDirection
+    if (!flexDirection && flexDirection !== 0) {
+      flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
+    }
+    return (FlexManager.isFlexNode(node) ? FlexManager.convertFlexAlignItemsToColumnOrRow(flexDirection, hmStyle.alignItems) : HorizontalAlign.Start) as T
+  }
+
+  static justifyContent (node: TaroElement): FlexAlign {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    return FlexManager.isFlexNode(node) ? (isUndefined(hmStyle.justifyContent) ? FlexAlign.Start : hmStyle.justifyContent!) : FlexAlign.Start
+  }
+}
+
+export { FlexManager }

package/dist/runtime/components/utils/helper.ets

@@ -0,0 +1,51 @@
+import { VIEW } from '@tarojs/runtime'
+
+import { getNormalAttributes, getFontAttributes } from './styles'
+
+import type { TaroAny, TaroElement, TaroNode } from '@tarojs/runtime'
+
+export const parseStyles = (styles = ''): Record<string, string> => {
+  const styleObj: Record<string, string> = {}
+  styles
+    .split(';')
+    .filter((style) => style.split(':').length === 2)
+    .map((style) => [
+    style.split(':')[0].trim().replace(new RegExp("-([a-z])", "g"), (_, letter: string): string => letter.toUpperCase()),
+    style.split(':')[1].trim()
+    ])
+    .forEach((style) => {
+      const key = style[0]
+      const value = style[1]
+      styleObj[key] = value
+    })
+  return styleObj
+}
+
+export function shouldBindEvent (cb: TaroAny, node: TaroElement | null, eventNames: string[], disabled = false): TaroAny {
+  if (!node || node._attrs?.disabled || disabled) return null
+  if (!node.__listeners) {
+    return null
+  }
+  const listeners = Object.keys(node.__listeners)
+  if (listeners.every(e => !eventNames.includes(e))) return null
+  return cb
+}
+
+export function getNodeThresholds (node: TaroElement): number[] | null {
+  return node?._nodeInfo?.thresholds || null
+}
+
+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 (parent.nodeName === tagName.toUpperCase()) {
+    return list[0] === node
+  } else {
+    return (list[0] === node) && isTagFirstChild(parent, tagName, --level)
+  }
+}
+
+export { getNormalAttributes, getFontAttributes }