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

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

@@ -1,23 +1,11 @@
-import { bindInstanceToNode, AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, findChildNodeWithDFS,
-  TaroEvent,
-  TaroAny,
-  TaroFormWidgetElement
-} from '@tarojs/runtime'
+import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_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 { createTaroEvent } from './utils/events'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
-
-import type { TaroFormElement, TaroElement, TaroCheckboxElement, TaroRadioElement, TaroInputElement,
-  TaroSliderElement,
-  TaroSwitchElement,
-  TaroPickerElement
-} from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
 
+import type { TaroAny, TaroFormElement, TaroStyleType } from '@tarojs/runtime'
 
 @Extend(Flex)
 function attrs (style: TaroStyleType) {
@@ -35,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)
@@ -49,101 +38,16 @@ function attrs (style: TaroStyleType) {
   .clip(style.clip)
 }
 
-@Component
-export default struct TaroForm {
-  nodeInfoMap: TaroAny = {}
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
-  @ObjectLink node: TaroFormElement
-
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
-
-    // 监听submit冒泡
-    this.node.addEventListener('submit-btn', (e: TaroEvent) => {
-      e.stopPropagation()
-      const formResult: Record<string, string> = {}
-      findChildNodeWithDFS(this.node, (item: TaroFormWidgetElement) => {
-        switch (item.nodeName) {
-          case 'INPUT':
-          case 'SLIDER':
-          case 'SWITCH':
-          case 'RADIO-GROUP':
-          case 'CHECKBOX-GROUP':
-          case 'PICKER': {
-            formResult[item.name] = item.value
-            break
-          }
-        }
-        return false
-      }, true)
-      const event: TaroEvent = createTaroEvent('submit', { detail: { value: formResult } }, this.node)
-      eventHandler(event, 'submit', this.node)
-    })
-    // 监听reset冒泡
-    this.node.addEventListener('reset-btn', (e: TaroEvent) => {
-      findChildNodeWithDFS(this.node, (item: TaroFormWidgetElement) => {
-        e.stopPropagation()
-        switch (item.nodeName) {
-          case 'INPUT': {
-            item.value = (item as TaroInputElement)._attrs.value
-            break
-          }
-          case 'SLIDER': {
-            item.value = (item as TaroSliderElement)._attrs.value
-            break
-          }
-          case 'SWITCH': {
-            item.value = (item as TaroSwitchElement)._attrs.checked
-            break
-          }
-          case 'RADIO-GROUP': {
-            item.getElementsByTagName<TaroRadioElement>('RADIO').forEach(element => {
-              element._instance.checked = element._attrs.checked || false
-            })
-            break
-          }
-          case 'CHECKBOX-GROUP': {
-            item.getElementsByTagName<TaroCheckboxElement>('CHECKBOX').forEach(element => {
-              element._instance.checked = element._attrs.checked || false
-            })
-            break
-          }
-          case 'PICKER': {
-            item.value = (item as TaroPickerElement)._attrs.value
-            break
-          }
-        }
-        return false
-      }, true)
-    })
-  }
-
-  @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)
-      }
-      .attrs(getNormalAttributes(this.node))
-      .defaultEvent()
-      .visibleChangeEvent()
-    }
+@Builder
+export default function TaroForm (node: TaroFormElement) {
+  Flex(FlexManager.flexOptions(node)) {
+    createLazyChildren(node)
   }
+  .attrs(getNormalAttributes(node))
+  .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
+  .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
+  .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+  .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+    node._nodeInfo.areaInfo = res[1]
+  }))
 }

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

@@ -1,12 +1,8 @@
-import { bindInstanceToNode, eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny } from '@tarojs/runtime'
+import { eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { ICON_SVG_MAP } from './utils/constant/icon'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
-
-import type { TaroIconElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
 
+import type { TaroIconElement, TaroAny, TaroStyleType } from '@tarojs/runtime'
 
 @Extend(Image)
 function attrs (style: TaroStyleType) {
@@ -24,6 +20,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)
@@ -38,47 +35,63 @@ function attrs (style: TaroStyleType) {
   .clip(style.clip)
 }
 
-@Component
-export default struct TaroIcon {
-  nodeInfoMap: TaroAny = {}
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
-  @ObjectLink node: TaroIconElement
+const ICON_COLOR_MAP: TaroAny = {
+  success: Color.Green,
+  success_no_circle: Color.Green,
+  info: Color.Blue,
+  warn: Color.Red,
+  waiting: Color.Blue,
+  cancel: Color.Red,
+  download: Color.Gray,
+  search: Color.Gray,
+  clear: Color.Gray,
+  info_circle: Color.Blue,
+  circle: Color.Gray
+}
 
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
+function getIconData (node: TaroIconElement): Resource | null {
+  switch (node._attrs.type) {
+    case 'success':
+      return $r('app.media.success')
+    case 'success_no_circle':
+      return $r('app.media.success_no_circle')
+    case 'info':
+      return $r('app.media.info')
+    case 'warn':
+      return $r('app.media.warn')
+    case 'waiting':
+      return $r('app.media.waiting')
+    case 'cancel':
+      return $r('app.media.cancel')
+    case 'download':
+      return $r('app.media.download')
+    case 'search':
+      return $r('app.media.search')
+    case 'clear':
+      return $r('app.media.clear')
+    case 'info_circle':
+      return $r('app.media.info_circle')
+    case 'circle':
+      return $r('app.media.circle')
+    default:
+      return null
   }
+}
 
-  @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]
+@Builder
+export default function TaroIcon (node: TaroIconElement) {
+  Image(getIconData(node))
+    .objectFit(ImageFit.Contain)
+    .fillColor(node._attrs.color || ICON_COLOR_MAP[node._attrs.type] || Color.Black)
+    .attrs(getNormalAttributes(node))
+    .size({
+      width: convertNumber2VP(Number(node._attrs.size) || 23),
+      height: convertNumber2VP(Number(node._attrs.size) || 23),
+    })
+    .onComplete(e => eventHandler(e, 'complete', node))
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
+    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      node._nodeInfo.areaInfo = res[1]
     }))
-  }
-
-  getIconData () {
-    if (!this.node || !this.node._attrs) return null
-    const type: string = this.node._attrs.type
-    // TODO：等待鸿蒙支持 base64 格式的 svg 图片，或者工程化支持图片资源的迁移
-    return ICON_SVG_MAP.get(type) || null
-  }
-
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Image(this.getIconData())
-        .defaultEvent()
-        .objectFit(ImageFit.Contain)
-        .fillColor(this.node._attrs.color)
-        .onComplete(e => eventHandler(e, 'complete', this.node))
-        .attrs(getNormalAttributes(this.node))
-        .visibleChangeEvent()
-    }
-  }
 }

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

@@ -1,10 +1,8 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny } from '@tarojs/runtime'
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
+import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroImageElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroImageElement, TaroAny, TaroStyleType } from '@tarojs/runtime'
 
 @Extend(Image)
 function attrs (style: TaroStyleType) {
@@ -14,14 +12,15 @@ function attrs (style: TaroStyleType) {
   .margin(style.margin)
   .width(style.width)
   .height(style.height)
+  .backgroundColor(style.backgroundColor)
   .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)
+  .backgroundImagePosition(style.backgroundImagePosition)
   .rotate(style.rotate)
   .scale(style.scale)
   .translate(style.translate)
@@ -47,39 +46,15 @@ function getImageMode (mode: string): ImageFit {
   }
 }
 
-@Component
-export default struct TaroImage {
-  nodeInfoMap: TaroAny = {}
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
-  @ObjectLink node: TaroImageElement
-
-  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]
+@Builder
+export default function TaroImage (node: TaroImageElement) {
+  Image(node.getAttribute('src'))
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
+    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      node._nodeInfo.areaInfo = res[1]
     }))
-  }
-
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Image(this.node.getAttribute('src'))
-      .defaultEvent()
-      .objectFit(getImageMode(this.node.getAttribute('mode')))
-      .attrs(getNormalAttributes(this.node))
-      .onComplete(e => eventHandler(e, 'complete', this.node))
-      .visibleChangeEvent()
-    }
-  }
+    .objectFit(getImageMode(node.getAttribute('mode')))
+    .attrs(getNormalAttributes(node))
+    .onComplete(e => eventHandler(e, 'complete', node))
+    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
 }

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

@@ -1,79 +1,11 @@
-import TaroComponentWrapper from './base'
-import web_webview from '@ohos.web.webview'
 import htmlParser from './utils/htmlParser'
-import { createNode } from './render'
-import type { TaroElement } from './element'
+import { createChildItemWithPosition } from './render'
 
-@Component
-export default struct TaroInnerHtml {
-  @ObjectLink node: TaroElement
+import type { TaroElement } from '@tarojs/runtime'
 
-  // controller: web_webview.WebviewController = new web_webview.WebviewController();
-
-  // isLoaded: boolean = false
-
-  // @State isInit: boolean = false
-
-  // @State height: string = '2vp'  // 如果起始高度不足，将不会渲染webview
-
-  // jsBridge = {
-  //   // 获取父级高度，拿到实际的webview宽度，计算出高度
-  //   load: (bodyHeight: number, bodyWidth: number) => {
-  //     const { width } = this.node.parentElement.instance.info
-  //     const widthPx = vp2px(width)
-  //     this.height = Math.floor(widthPx / bodyWidth * bodyHeight) + 'px'
-  //     this.isInit = true
-  //   }
-  // }
-
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      if (this.node.innerHTML) {
-        createNode(htmlParser(this.node.innerHTML))
-      }
-      // // webview实现
-      // if (this.node.innerHTML) {
-      //   Web({ src: $rawfile('innerHTML.html'), controller: this.controller }).onPageBegin((event) => {
-      //     if (this.isLoaded) return
-      //     this.isLoaded = true
-      //     // 注入jsBridge，监听页面onload行为，获取高度
-      //     this.controller.registerJavaScriptProxy(this.jsBridge, 'jsBridge', ['load'])
-      //     const innerString = this.node.innerHTML
-      //     try {
-      //       this.controller.loadData(
-      //         `
-      //           <html>
-      //             <body onload="jsBridge.load(document.getElementById('container').clientHeight, document.body.clientWidth);" style="padding: 0;margin: 0">
-      //               <div id="container">
-      //                 ${innerString}
-      //               </div>
-      //             </body>
-      //           </html>
-      //         `,
-      //         "text/html",
-      //         "UTF-8"
-      //       )
-      //     } catch (error) {
-      //       console.log(`ErrorCode: ${error.code},  Message: ${error.message}`);
-      //     }
-      //   })
-      //     .javaScriptAccess(true)
-      //     .size({
-      //       width: '100%',
-      //       height: this.height
-      //     })
-      //     .visibility(this.isInit)
-      //   // 覆盖webwiew的scroll
-      //   Stack({ alignContent: Alignment.TopStart }) {
-      //     Flex().size({
-      //       height: this.height,
-      //       width: '100%'
-      //     })
-      //   }.position({
-      //     x: 0,
-      //     y: 0
-      //   })
-      // }
-    }
+@Builder
+export default function TaroInnerHtml (node: TaroElement) {
+  if (node.innerHTML) {
+    createChildItemWithPosition(htmlParser(node.innerHTML))
   }
 }

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

@@ -1,17 +1,9 @@
-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 { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { createTaroEvent } from './utils/events'
-import { AttributeManager } from './utils/AttributeManager'
-import { getNormalAttributes, parseStyles, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
-import { TEXT_DEFAULT_STYLE, INPUT_TYPE_MAP, INPUT_CONFIRM_MAP } from './utils/constant/style'
+import { getNormalAttributes, parseStyles, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { INPUT_TYPE_MAP, INPUT_CONFIRM_MAP } from './utils/constant/style'
 
-import type { TaroInputElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroStyleType, TaroAny, TaroInputElement, TaroEvent } from '@tarojs/runtime'
 
 interface InputAttrs {
   textAlign?: TextAlign
@@ -33,6 +25,7 @@ function styles (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)
@@ -64,132 +57,69 @@ function getAttributes(node: TaroInputElement): InputAttrs {
   }
 }
 
-@Component
-struct TaroInput {
-  nodeInfoMap: TaroAny = {}
-
-  @State text: string = ''
+function getInputType (node: TaroInputElement) {
+  if (node._attrs?.password) return InputType.Password
 
-  @ObjectLink node: TaroInputElement
+  return INPUT_TYPE_MAP.get(node._attrs?.type || '') || InputType.Normal
+}
 
-  controller: TextInputController = new TextInputController()
+function getPlaceholderColor (node: TaroInputElement): string {
+  const placeholderTextColor: string = node._attrs.placeholderTextColor || ''
+  const placeholderStyle: string = node._attrs.placeholderStyle || ''
 
-  windowClass?: window.Window
+  return placeholderTextColor || parseStyles(placeholderStyle)?.color
+}
 
-  _height: number = 0
+@Component
+export default struct TaroInput {
+  @State value: string = ''
 
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
-  heightChange = (height: number) => {
-    if (isNumber(height)) {
-      if (this._height !== height) {
-        this.onKeyboardHeightChange(height)
-        this._height = height
-      }
-    }
-  }
+  node: TaroInputElement | null = null
 
   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))
-      }
+    if (this.node) {
+      this.value = this.node.value
+      this.node._instance = this
     }
   }
 
-  onKeyboardHeightChange (height: number) {
-    const event: TaroEvent = createTaroEvent('keyboardHeightChange', { detail: { height: height, duration: 0 } }, this.node)
-    eventHandler(event, 'keyboardHeightChange', this.node)
-  }
-
-  getPlaceholderColor (node: TaroInputElement): string {
-    const placeholderTextColor: string = node._attrs.placeholderTextColor || ''
-    const placeholderStyle: string = node._attrs.placeholderStyle || ''
-
-    return placeholderTextColor || parseStyles(placeholderStyle)?.color
-  }
-
-  getInputType (node: TaroInputElement) {
-    if (node._attrs?.password) return InputType.Password
-    return INPUT_TYPE_MAP.get(node._attrs?.type || '') || InputType.Normal
-  }
-
-  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 }) {
-      TextInput({ text: this.getText(), placeholder: this.node._attrs?.placeholder || '', controller: this.controller })
-        .focusable(true)
-        .key(this.node._nid)
-        .type(this.getInputType(this.node))
-        .maxLength(Number(this.node._attrs?.maxlength) || null)
-        .placeholderColor(this.getPlaceholderColor(this.node))
-        .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
-        .defaultEvent()
-        .styles(getNormalAttributes(this.node))
-        .attrs(getAttributes(this.node))
-        .style(TextInputStyle.Inline)
-        .onChange((value: string) => {
-          const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
-          eventHandler(event, 'input', this.node)
-          this.text = value
-        })
-        .onSubmit(() => {
-          const event: TaroEvent = createTaroEvent('confirm', { detail: { value: this.text } }, this.node)
-          eventHandler(event, 'confirm', this.node)
-        })
-        .visibleChangeEvent()
+  build () {
+    if (this.node) {
+      TextInput({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
+      .key(this.node._nid)
+      .type(getInputType(this.node))
+      .maxLength(Number(this.node._attrs?.maxlength) || null)
+      .placeholderColor(getPlaceholderColor(this.node))
+      .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
+      .styles(getNormalAttributes(this.node))
+      .attrs(getAttributes(this.node))
+      .onChange((value: string) => {
+        const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
+        
+        this.value = value
+        this.node?.updateFormWidgetValue(value)
+        eventHandler(event, 'input', this.node)
+      })
+      .onSubmit(() => {
+        const event: TaroEvent = createTaroEvent('confirm', { detail: { value: this.value } }, this.node)
+        eventHandler(event, 'confirm', this.node)
+      })
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onBlur(() => {
+        const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
+        eventHandler(event, 'blur', this.node)
+      })
+      .onFocus(() => {
+        const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
+  
+        eventHandler(event, 'focus', this.node)
+      })
+      .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))
     }
   }
 }
-
-export default TaroInput