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

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

@@ -0,0 +1,204 @@
+import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
+  TaroEvent, TaroAny } from '@tarojs/runtime'
+
+import { createNode } from './render'
+import TaroComponentWrapper from './base'
+import { TOUCH_EVENT_MAP } from './utils/constant/event'
+import { createTaroEvent } from './utils/events'
+import { FlexManager } from './utils/FlexManager'
+import { getNodeThresholds, getNormalAttributes, shouldBindEvent, bindAnimation } from './utils/helper'
+
+import type { TaroSwiperElement, TaroSwiperItemElement, TaroElement } from './element'
+import type { TaroStyleType } from '@tarojs/runtime'
+
+interface SwiperAttrs {
+  index?: number
+  loop?: boolean
+  duration?: number
+  interval?: number
+  vertical?: boolean
+  autoPlay?: boolean
+  indicator?: boolean
+}
+
+@Extend(Swiper)
+function swiperStyle (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+@Extend(Swiper)
+function swiperAttr (attr: SwiperAttrs) {
+  .index(attr.index)
+  .loop(attr.loop)
+  .duration(attr.duration)
+  .interval(attr.interval)
+  .vertical(attr.vertical)
+  .autoPlay(attr.autoPlay)
+  .indicator(attr.indicator)
+}
+
+function getSwiperAttributes (node: TaroSwiperElement): SwiperAttrs {
+  const _attrs = node._attrs
+  const swiperAttrs: SwiperAttrs = {}
+  swiperAttrs.index = _attrs.current || 0
+  swiperAttrs.loop = _attrs.circular || false
+  swiperAttrs.duration = _attrs.duration || 500
+  swiperAttrs.interval = _attrs.interval || 5000
+  swiperAttrs.vertical = _attrs.vertical || false
+  swiperAttrs.autoPlay = _attrs.autoplay || false
+  swiperAttrs.indicator = _attrs.indicatorDots || false
+  return swiperAttrs
+}
+
+@Component
+export struct TaroSwiper {
+  private swiperController: SwiperController = new SwiperController()
+
+  nodeInfoMap: TaroAny = {}
+
+  @ObjectLink node: TaroSwiperElement
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+    // 绑定动画
+    bindAnimation(this.node)
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      Swiper(this.swiperController) {
+        ForEach(this.node.childNodes, (item: TaroElement) => {
+          createNode(item)
+        }, (item: TaroElement) => item._nid)
+      }
+      .swiperStyle(getNormalAttributes(this.node))
+      .swiperAttr(getSwiperAttributes(this.node))
+      .defaultEvent()
+      .indicatorStyle({
+        color: this.node.getAttribute('indicatorColor'),
+        selectedColor:  this.node.getAttribute('indicatorActiveColor')
+      })
+      .onChange((index: number) => {
+        const event: TaroEvent = createTaroEvent('change', { detail: { current: index } }, this.node)
+        eventHandler(event, 'change', this.node)
+      })
+      .visibleChangeEvent()
+    }
+  }
+}
+
+@Extend(Flex)
+function flexStyle (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+function getAttributes (node: TaroSwiperItemElement) {
+  const _attrs = node._attrs
+  const _nid = node._nid
+  const style = getNormalAttributes(node)
+  style.id = _attrs.itemId || _attrs.id || _nid
+  return style
+}
+
+@Component
+export struct TaroSwiperItem {
+  nodeInfoMap: TaroAny = {}
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+
+  @ObjectLink node: TaroSwiperItemElement
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+    // 绑定动画
+    bindAnimation(this.node)
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        ForEach(this.node.childNodes, (item: TaroElement) => {
+          createNode(item)
+        }, (item: TaroElement) => item._nid)
+      }
+      .flexStyle(getAttributes(this.node))
+      .defaultEvent()
+      .visibleChangeEvent()
+    }
+  }
+}

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

@@ -0,0 +1,113 @@
+import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
+  TaroEvent, TaroAny } from '@tarojs/runtime'
+
+import TaroComponentWrapper from './base'
+import { createTaroEvent } from './utils/events'
+import { getNodeThresholds, shouldBindEvent, getNormalAttributes } from './utils/helper'
+
+import type { TaroSwitchElement } from './element'
+import type { TaroStyleType } from '@tarojs/runtime'
+
+interface SwitchAttrs {
+  selectedColor?: ResourceColor
+}
+
+@Extend(Toggle)
+function styles (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+@Extend(Toggle)
+function attrs(attr: SwitchAttrs) {
+  .selectedColor(attr.selectedColor)
+}
+
+function getAttributes (node: TaroSwitchElement): SwitchAttrs {
+  const _attrs = node._attrs
+  const switchStyle: SwitchAttrs = {}
+  switchStyle.selectedColor = _attrs.color || '#04BE02'
+  return switchStyle
+}
+
+@Extend(Toggle)
+function themeStyles(isDisabled: boolean) {
+  .opacity(isDisabled ? 0.4 : 1)
+}
+
+@Component
+export default struct TaroSwitch {
+  nodeInfoMap: TaroAny = {}
+
+  @ObjectLink node: TaroSwitchElement
+
+  @State value: boolean = false
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+
+    this.value = !!this.node._attrs.checked
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      Toggle({
+        type: this.node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
+        isOn: this.value,
+      })
+        .defaultEvent()
+        .styles(getNormalAttributes(this.node))
+        .attrs(getAttributes(this.node))
+        .themeStyles(!!this.node._attrs.disabled)
+        .onChange((isOn: boolean) => {
+          if (!this.node._attrs.disabled) {
+            this.value = isOn
+            const event: TaroEvent = createTaroEvent('change', { detail: { value: this.value } }, this.node)
+            eventHandler(event, 'change', this.node)
+          } else {
+            // FIXME 找下文档是否有强制刷新方法
+            this.value = !this.value
+            this.value = !this.value
+          }
+        })
+        .visibleChangeEvent()
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny, NodeType } from '@tarojs/runtime'
+
+import TaroComponentWrapper from './base'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes, shouldBindEvent, bindAnimation } from './utils/helper'
+
+import type { TaroTextElement } from './element'
+import type { TaroStyleType, TaroTextStyleType } from '@tarojs/runtime'
+
+@Extend(Text)
+function textStyle (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+  .fontColor(style.color)
+  .fontSize(style.fontSize)
+  .fontWeight(style.fontWeight)
+  .fontStyle(style.fontStyle)
+  .fontFamily(style.fontFamily)
+  .lineHeight(style.lineHeight)
+  .decoration({
+    type: style.decoration,
+    color: style.color
+  })
+}
+
+@Extend(Text)
+function textAttr(attr: TaroTextStyleType) {
+  .textAlign(attr.textAlign)
+  .textOverflow(attr.textOverflow)
+  .maxLines(attr.maxLines)
+  .letterSpacing(attr.letterSpacing)
+}
+
+
+@Component
+export default struct TaroText {
+  nodeInfoMap: TaroAny = {}
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+
+  @ObjectLink node: TaroTextElement
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+    // 绑定动画
+    bindAnimation(this.node)
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      if (this.node.nodeType === NodeType.TEXT_NODE) {
+        Text(this.node.textContent)
+      } else {
+        Text(this.node.textContent)
+          .defaultEvent()
+          .textStyle(getNormalAttributes(this.node))
+          .textAttr(getFontAttributes(this.node))
+          .visibleChangeEvent()
+      }
+    }
+  }
+}

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

@@ -0,0 +1,169 @@
+import window from '@ohos.window'
+import common from '@ohos.app.ability.common'
+import { isNumber, isUndefined } from '@tarojs/shared'
+import { bindFocus, bindInstanceToNode, eventHandler, Current, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
+  TaroEvent, TaroAny } from '@tarojs/runtime'
+
+import TaroComponentWrapper from './base'
+import { createTaroEvent } from './utils/events'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes, parseStyles, shouldBindEvent, bindAnimation } from './utils/helper'
+
+import type { TaroTextAreaElement } from './element'
+import type { TaroStyleType, TaroTextStyleType } from '@tarojs/runtime'
+
+@Extend(TextArea)
+function textStyle (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+  .fontColor(style.color)
+  .fontSize(style.fontSize)
+  .fontWeight(style.fontWeight)
+  .fontStyle(style.fontStyle)
+  .fontFamily(style.fontFamily)
+}
+
+@Extend(TextArea)
+function textAttr(attr: TaroTextStyleType) {
+  .textAlign(attr.textAlign)
+  .maxLines(attr.maxLines)
+}
+
+@Component
+struct TaroTextArea {
+  nodeInfoMap: TaroAny = {}
+
+  @State text: string = ''
+
+  @ObjectLink node: TaroTextAreaElement
+
+  controller: TextAreaController = new TextAreaController()
+
+  windowClass?: window.Window
+
+  _height: number = 0
+
+  heightChange = (height: number) => {
+    if (isNumber(height)) {
+      if (this._height !== height) {
+        this.onKeyboardHeightChange(height)
+        this._height = height
+      }
+    }
+  }
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+    bindFocus(this.node)
+    // 绑定动画
+    bindAnimation(this.node)
+
+    this.text = this.node._attrs.value || ''
+
+    try {
+      Current.contextPromise
+        .then((context: common.BaseContext) => {
+          return window.getLastWindow(context, (err, windowClass: window.Window) => {
+            const errCode: number = err.code;
+            if (errCode) {
+              console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err))
+              return;
+            }
+            this.windowClass = windowClass
+            windowClass.on('keyboardHeightChange', this.heightChange)
+          })
+        })
+    } catch (exception) {
+      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception))
+    }
+  }
+
+  aboutToDisappear () {
+    if (this.windowClass) {
+      try {
+        this.windowClass.off('keyboardHeightChange', this.heightChange)
+      } catch (err) {
+        console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err))
+      }
+    }
+  }
+
+  onKeyboardHeightChange (height: number) {
+    const event: TaroEvent = createTaroEvent('keyboardHeightChange', { detail: { height, duration: 0 } }, this.node)
+    eventHandler(event, 'keyboardHeightChange', this.node)
+  }
+
+  getPlaceholderColor (node: TaroTextAreaElement): string {
+    const placeholderStyle: string = node._attrs.placeholderStyle || ''
+
+    return parseStyles(placeholderStyle)?.color
+  }
+
+  getText (): string {
+    return isUndefined(this.node._attrs.value) ? this.text : this.node._attrs.value
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onBlur(() => {
+      const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.text } }, this.node)
+      eventHandler(event, 'blur', this.node)
+    })
+    .onFocus(() => {
+      const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.text, height: this._height } }, this.node)
+      eventHandler(event, 'focus', this.node)
+    })
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      TextArea({ text: this.getText(), placeholder: this.node._attrs?.placeholder || '', controller: this.controller })
+        .focusable(true)
+        .key(this.node._nid)
+        .placeholderColor(this.getPlaceholderColor(this.node))
+        .defaultEvent()
+        .textStyle(getNormalAttributes(this.node))
+        .textAttr(getFontAttributes(this.node))
+        .onChange((value: string) => {
+          const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
+          eventHandler(event, 'input', this.node)
+          this.text = value
+        })
+        .visibleChangeEvent()
+    }
+  }
+}
+
+export default TaroTextArea