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

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

@@ -1,79 +1,13 @@
-import { bindInstanceToNode, AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, getPageScrollerOrNode,
-  TaroAny,
-  TaroEvent
-} from '@tarojs/runtime'
-import { createNode } from './render'
-import TaroComponentWrapper from './base'
+import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, TaroPickerElement, createTaroEvent } from '@tarojs/runtime'
+import commonStyleModify from './style'
 import { getSingleSelector, getMultiSelector } from './utils'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
-import { createTaroEvent } from './utils/events'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
+import { FlexManager } from './utils/flexManager'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroPickerElement, TaroElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroAny, TaroEvent } from '@tarojs/runtime'
 
-import { PickerDateProps, PickerMultiSelectorProps, PickerSelectorProps, PickerTimeProps } from './types'
-
-@Extend(TextPicker)
-function textPickerAttrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width || '100%')
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor || '#fff')
-  .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(DatePicker)
-function datePickerAttrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width || '100%')
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor || '#fff')
-  .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)
-}
+import { PickerDateProps, PickerMultiSelectorProps, PickerSelectorProps, PickerTimeProps } from '@tarojs/components/types'
 
 interface TimeRange {
   startHH: number
@@ -84,10 +18,7 @@ interface TimeRange {
 
 @CustomDialog
 export struct PickerView {
-
-  @ObjectLink node: TaroPickerElement
-
-  @Link select: string | number
+  node: TaroPickerElement | null = null
 
   controller?: CustomDialogController
 
@@ -96,7 +27,7 @@ export struct PickerView {
   showSelector: number[] = []
 
   getDateOptions (): DatePickerOptions {
-    const _attrs = this.node._attrs as PickerDateProps
+    const _attrs = this.node?._attrs as PickerDateProps
     return {
       start: new Date(_attrs.start || ''),
       end: new Date(_attrs.end || ''),
@@ -105,9 +36,9 @@ export struct PickerView {
   }
 
   getTextOptions (): TextPickerOptions {
-    let mode: string = this.node._attrs.mode || 'selector'
+    let mode: string = this.node?._attrs.mode || 'selector'
     if (!mode) {
-      const _attrs = this.node._attrs as PickerSelectorProps
+      const _attrs = this.node?._attrs as PickerSelectorProps
       const range = _attrs.range
       if (range && range.length && range[0] instanceof Array) {
         mode = 'multiSelector'
@@ -116,7 +47,7 @@ export struct PickerView {
     }
     switch (mode) {
       case 'time': {
-        const _attrs = this.node._attrs as PickerTimeProps
+        const _attrs = this.node?._attrs as PickerTimeProps
         let timeRange: TimeRange = {
           startHH: 0,
           startMM: 0,
@@ -136,37 +67,34 @@ export struct PickerView {
         const left = generateNumberArray(timeRange.startHH, timeRange.endHH)
         const right =  generateNumberArray(timeRange.startMM, timeRange.endMM)
         const range = [left, right]
-        const _selected = _attrs.value.split(':')
+        const _selected = _attrs.value?.split(':') as string[]
         return {
           range: range,
           selected: [left.findIndex(i => parseInt(_selected[0]) === Number(i)), right.findIndex(i => parseInt(_selected[1]) === Number(i))],
         }
       }
       case 'multiSelector': {
-        const _attrs = this.node._attrs as PickerMultiSelectorProps
-        const value = _attrs.value as number[]
+        const _attrs = this.node?._attrs as PickerMultiSelectorProps
         let showRange = _attrs.range as string[][]
-        this.showSelector = value
-        showRange = getMultiSelector(this, _attrs.range, _attrs.rangeKey, value)
-        let selects: string | number | string[] | number[] = this.select
-        if (typeof selects === 'string') {
-          selects = selects.split(',').map(i => Number(i))
-        }
+        const selected: number[] = this.node?.value
+        this.showSelector = selected
+        showRange = getMultiSelector(this, _attrs.range, _attrs.rangeKey, selected)
+
         return {
+          selected,
           range: showRange,
-          selected: selects || value
         }
       }
       default: {
-        const _attrs = this.node._attrs as PickerSelectorProps
+        const _attrs = this.node?._attrs as PickerSelectorProps
         const range = _attrs.range
         let showRange = _attrs.range as string[]
         if (_attrs.rangeKey && typeof range[0] === 'object') {
-          showRange = getSingleSelector(this, range, _attrs.rangeKey)
+          showRange = getSingleSelector(range, _attrs.rangeKey)
         }
         return {
           range: showRange,
-          selected: (this.select as number) || _attrs.value
+          selected: this.node?.value
         }
       }
     }
@@ -179,7 +107,7 @@ export struct PickerView {
   }
 
   getText = () => {
-    if (this.node._attrs.mode === 'selector') {
+    if (this.node?._attrs.mode === 'selector') {
       const _attrs = this.node._attrs as PickerSelectorProps
       return [_attrs.textProps?.okText || '确认', _attrs.textProps?.cancelText || '取消']
     } else {
@@ -190,83 +118,101 @@ export struct PickerView {
   @Builder
   showDialog() {
     Column() {
-      Flex({
-        direction: FlexDirection.Row,
-        justifyContent: FlexAlign.SpaceBetween,
-        alignItems: ItemAlign.Center
-      }) {
-        Text(this.getText()[1]).fontSize(15).padding({top: 20, bottom: 40}).fontColor('#888').onClick(() => {
-          this.emitEvent('cancel')
-          this.controller?.close()
-        })
-        Text(this.getText()[0]).fontSize(15).padding({top: 20, bottom: 40}).fontColor('#1aad19').onClick(() => {
-          this.emitEvent('change', { value: this.select})
-          this.controller?.close()
-        })
-      }
-      .width('100%')
-      .backgroundColor('#fff')
-      .padding({
-        left: 20,
-        right: 20
-      })
-      if (this.node._attrs.mode === 'selector') {
-        TextPicker(this.getTextOptions())
-          .selectedTextStyle({
-            color: '#000'
-          })
-          .canLoop(false)
-          .textPickerAttrs(getNormalAttributes(this.node))
-          .onChange((value, index) => {
-            this.select = index as number
+      if (this.node) {
+        Flex({
+          direction: FlexDirection.Row,
+          justifyContent: FlexAlign.SpaceBetween,
+          alignItems: ItemAlign.Center
+        }) {
+          Text(this.getText()[1]).fontSize(15).padding({top: 20, bottom: 40}).fontColor('#888').onClick(() => {
+            this.emitEvent('cancel')
+            this.controller?.close()
           })
-      } else if (this.node._attrs.mode === 'multiSelector') {
-        TextPicker(this.getTextOptions())
-          .selectedTextStyle({
-            color: '#000'
+          Text(this.getText()[0]).fontSize(15).padding({top: 20, bottom: 40}).fontColor('#1aad19').onClick(() => {
+            this.emitEvent('change', { value: this.node?.value })
+            this.controller?.close()
           })
-          .canLoop(false)
-          .textPickerAttrs(getNormalAttributes(this.node))
-          .onChange((value, index) => {
-            if (index instanceof Array) {
-              this.select = index.join(',')
-              // 计算几列发生了变化
-              const originIndexs: number[] = this.multiColumnIndex || this.showSelector
-              this.multiColumnIndex = index
-              let changeValue: number | undefined
-              const changeIndex = index.findIndex((item, i) => {
-                const originIndex = originIndexs[i]
-                if (originIndex != item) {
-                  changeValue = item
-                  return true
+        }
+        .width('100%')
+        .backgroundColor('#fff')
+        .padding({
+          left: 20,
+          right: 20
+        })
+        if (this.node._attrs.mode === 'selector') {
+          TextPicker(this.getTextOptions())
+            .selectedTextStyle({
+              color: '#000'
+            })
+            .canLoop(false)
+            .attributeModifier(commonStyleModify.setNode(this.node, {
+              width: '100%',
+              backgroundColor: '#fff'
+            }))
+            .onChange((_, index) => {
+              this.node?.updateFormWidgetValue(index)
+            })
+        } else if (this.node?._attrs.mode === 'multiSelector') {
+          TextPicker(this.getTextOptions())
+            .selectedTextStyle({
+              color: '#000'
+            })
+            .canLoop(false)
+            .attributeModifier(commonStyleModify.setNode(this.node, {
+              width: '100%',
+              backgroundColor: '#fff'
+            }))
+            .onChange((_, index) => {
+              if (index instanceof Array) {
+                this.node?.updateFormWidgetValue(index)
+                // 计算几列发生了变化
+                const originIndexs: number[] = this.multiColumnIndex || this.showSelector
+                this.multiColumnIndex = index
+                let changeValue: number | undefined
+                const changeIndex = index.findIndex((item, i) => {
+                  const originIndex = originIndexs[i]
+                  if (originIndex != item) {
+                    changeValue = item
+                    return true
+                  }
+                  return false
+                })
+                if (changeIndex < 0) {
+                  return
                 }
-                return false
-              })
-              if (changeIndex < 0) {
-                return
+                this.emitEvent('columnChange', { column: changeIndex, value: changeValue })
               }
-              this.emitEvent('columnChange', { column: changeIndex, value: changeValue })
-            }
-          })
-      } else if (this.node._attrs.mode === 'date') {
-        DatePicker(this.getDateOptions())
-          .selectedTextStyle({
-            color: '#000'
-          })
-          .datePickerAttrs(getNormalAttributes(this.node))
-          .onChange(value => {
-            this.select = `${value.year}-${value.month}-${value.day}`
-          })
-      } else if (this.node._attrs.mode === 'time') {
-        TextPicker(this.getTextOptions())
-          .selectedTextStyle({
-            color: '#000'
-          })
-          .canLoop(false)
-          .textPickerAttrs(getNormalAttributes(this.node))
-          .onChange((value) => {
-            this.select = `${('00'+value[0]).slice(-2)}:${('00'+value[1]).slice(-2)}}`
-          })
+            })
+        } else if (this.node._attrs.mode === 'date') {
+          DatePicker(this.getDateOptions())
+            .selectedTextStyle({
+              color: '#000'
+            })
+            .attributeModifier(commonStyleModify.setNode(this.node, {
+              width: '100%',
+              backgroundColor: '#fff'
+            }))
+            .onDateChange(value => {
+              const data = value.toLocaleDateString().split('/')
+              const day = data[1]
+              const month = data[0]
+              const year = data[2]
+              this.node?.updateFormWidgetValue(`${year}-${month}-${day}`)
+            })
+        } else if (this.node._attrs.mode === 'time') {
+          TextPicker(this.getTextOptions())
+            .selectedTextStyle({
+              color: '#000'
+            })
+            .canLoop(false)
+            .attributeModifier(commonStyleModify.setNode(this.node, {
+              width: '100%',
+              backgroundColor: '#fff'
+            }))
+            .onChange((value) => {
+              this.node?.updateFormWidgetValue(`${('00'+value[0]).slice(-2)}:${('00'+value[1]).slice(-2)}`)
+            })
+        }
       }
     }
   }
@@ -277,40 +223,61 @@ export struct PickerView {
 }
 
 
-
 @Component
 export default struct TaroPicker {
-  nodeInfoMap: TaroAny = {}
-
-  @State select: string = ''
-
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroPickerElement) => void = this.customBuilder
   @ObjectLink node: TaroPickerElement
 
   aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
-
-    this.select = this.node._attrs.value as TaroAny
+    this.node?.addEventListener('click', this.handleClick)
+
+    if (this.node && !this.node._isInit) {
+      let defaultResetValue: TaroAny = ''
+      switch (this.node._attrs.mode) {
+        case 'selector':
+          defaultResetValue = 0
+          break
+        case 'multiSelector':
+          defaultResetValue = this.node._attrs.range.map((_: TaroAny) => 0)
+          break
+        case 'time': {
+          const hour = new Date().getHours()
+          const minute = new Date().getMinutes()
+
+          defaultResetValue = `${('00'+hour).slice(-2)}:${('00'+minute).slice(-2)}`
+          break
+        }
+        case 'date': {
+          const data = new Date().toLocaleDateString().split('/')
+          const day = data[1]
+          const month = data[0]
+          const year = data[2]
+
+          defaultResetValue = `${year}-${month}-${day}`
+          break
+        }
+        default:
+          defaultResetValue = ''
+          break
+      }
 
-    this.node.addEventListener('click', this.handleClick)
+      this.node._isInit = true
+      this.node._reset = this.node.value || defaultResetValue
+    }
   }
 
   dialogController: CustomDialogController | null = null
 
   aboutToDisappear() {
     this.dialogController = null // 将dialogController置空
+    this.node?.removeEventListener('click', this.handleClick)
   }
 
-
   handleClick = () => {
-    if (!this.dialogController) {
+    if (!this.dialogController && this.node) {
       this.dialogController = new CustomDialogController({
-        builder: PickerView({
-          node: this.node,
-          select: this.select
-        }),
+        builder: PickerView({ node: this.node }),
         customStyle: true,
         cornerRadius: '0vp',
         autoCancel: true,
@@ -324,7 +291,7 @@ export default struct TaroPicker {
         }
       })
     }
-    this.dialogController.open()
+    this.dialogController?.open()
   }
 
   @Styles defaultEvent () {
@@ -332,9 +299,10 @@ export default struct TaroPicker {
       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]
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      if (this.node) {
+        this.node._nodeInfo.areaInfo = res[1]
+      }
     }))
   }
 
@@ -343,20 +311,26 @@ export default struct TaroPicker {
   }
 
   build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Flex(FlexManager.flexOptions(this.node)) {
-        ForEach(this.node.childNodes, (item: TaroElement) => {
-          createNode(item)
-        }, (item: TaroElement) => item._nid)
+    if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
+      Row() {
+        this.createLazyChildren(this.node)
       }
-        .defaultEvent()
-        .visibleChangeEvent()
+      .defaultEvent()
+      .visibleChangeEvent()
+      .alignItems(FlexManager.alignItems<VerticalAlign>(this.node))
+      .justifyContent(FlexManager.justifyContent(this.node))
+    } else {
+      Column() {
+        this.createLazyChildren(this.node)
+      }
+      .defaultEvent()
+      .visibleChangeEvent()
+      .alignItems(FlexManager.alignItems<HorizontalAlign>(this.node))
+      .justifyContent(FlexManager.justifyContent(this.node))
     }
   }
 }
 
-
-
 function generateNumberArray(x: number, y: number) {
   // 创建一个空数组来存储结果
   let result: string[] = []

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

@@ -0,0 +1,52 @@
+import type { TaroProgressElement, TaroAny } from '@tarojs/runtime'
+import commonStyleModify from './style'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
+
+const PROGRESS_ACTIVECOLOR = '#09BB07'
+const PROGRESS_BACKGROUNDCOLOR = '#EBEBEB'
+const PROGRESS_DEFAULTINFOFONTSIZE = 16
+
+@Component
+export default struct TaroProgress {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroProgressElement) => void = this.customBuilder
+  @ObjectLink node: TaroProgressElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  build() {
+    Row({ space: 5 }) {
+      Progress({
+        value: parseFloat(this.node.getAttribute('percent')),
+        type: ProgressType.Linear
+      })
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+        .color(this.node.getAttribute('activeColor') ?? PROGRESS_ACTIVECOLOR)
+        .backgroundColor(this.node.getAttribute('backgroundColor') ?? PROGRESS_BACKGROUNDCOLOR)
+        .style({
+          strokeWidth: this.node.getAttribute('strokeWidth'),
+          strokeRadius: parseFloat(this.node.getAttribute('borderRadius')),
+          enableSmoothEffect: Boolean(this.node.getAttribute('active')),
+        })
+
+        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+        .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) => {
+          if (this.node) {
+            this.node._nodeInfo.areaInfo = res[1]
+          }
+        }))
+
+      if (this.node.getAttribute('showInfo')) {
+        Text(`${this.node.getAttribute('percent')}%`)
+          .fontSize(this.node.getAttribute('fontSize') ?? PROGRESS_DEFAULTINFOFONTSIZE)
+      }
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+import { getFontAttributes } from './utils/helper'
+import { pseudoModify } from './style'
+
+import type { TaroViewElement, TaroStyleType, TaroTextStyleType, TaroAny } from '@tarojs/runtime'
+
+@Extend(Flex)
+function flexAttrs (style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight || style.height,
+    maxHeight: style.maxHeight
+  })
+}
+
+
+@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?.type || TextDecorationType.None,
+    color: style.color
+  })
+}
+
+@Extend(Text)
+function textSpecialFontStyle(attr: TaroTextStyleType) {
+  .textAlign(attr.textAlign)
+  .align(attr.verticalAlign)
+  .textOverflow(attr.textOverflow)
+  .maxLines(attr.WebkitLineClamp)
+  .letterSpacing(attr.letterSpacing)
+  .lineHeight(attr.lineHeight)
+}
+
+@Component
+export default struct PseduoChildren {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroAny) => void = this.customBuilder
+  @ObjectLink node: TaroViewElement
+
+  build () {
+    if (true) {
+      // 伪类::Before
+      if (this.node._pseudo_before) {
+        if (this.node._pseudo_before?.hmStyle.content) {
+          Text(this.node._pseudo_before.hmStyle.content)
+            .attributeModifier(pseudoModify.setStyle(this.node._pseudo_before.hmStyle))
+            .textNormalFontStyle(this.node._pseudo_before.hmStyle || {})
+            .textSpecialFontStyle(getFontAttributes(this.node))
+        } else {
+          Flex() {}
+          .attributeModifier(pseudoModify.setStyle(this.node._pseudo_before.hmStyle || {}))
+          .flexAttrs(this.node._pseudo_before.hmStyle || {})
+        }
+      }
+      this.createLazyChildren(this.node)
+      // 伪类::After
+      if (this.node._pseudo_after) {
+        if (this.node._pseudo_after?.hmStyle.content) {
+          Text(this.node._pseudo_after.hmStyle.content)
+            .attributeModifier(pseudoModify.setStyle(this.node._pseudo_after.hmStyle))
+            .textNormalFontStyle(this.node._pseudo_after.hmStyle || {})
+            .textSpecialFontStyle(getFontAttributes(this.node))
+        } else {
+          Flex() {}
+          .attributeModifier(pseudoModify.setStyle(this.node._pseudo_after.hmStyle || {}))
+          .flexAttrs(this.node._pseudo_after.hmStyle || {})
+        }
+      }
+    }
+  }
+}