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

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

@@ -1,14 +1,11 @@
-import { bindInstanceToNode, Current, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, getPageScrollerOrNode, AREA_CHANGE_EVENT_NAME,
-  TaroAny } from '@tarojs/runtime'
+import { Current, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, getPageScrollerOrNode, AREA_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import { createNode } from './render'
-import TaroComponentWrapper from './base'
+import { createLazyChildren } from './render'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { FlexManager } from './utils/FlexManager'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
+import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroLabelElement, TaroElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroStyleType, TaroLabelElement, TaroElement, TaroAny, TaroRadioElement, TaroCheckboxElement } from '@tarojs/runtime'
 
 @Extend(Flex)
 function attrs (style: TaroStyleType) {
@@ -26,6 +23,7 @@ function attrs (style: TaroStyleType) {
   .backgroundColor(style.backgroundColor)
   .backgroundImage(style.backgroundImage, style.backgroundRepeat)
   .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
   .rotate(style.rotate)
   .scale(style.scale)
   .translate(style.translate)
@@ -40,72 +38,48 @@ function attrs (style: TaroStyleType) {
   .clip(style.clip)
 }
 
-@Component
-export default struct TaroLabel {
-  nodeInfoMap: TaroAny = {}
+function handleTargetChange (id: string) {
+  const taro: TaroAny = Current.taro
+  const page: TaroAny = taro.getCurrentInstance().page
+  const currentPageNode: TaroElement = getPageScrollerOrNode(page.node, page)
+  const node: TaroElement | null = currentPageNode.getElementById(id)
 
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
-  @ObjectLink node: TaroLabelElement
-
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
-  }
-
-  @Styles defaultEvent () {
-    .onClick((e: ClickEvent) => {
-      const firstChild = this.node.childNodes[0] as TaroElement | null
-      const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
-      this.handleTargetChange(id)
-      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]
-    }))
-  }
+  if (!node) return
 
-  handleTargetChange (id: string) {
-    const taro: TaroAny = Current.taro
-    const page: TaroAny = taro.getCurrentInstance().page
-    const currentPageNode: TaroElement = getPageScrollerOrNode(page.node, page)
-    const node: TaroElement | null = currentPageNode.getElementById(id)
-
-    if (!node || !node._instance) return
-
-    if (['BUTTON', 'CHECKBOX', 'RADIO', 'SWITCH', 'INPUT'].includes(node.tagName)) {
-      const instance: TaroAny = node._instance
-      switch (node.tagName) {
-        case 'RADIO':
-          if (!instance.checked) {
-            instance.checked = !instance.checked
-          }
-          break
-        case 'CHECKBOX':
-          instance.checked = !instance.checked
-          break
-        default:
-          focusControl.requestFocus(id)
-      }
+  if (['BUTTON', 'CHECKBOX', 'RADIO', 'SWITCH', 'INPUT'].includes(node.tagName)) {
+    switch (node.tagName) {
+      case 'RADIO':
+        const radioNode: TaroRadioElement = node as TaroRadioElement
+        if (!radioNode.checked) {
+          radioNode.checked = !radioNode.checked
+        }
+        break
+      case 'CHECKBOX':
+        const checkBoxNode: TaroCheckboxElement = node as TaroCheckboxElement
+        checkBoxNode.checked = !checkBoxNode.checked
+        break
+      default:
+        focusControl.requestFocus(id)
     }
   }
+}
 
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Flex(FlexManager.flexOptions(this.node)) {
-        ForEach(this.node.childNodes, (item: TaroElement) => {
-          createNode(item)
-        }, (item: TaroElement) => item._nid)
-      }
-      .attrs(getNormalAttributes(this.node))
-      .defaultEvent()
-      .visibleChangeEvent()
-    }
+@Builder
+export default function TaroLabel (node: TaroLabelElement) {
+  Flex(FlexManager.flexOptions(node)) {
+    createLazyChildren(node)
   }
+  .attrs(getNormalAttributes(node))
+  .onClick((e: ClickEvent) => {
+    const firstChild: TaroElement | null = node.childNodes[0] as TaroElement | null
+    const id: string = node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
+
+    handleTargetChange(id)
+    eventHandler(e, 'click', node)
+  })
+  .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
+  .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+    node._nodeInfo.areaInfo = res[1]
+  }))
+  .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
 }

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

@@ -1,17 +1,11 @@
-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 { createLazyChildren } from './render'
 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 { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroPickerElement, TaroElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroAny, TaroStyleType, TaroEvent } from '@tarojs/runtime'
 
 import { PickerDateProps, PickerMultiSelectorProps, PickerSelectorProps, PickerTimeProps } from './types'
 
@@ -31,6 +25,7 @@ function textPickerAttrs (style: TaroStyleType) {
   .backgroundColor(style.backgroundColor || '#fff')
   .backgroundImage(style.backgroundImage, style.backgroundRepeat)
   .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
   .rotate(style.rotate)
   .scale(style.scale)
   .translate(style.translate)
@@ -61,6 +56,7 @@ function datePickerAttrs (style: TaroStyleType) {
   .backgroundColor(style.backgroundColor || '#fff')
   .backgroundImage(style.backgroundImage, style.backgroundRepeat)
   .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
   .rotate(style.rotate)
   .scale(style.scale)
   .translate(style.translate)
@@ -84,10 +80,7 @@ interface TimeRange {
 
 @CustomDialog
 export struct PickerView {
-
-  @ObjectLink node: TaroPickerElement
-
-  @Link select: string | number
+  node: TaroPickerElement | null = null
 
   controller?: CustomDialogController
 
@@ -96,7 +89,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 +98,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 +109,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,
@@ -143,30 +136,27 @@ export struct PickerView {
         }
       }
       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 +169,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 +180,89 @@ 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'
+      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()
           })
-          .canLoop(false)
-          .textPickerAttrs(getNormalAttributes(this.node))
-          .onChange((value, index) => {
-            this.select = index as number
+          Text(this.getText()[0]).fontSize(15).padding({top: 20, bottom: 40}).fontColor('#1aad19').onClick(() => {
+            this.emitEvent('change', { value: this.node?.value})
+            this.controller?.close()
           })
-      } else if (this.node._attrs.mode === 'multiSelector') {
-        TextPicker(this.getTextOptions())
-          .selectedTextStyle({
-            color: '#000'
-          })
-          .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)
+            .textPickerAttrs(getNormalAttributes(this.node))
+            .onChange((_, index) => {
+              this.node?.updateFormWidgetValue(index)
+            })
+        } else if (this.node?._attrs.mode === 'multiSelector') {
+          TextPicker(this.getTextOptions())
+            .selectedTextStyle({
+              color: '#000'
+            })
+            .canLoop(false)
+            .textPickerAttrs(getNormalAttributes(this.node))
+            .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'
+            })
+            .datePickerAttrs(getNormalAttributes(this.node))
+            .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)
+            .textPickerAttrs(getNormalAttributes(this.node))
+            .onChange((value) => {
+              this.node?.updateFormWidgetValue(`${('00'+value[0]).slice(-2)}:${('00'+value[1]).slice(-2)}`)
+            })
+        }
       }
     }
   }
@@ -276,41 +272,25 @@ export struct PickerView {
   }
 }
 
-
-
 @Component
 export default struct TaroPicker {
-  nodeInfoMap: TaroAny = {}
-
-  @State select: string = ''
-
-  @ObjectLink node: TaroPickerElement
+  node: TaroPickerElement | null = null
 
   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)
+    this.node?.addEventListener('click', this.handleClick)
   }
 
   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 +304,7 @@ export default struct TaroPicker {
         }
       })
     }
-    this.dialogController.open()
+    this.dialogController?.open()
   }
 
   @Styles defaultEvent () {
@@ -332,9 +312,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 +324,16 @@ export default struct TaroPicker {
   }
 
   build() {
-    TaroComponentWrapper({ node: this.node }) {
+    if (this.node) {
       Flex(FlexManager.flexOptions(this.node)) {
-        ForEach(this.node.childNodes, (item: TaroElement) => {
-          createNode(item)
-        }, (item: TaroElement) => item._nid)
+        createLazyChildren(this.node)
       }
-        .defaultEvent()
-        .visibleChangeEvent()
+      .defaultEvent()
+      .visibleChangeEvent()
     }
   }
 }
 
-
-
 function generateNumberArray(x: number, y: number) {
   // 创建一个空数组来存储结果
   let result: string[] = []