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

package/dist/components-harmony/video/index.js

@@ -0,0 +1,73 @@
+import { createOption } from '../utils'
+
+const NUM_HORIZONTAL = -90
+const NUM_HORIZONTAL_ANTI = 90
+const NUM_VERTICAL = 0
+
+export default createOption({
+  props: [
+    'id',
+    'src',
+    'controls',
+    'autoplay',
+    'speed',
+    'loop',
+    'muted',
+    'initialTime',
+    'direction',
+    'objectFit',
+    'poster'
+  ],
+
+  data () {
+    let videoDirection = 'auto'
+    if (this.direction === NUM_VERTICAL) {
+      videoDirection = 'vertical'
+    } else if (this.direction === NUM_HORIZONTAL || this.direction === NUM_HORIZONTAL_ANTI) {
+      videoDirection = 'horizontal'
+    }
+
+    return {
+      duration: 0,
+      videoDirection
+    }
+  },
+
+  preparedCallback: function (e) {
+    this.duration = e.duration
+    this.$trigger('loadedmetadata', { duration: this.duration })
+  },
+  startCallback: function () {
+    this.$trigger('play')
+  },
+  pauseCallback: function () {
+    this.$trigger('pause')
+  },
+  finishCallback: function () {
+    this.$trigger('ended')
+  },
+  stopCallback: function () {
+    this.$trigger('stop')
+  },
+  errorCallback: function () {
+    this.$trigger('error')
+  },
+  seekedCallback: function (e) {
+    const buffered = this.duration > 0 ? (e.currenttime / this.duration) * 100 : 0
+    this.$trigger('progress', { buffered })
+  },
+  timeupdateCallback: function (e) {
+    this.$trigger('timeupdate', { currentTime: e.currenttime, duration: this.duration })
+  },
+  clickCallback: function () {
+    this.$trigger('tap')
+  },
+  fullscreenChangeCallback: function (e) {
+    const isFullScreen = !!e.fullscreen
+    let direction = NUM_VERTICAL
+    if (isFullScreen) {
+      direction = this.videoDirection === 'horizontal' ? NUM_HORIZONTAL_ANTI : NUM_VERTICAL
+    }
+    this.$trigger('fullscreenchange', { fullScreen: isFullScreen, direction })
+  }
+})

package/dist/components-harmony/web-view/index.hml

@@ -0,0 +1,8 @@
+<div>
+  <web
+    src="{{src}}"
+    id="{{id}}"
+    @error="onError"
+    @pagefinish="onLoad"
+  ></web>
+</div>

package/dist/components-harmony/web-view/index.js

@@ -0,0 +1,22 @@
+/**
+ * 鸿蒙SDK API Version 6
+ * 需在config.json中配置
+ * "reqPermissions": [
+ *  {
+ *      "name": "ohos.permission.INTERNET"
+ *    }
+ *  ],
+ * 文档地址 https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-web-0000001135254399
+ */
+
+import { createOption } from '../utils'
+
+export default createOption({
+  props: ['id', 'src'],
+  onError ({ url: src, errorCode, description }) {
+    this.$trigger('error', { src, errorCode, description })
+  },
+  onLoad ({ url: src }) {
+    this.$trigger('load', { src })
+  }
+})

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

@@ -0,0 +1,63 @@
+import { convertNumber2VP } from '../runtime'
+import { AttributeManager } from './utils/AttributeManager'
+
+import type { TaroElement } from './element'
+
+
+@Component
+export default struct TaroComponentWrapper {
+  node?: TaroElement
+
+  @BuilderParam createElement: () => void
+
+  top(): Length {
+    return this.node?.hmStyle?.top || 0
+  }
+
+  left(): Length {
+    return this.node?.hmStyle?.left || 0
+  }
+
+  @Builder createFlexElementWithPosition () {
+    if (this.node?.hmStyle?.position === 'absolute') {
+      Stack({ alignContent: Alignment.TopStart }) {
+        this.createElement()
+      }
+      .position({
+        x: this.left(),
+        y: this.top()
+      })
+      .id(this.node?._attrs?.id || this.node?._nid)
+      .key(this.node?._attrs?.id || this.node?._nid)
+      .zIndex(Number(this.node?.hmStyle?.zIndex) || null)
+    } else if (this.node?.hmStyle?.position === 'fixed') {
+      Stack({ alignContent: Alignment.TopStart }) {
+        this.createElement()
+      }
+      .position({
+        x: this.left(),
+        y: this.top()
+      })
+      .id(this.node?._attrs?.id || this.node?._nid)
+      .key(this.node?._attrs?.id || this.node?._nid)
+      .zIndex(Number(this.node?.hmStyle?.zIndex) || null)
+    } else if ((this.node?.hmStyle?.position === 'relative')) {
+      Stack({ alignContent: Alignment.TopStart }) {
+        this.createElement()
+      }
+      .offset({
+        x: this.left(),
+        y: this.top()
+      })
+      .id(this.node?._attrs?.id || this.node?._nid)
+      .key(this.node?._attrs?.id || this.node?._nid)
+      .zIndex(Number(this.node?.hmStyle?.zIndex) || null)
+    } else {
+      this.createElement()
+    }
+  }
+
+  build () {
+    this.createFlexElementWithPosition()
+  }
+}

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

@@ -0,0 +1,119 @@
+import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo } from '@tarojs/runtime'
+import { createNode } from './render'
+import TaroComponentWrapper from './base'
+import { createTaroEvent } from './utils/events'
+import { BUTTON_THEME_COLOR } from './utils/constant/style'
+import { AttributeManager } from './utils/AttributeManager'
+import { TOUCH_EVENT_MAP } from './utils/constant/event'
+import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
+
+import type { TaroAny, TaroEvent } from '@tarojs/runtime'
+import type { TaroButtonElement, TaroElement } from './element'
+import type { TaroStyleType } from '@tarojs/runtime'
+
+@Extend(Button)
+function attrs (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(Button)
+function themeStyles(style: TaroStyleType) {
+  .border({
+    width: 1,
+    color: style.backgroundColor
+  })
+  .fontColor(style.color)
+  .opacity(style.opacity)
+  .backgroundColor(style.backgroundColor)
+}
+
+function getThemeAttributes (node: TaroButtonElement): TaroStyleType {
+  const hmStyle = node.hmStyle
+  const _attrs = node._attrs
+  const isPlain: boolean = _attrs.plain || false
+  const isDisabled: boolean = _attrs.disabled || false
+  const type: string = _attrs.type || 'default'
+
+  return {
+    opacity: isDisabled ? 0.4 : 1,
+    backgroundColor: isPlain ? Color.Transparent : (hmStyle.backgroundColor || BUTTON_THEME_COLOR.get(type).background),
+    color: hmStyle.color || BUTTON_THEME_COLOR.get(type).text,
+  }
+}
+
+@Component
+export default struct TaroButton {
+  nodeInfoMap: TaroAny = {}
+
+  @ObjectLink node: TaroButtonElement
+
+  @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)
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      Button({ stateEffect: !this.node._attrs.disabled }) {
+        Row() {
+          if (this.node._attrs.loading) {
+            LoadingProgress()
+            .width(20).height(20)
+            .color(getThemeAttributes(this.node).color)
+          }
+          ForEach(this.node.childNodes, (item: TaroElement) => {
+            createNode(item)
+          }, (item: TaroElement) => item._nid)
+        }
+      }
+      .attrs(getNormalAttributes(this.node))
+      .themeStyles(getThemeAttributes(this.node))
+      .onClick((e: ClickEvent) => {
+        if (['submit', 'reset'].includes(this.node._attrs.formType)) {
+          const eventName = this.node._attrs.formType + '-btn'
+          const event: TaroEvent = createTaroEvent(eventName, {}, this.node)
+          eventHandler(event, eventName, this.node)
+        }
+        eventHandler(e, 'click', this.node)
+      })
+      .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]
+      }))
+      .visibleChangeEvent()
+    }
+  }
+}

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

@@ -0,0 +1,219 @@
+import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny, TaroEvent } from '@tarojs/runtime'
+
+import TaroComponentWrapper from './base'
+import { createNode } from './render'
+import { createTaroEvent } from './utils/events'
+import { FlexManager } from './utils/FlexManager'
+import { shouldBindEvent, getNormalAttributes, getNodeThresholds } from './utils/helper'
+
+import type { TaroCheckboxElement, TaroCheckboxGroupElement, TaroElement } from './element'
+import type { TaroStyleType } from '@tarojs/runtime'
+
+interface CheckboxOptions {
+  name?: string
+  group?: string
+}
+interface CheckboxAttrs {
+  selectedColor?: ResourceColor
+}
+
+@Extend(Checkbox)
+function checkboxStyle (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(Checkbox)
+function checkboxAttr(attr: CheckboxAttrs) {
+  .selectedColor(attr.selectedColor)
+}
+
+function getAttributes (node: TaroCheckboxElement): CheckboxAttrs {
+  const _attrs = node._attrs
+  const checkboxAttrs: CheckboxAttrs = {}
+  checkboxAttrs.selectedColor = _attrs.color || '#1aad19'
+  return checkboxAttrs
+}
+
+function getOptions (node: TaroCheckboxElement): CheckboxOptions {
+  const value: string = node._attrs.value
+  return {
+    name: value || node.textContent
+  }
+}
+
+
+@Component
+export struct TaroCheckbox {
+  nodeInfoMap: TaroAny = {}
+
+  @ObjectLink node: TaroCheckboxElement
+
+  @State checked: 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.checked = !!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 }) {
+      Stack() {
+        Row() {
+          Checkbox(getOptions(this.node))
+            .defaultEvent()
+            .checkboxStyle(getNormalAttributes(this.node))
+            .checkboxAttr(getAttributes(this.node))
+            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
+            .select(this.checked)
+            .onChange((value: boolean) => {
+              if (!!this.node._attrs.disabled) {
+                // FIXME 找下文档是否有强制刷新方法
+                this.checked = !this.checked
+                this.checked = !this.checked
+              } else {
+                this.checked = value
+                if (this.checked) {
+                  const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node._attrs.value } }, this.node)
+                  eventHandler(event, 'change', this.node)
+                }
+              }
+            })
+            .visibleChangeEvent()
+          Text(this.node.textContent)
+            .textAlign(TextAlign.Center)
+            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
+        }
+        .onClick(() => {
+          this.checked = !this.checked
+        })
+      }
+    }
+  }
+}
+
+
+@Extend(Flex)
+function checkboxGroupAttrs (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)
+}
+
+interface ChangeEventDetail { value: string[] }
+
+@Component
+export struct TaroCheckboxGroup {
+  nodeInfoMap: TaroAny = {}
+
+  @ObjectLink node: TaroCheckboxGroupElement
+
+  @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.node.addEventListener('change', (e: TaroEvent<ChangeEventDetail>) => {
+      e.stopPropagation()
+      e.detail.value = this.getValues()
+    })
+  }
+
+  // Element使用的获取值方法
+  getValues () {
+    const childList = this.node.getElementsByTagName<TaroCheckboxElement>('CHECKBOX')
+    const result: string[] = []
+    childList.forEach(element => {
+      if (element._instance.checked) {
+        result.push(element._attrs.value)
+      }
+    })
+    return result
+  }
+
+  @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 }) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        ForEach(this.node.childNodes, (item: TaroElement) => {
+          createNode(item)
+        }, (item: TaroElement) => item._nid)
+      }
+      .checkboxGroupAttrs(getNormalAttributes(this.node))
+      .defaultEvent()
+      .visibleChangeEvent()
+    }
+  }
+}