@tarojs/plugin-platform-harmony-ets 4.0.0-canary.8 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (135) hide show
  1. package/dist/apis/base/system.ts +73 -20
  2. package/dist/apis/canvas/index.ts +10 -1
  3. package/dist/apis/device/clipboard.ts +23 -8
  4. package/dist/apis/framework/index.ts +1 -5
  5. package/dist/apis/index.ts +27 -17
  6. package/dist/apis/media/image/index.ts +169 -17
  7. package/dist/apis/network/request.ts +5 -5
  8. package/dist/apis/route/index.ts +15 -0
  9. package/dist/apis/storage/index.ts +146 -78
  10. package/dist/apis/ui/animation/animation.ts +71 -29
  11. package/dist/apis/ui/background.ts +2 -1
  12. package/dist/apis/ui/interaction/index.ts +58 -59
  13. package/dist/apis/ui/navigation-bar/index.ts +1 -1
  14. package/dist/apis/ui/pull-down-refresh.ts +9 -3
  15. package/dist/apis/ui/scroll/index.ts +5 -5
  16. package/dist/apis/ui/tab-bar.ts +3 -3
  17. package/dist/apis/utils/index.ts +21 -2
  18. package/dist/apis/utils/permissions.ts +6 -0
  19. package/dist/apis/wxml/IntersectionObserver.ts +18 -10
  20. package/dist/apis/wxml/index.ts +2 -0
  21. package/dist/apis/wxml/selectorQuery.ts +26 -13
  22. package/dist/components-harmony-ets/button.ets +63 -77
  23. package/dist/components-harmony-ets/canvas.ets +51 -0
  24. package/dist/components-harmony-ets/checkbox.ets +75 -258
  25. package/dist/components-harmony-ets/form.ets +51 -158
  26. package/dist/components-harmony-ets/icon.ets +33 -83
  27. package/dist/components-harmony-ets/image.ets +35 -79
  28. package/dist/components-harmony-ets/index.ets +92 -0
  29. package/dist/components-harmony-ets/innerHtml.ets +11 -6
  30. package/dist/components-harmony-ets/input.ets +64 -101
  31. package/dist/components-harmony-ets/label.ets +72 -174
  32. package/dist/components-harmony-ets/listView.ets +31 -0
  33. package/dist/components-harmony-ets/movableArea.ets +126 -0
  34. package/dist/components-harmony-ets/movableView.ets +93 -0
  35. package/dist/components-harmony-ets/navigationBar.ets +65 -0
  36. package/dist/components-harmony-ets/pageMeta.ets +94 -0
  37. package/dist/components-harmony-ets/picker.ets +46 -163
  38. package/dist/components-harmony-ets/progress.ets +52 -0
  39. package/dist/components-harmony-ets/pseudo.ets +80 -0
  40. package/dist/components-harmony-ets/radio.ets +80 -264
  41. package/dist/components-harmony-ets/richText.ets +20 -102
  42. package/dist/components-harmony-ets/scrollList.ets +108 -0
  43. package/dist/components-harmony-ets/scrollView.ets +71 -160
  44. package/dist/components-harmony-ets/slider.ets +22 -82
  45. package/dist/components-harmony-ets/stickySection.ets +42 -0
  46. package/dist/components-harmony-ets/style.ets +410 -0
  47. package/dist/components-harmony-ets/swiper.ets +64 -87
  48. package/dist/components-harmony-ets/switch.ets +39 -99
  49. package/dist/components-harmony-ets/{index.ts → tag.ts} +6 -0
  50. package/dist/components-harmony-ets/text.ets +111 -113
  51. package/dist/components-harmony-ets/textArea.ets +51 -95
  52. package/dist/components-harmony-ets/utils/AttributeManager.ets +2 -2
  53. package/dist/components-harmony-ets/utils/DynamicCenter.ts +2 -2
  54. package/dist/components-harmony-ets/utils/flexManager.ets +50 -19
  55. package/dist/components-harmony-ets/utils/helper.ets +20 -8
  56. package/dist/components-harmony-ets/utils/htmlParser/HarmonyHTMLParser.ts +1 -2
  57. package/dist/components-harmony-ets/utils/htmlParser/index.ts +1 -1
  58. package/dist/components-harmony-ets/utils/index.ts +54 -50
  59. package/dist/components-harmony-ets/utils/styles.ets +172 -92
  60. package/dist/components-harmony-ets/video.ets +37 -88
  61. package/dist/components-harmony-ets/view.ets +63 -159
  62. package/dist/components-harmony-ets/webView.ets +41 -98
  63. package/dist/index.d.ts +152 -0
  64. package/dist/index.js +187 -56
  65. package/dist/index.js.map +1 -1
  66. package/dist/runtime-ets/bom/document.ts +6 -4
  67. package/dist/runtime-ets/bom/getComputedStyle.ts +2 -2
  68. package/dist/runtime-ets/bom/window.ts +9 -2
  69. package/dist/runtime-ets/current.ts +5 -1
  70. package/dist/runtime-ets/dom/bind.ts +28 -12
  71. package/dist/runtime-ets/dom/class-list.ts +2 -2
  72. package/dist/runtime-ets/dom/cssNesting.ts +419 -0
  73. package/dist/runtime-ets/dom/cssStyleDeclaration.ts +28 -42
  74. package/dist/runtime-ets/dom/document.ts +22 -8
  75. package/dist/runtime-ets/dom/element/canvas.ts +136 -0
  76. package/dist/runtime-ets/dom/element/element.ts +376 -57
  77. package/dist/runtime-ets/dom/element/form.ts +31 -26
  78. package/dist/runtime-ets/dom/element/index.ts +30 -2
  79. package/dist/runtime-ets/dom/element/movableArea.ts +11 -0
  80. package/dist/runtime-ets/dom/element/movableView.ts +248 -0
  81. package/dist/runtime-ets/dom/element/normal.ts +35 -8
  82. package/dist/runtime-ets/dom/element/progress.ts +11 -0
  83. package/dist/runtime-ets/dom/element/scrollView.ts +1 -0
  84. package/dist/runtime-ets/dom/element/text.ts +1 -8
  85. package/dist/runtime-ets/dom/element/video.ts +5 -4
  86. package/dist/runtime-ets/dom/element/webView.ts +12 -5
  87. package/dist/runtime-ets/dom/event.ts +3 -5
  88. package/dist/runtime-ets/dom/eventTarget.ts +2 -3
  89. package/dist/runtime-ets/dom/node.ts +65 -32
  90. package/dist/runtime-ets/dom/stylesheet/covertWeb2Hm.ts +418 -237
  91. package/dist/runtime-ets/dom/stylesheet/index.ts +29 -311
  92. package/dist/runtime-ets/dom/stylesheet/type.ts +53 -11
  93. package/dist/runtime-ets/dom/stylesheet/util.ts +33 -27
  94. package/dist/runtime-ets/index.ts +2 -2
  95. package/dist/runtime-ets/interface/event.ts +1 -1
  96. package/dist/runtime-ets/utils/index.ts +74 -13
  97. package/dist/runtime-ets/utils/info.ts +2 -2
  98. package/dist/runtime-framework/react/app.ts +25 -30
  99. package/dist/runtime-framework/react/hooks.ts +3 -4
  100. package/dist/runtime-framework/react/index.ts +0 -2
  101. package/dist/runtime-framework/react/native-page.ts +219 -82
  102. package/dist/runtime-framework/react/page.ts +6 -10
  103. package/dist/runtime-framework/react/utils/index.ts +3 -3
  104. package/dist/runtime-framework/solid/app.ts +30 -46
  105. package/dist/runtime-framework/solid/connect.ts +21 -3
  106. package/dist/runtime-framework/solid/hooks.ts +17 -12
  107. package/dist/runtime-framework/solid/index.ts +6 -2
  108. package/dist/runtime-framework/solid/page.ts +85 -31
  109. package/dist/runtime-framework/solid/reconciler/props.ts +70 -25
  110. package/dist/runtime-framework/solid/reconciler/render.ts +16 -6
  111. package/dist/runtime-framework/solid/reconciler/use.ts +0 -1
  112. package/dist/runtime-framework/solid/utils/index.ts +3 -5
  113. package/dist/runtime-utils.d.ts +827 -0
  114. package/dist/runtime-utils.js +618 -245
  115. package/dist/runtime-utils.js.map +1 -1
  116. package/dist/runtime.d.ts +1 -0
  117. package/dist/runtime.js +618 -245
  118. package/dist/runtime.js.map +1 -1
  119. package/index.js +3 -1
  120. package/package.json +14 -15
  121. package/static/media/cancel.svg +1 -1
  122. package/static/media/circle.svg +1 -1
  123. package/static/media/clear.svg +1 -1
  124. package/static/media/download.svg +1 -1
  125. package/static/media/info.svg +1 -1
  126. package/static/media/info_circle.svg +1 -1
  127. package/static/media/search.svg +1 -1
  128. package/static/media/success.svg +1 -1
  129. package/static/media/success_no_circle.svg +1 -1
  130. package/static/media/warn.svg +1 -1
  131. package/types/harmony.d.ts +5 -0
  132. package/types/index.d.ts +4 -0
  133. package/types/runtime.d.ts +3 -1
  134. package/dist/runtime-ets/utils/bind.ts +0 -24
  135. /package/dist/runtime-framework/solid/{contant.ts → constant.ts} +0 -0
@@ -1,73 +1,9 @@
1
1
  import { eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, convertNumber2PX } from '@tarojs/runtime'
2
2
 
3
- import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
3
+ import commonStyleModify from './style'
4
+ import { shouldBindEvent, getNodeThresholds } from './utils/helper'
4
5
 
5
- import type { TaroIconElement, TaroAny, TaroStyleType } from '@tarojs/runtime'
6
-
7
- @Extend(Image)
8
- function attrs (style: TaroStyleType) {
9
- .id(style.id)
10
- .key(style.id)
11
- .flexGrow(style.flexGrow)
12
- .flexShrink(style.flexShrink)
13
- .flexBasis(style.flexBasis)
14
- .alignSelf(style.alignSelf)
15
- .padding({
16
- top: style.paddingTop,
17
- right: style.paddingRight,
18
- bottom: style.paddingBottom,
19
- left: style.paddingLeft
20
- })
21
- .margin({
22
- top: style.marginTop,
23
- right: style.marginRight,
24
- bottom: style.marginBottom,
25
- left: style.marginLeft
26
- })
27
- .width(style.width || convertNumber2PX(23))
28
- .height(style.height || convertNumber2PX(23))
29
- .constraintSize({
30
- minWidth: style.minWidth,
31
- maxWidth: style.maxWidth,
32
- minHeight: style.minHeight,
33
- maxHeight: style.maxHeight
34
- })
35
- .backgroundColor(style.backgroundColor)
36
- .backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
37
- .backgroundImageSize(style.backgroundSize)
38
- .backgroundImagePosition(style.backgroundPosition)
39
- .borderStyle({
40
- top: style.borderTopStyle,
41
- right: style.borderRightStyle,
42
- bottom: style.borderBottomStyle,
43
- left: style.borderLeftStyle
44
- })
45
- .borderWidth({
46
- top: style.borderTopWidth,
47
- right: style.borderRightWidth,
48
- bottom: style.borderBottomWidth,
49
- left: style.borderLeftWidth
50
- })
51
- .borderColor({
52
- top: style.borderTopColor,
53
- right: style.borderRightColor,
54
- bottom: style.borderBottomColor,
55
- left: style.borderLeftColor
56
- })
57
- .borderRadius({
58
- topLeft: style.borderTopLeftRadius,
59
- topRight: style.borderTopRightRadius,
60
- bottomLeft: style.borderBottomLeftRadius,
61
- bottomRight: style.borderBottomRightRadius
62
- })
63
- .zIndex(style.zIndex)
64
- .opacity(style.opacity)
65
- .linearGradient(style.linearGradient)
66
- .clip(style.overflow)
67
- .rotate({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y, angle: 0 })
68
- .scale({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y })
69
- .transform(style.transform)
70
- }
6
+ import type { TaroIconElement, TaroAny } from '@tarojs/runtime'
71
7
 
72
8
  const ICON_COLOR_MAP: TaroAny = {
73
9
  success: Color.Green,
@@ -112,20 +48,34 @@ function getIconData (node: TaroIconElement): Resource | null {
112
48
  }
113
49
  }
114
50
 
115
- @Builder
116
- export default function TaroIcon (node: TaroIconElement) {
117
- Image(getIconData(node))
118
- .objectFit(ImageFit.Contain)
119
- .fillColor(node._attrs.color || ICON_COLOR_MAP[node._attrs.type] || Color.Black)
120
- .attrs(getNormalAttributes(node))
121
- .size({
122
- width: convertNumber2VP(Number(node._attrs.size) || 23),
123
- height: convertNumber2VP(Number(node._attrs.size) || 23),
124
- })
125
- .onComplete(e => eventHandler(e, 'complete', node))
126
- .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
127
- .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
128
- .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
129
- node._nodeInfo.areaInfo = res[1]
130
- }))
51
+ @Component
52
+ export default struct TaroIcon {
53
+ @Builder customBuilder() {}
54
+ @BuilderParam createLazyChildren: (node: TaroIconElement, layer?: number) => void = this.customBuilder
55
+ @ObjectLink node: TaroIconElement
56
+ @State overwriteStyle: Record<string, TaroAny> = {}
57
+
58
+ aboutToAppear(): void {
59
+ if (this.node) {
60
+ this.node._instance = this
61
+ }
62
+ }
63
+
64
+ build() {
65
+ Image(getIconData(this.node))
66
+ .objectFit(ImageFit.Contain)
67
+ .fillColor(this.node._attrs.color || ICON_COLOR_MAP[this.node._attrs.type] || Color.Black)
68
+ .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
69
+ .size({
70
+ width: Number(this.node._attrs.size) || 23,
71
+ height: Number(this.node._attrs.size) || 23
72
+ })
73
+ .onComplete(e => { eventHandler(e, 'complete', this.node) })
74
+ .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
75
+ .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
76
+ .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
77
+ this.node._nodeInfo.areaInfo = res[1]
78
+ }))
79
+ }
131
80
  }
81
+
@@ -1,75 +1,11 @@
1
1
  import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
2
2
 
3
- import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
3
+ import commonStyleModify from './style'
4
+ import { shouldBindEvent, getNodeThresholds } from './utils/helper'
4
5
 
5
- import type { TaroImageElement, TaroAny, TaroStyleType } from '@tarojs/runtime'
6
+ import type { TaroImageElement, TaroAny } from '@tarojs/runtime'
6
7
 
7
- @Extend(Image)
8
- function attrs (style: TaroStyleType) {
9
- .id(style.id)
10
- .key(style.id)
11
- .flexGrow(style.flexGrow)
12
- .flexShrink(style.flexShrink)
13
- .flexBasis(style.flexBasis)
14
- .alignSelf(style.alignSelf)
15
- .padding({
16
- top: style.paddingTop,
17
- right: style.paddingRight,
18
- bottom: style.paddingBottom,
19
- left: style.paddingLeft
20
- })
21
- .margin({
22
- top: style.marginTop,
23
- right: style.marginRight,
24
- bottom: style.marginBottom,
25
- left: style.marginLeft
26
- })
27
- .width(style.width)
28
- .height(style.height)
29
- .constraintSize({
30
- minWidth: style.minWidth,
31
- maxWidth: style.maxWidth,
32
- minHeight: style.minHeight,
33
- maxHeight: style.maxHeight
34
- })
35
- .backgroundColor(style.backgroundColor)
36
- .backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
37
- .backgroundImageSize(style.backgroundSize)
38
- .backgroundImagePosition(style.backgroundPosition)
39
- .borderStyle({
40
- top: style.borderTopStyle,
41
- right: style.borderRightStyle,
42
- bottom: style.borderBottomStyle,
43
- left: style.borderLeftStyle
44
- })
45
- .borderWidth({
46
- top: style.borderTopWidth,
47
- right: style.borderRightWidth,
48
- bottom: style.borderBottomWidth,
49
- left: style.borderLeftWidth
50
- })
51
- .borderColor({
52
- top: style.borderTopColor,
53
- right: style.borderRightColor,
54
- bottom: style.borderBottomColor,
55
- left: style.borderLeftColor
56
- })
57
- .borderRadius({
58
- topLeft: style.borderTopLeftRadius,
59
- topRight: style.borderTopRightRadius,
60
- bottomLeft: style.borderBottomLeftRadius,
61
- bottomRight: style.borderBottomRightRadius
62
- })
63
- .zIndex(style.zIndex)
64
- .opacity(style.opacity)
65
- .linearGradient(style.linearGradient)
66
- .clip(style.overflow)
67
- .rotate({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y, angle: 0 })
68
- .scale({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y })
69
- .transform(style.transform)
70
- }
71
-
72
- function getImageMode (mode: string): ImageFit {
8
+ export function getImageMode (mode: string): ImageFit {
73
9
  switch (mode) {
74
10
  case 'aspectFit': return ImageFit.Contain
75
11
  case 'aspectFill': return ImageFit.Cover
@@ -80,15 +16,35 @@ function getImageMode (mode: string): ImageFit {
80
16
  }
81
17
  }
82
18
 
83
- @Builder
84
- export default function TaroImage (node: TaroImageElement) {
85
- Image(node.getAttribute('src'))
86
- .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
87
- .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
88
- node._nodeInfo.areaInfo = res[1]
89
- }))
90
- .objectFit(getImageMode(node.getAttribute('mode')))
91
- .attrs(getNormalAttributes(node))
92
- .onComplete(e => eventHandler(e, 'complete', node))
93
- .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
19
+ @Component
20
+ export default struct TaroImage {
21
+ @Builder customBuilder() {}
22
+ @BuilderParam createLazyChildren: (node: TaroImageElement, layer?: number) => void = this.customBuilder
23
+ @ObjectLink node: TaroImageElement
24
+ @State overwriteStyle: Record<string, TaroAny> = {}
25
+
26
+ aboutToAppear(): void {
27
+ if (this.node) {
28
+ this.node._instance = this
29
+ }
30
+ }
31
+
32
+ build() {
33
+ Image(this.node.getAttribute('src'))
34
+ .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
35
+ .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
36
+ this.node._nodeInfo.areaInfo = res[1]
37
+ }))
38
+ .objectFit(getImageMode(this.node.getAttribute('mode')))
39
+ .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
40
+ .onComplete(e => { eventHandler(e, 'complete', this.node) })
41
+ .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
42
+ // TODO: 临时改为申明式,后续等鸿蒙修复modify设置失败的bug后删除该申明
43
+ .borderRadius({
44
+ topLeft: this.node._st.hmStyle.borderTopLeftRadius,
45
+ topRight: this.node._st.hmStyle.borderTopRightRadius,
46
+ bottomLeft: this.node._st.hmStyle.borderBottomLeftRadius,
47
+ bottomRight: this.node._st.hmStyle.borderBottomRightRadius
48
+ })
49
+ }
94
50
  }
@@ -0,0 +1,92 @@
1
+ import TaroImage, { getImageMode } from './image'
2
+ import TaroText from './text'
3
+ import TaroView from './view'
4
+ import TaroIcon from './icon'
5
+ import TaroForm from './form'
6
+ import TaroLabel from './label'
7
+ import TaroInput from './input'
8
+ import TaroVideo from './video'
9
+ import TaroCanvas from './canvas'
10
+ import TaroButton from './button'
11
+ import TaroPicker from './picker'
12
+ import TaroSlider from './slider'
13
+ import TaroSwitch from './switch'
14
+ import TaroSwiper from './swiper'
15
+ import TaroWebView from './webView'
16
+ import TaroTextArea from './textArea'
17
+ import TaroRichText from './richText'
18
+ import TaroProgress from './progress'
19
+ import TaroInnerHtml from './innerHtml'
20
+ import TaroScrollView from './scrollView'
21
+ import TaroMovableArea from './movableArea'
22
+ import TaroMovableView from './movableView'
23
+ import { TaroRadio, TaroRadioGroup } from './radio'
24
+ import { TaroCheckboxGroup, TaroCheckbox } from './checkbox'
25
+ import TaroPageMeta from './pageMeta'
26
+ import TaroNavigationBar from './navigationBar'
27
+
28
+ import TaroListView from './listView'
29
+ import TaroStickySection from './stickySection'
30
+ import TaroScrollList from './scrollList'
31
+
32
+ import commonStyleModify, { rowModify, columnModify, textModify, setNormalTextAttributeIntoInstance } from './style'
33
+ import { getButtonColor } from './button'
34
+ import { FlexManager } from './utils/flexManager'
35
+ import { DynamicCenter } from './utils/DynamicCenter'
36
+ import { TOUCH_EVENT_MAP } from './utils/constant/event'
37
+ import { BUTTON_THEME_COLOR } from './utils/constant/style'
38
+ import { getStyleAttr } from './utils/styles'
39
+ import { shouldBindEvent, getNodeThresholds, getNormalAttributes, getFontAttributes } from './utils/helper'
40
+
41
+ export {
42
+ textModify,
43
+ getStyleAttr,
44
+ FlexManager,
45
+ DynamicCenter,
46
+ getButtonColor,
47
+ TOUCH_EVENT_MAP,
48
+ shouldBindEvent,
49
+ getFontAttributes,
50
+ commonStyleModify,
51
+ rowModify,
52
+ columnModify,
53
+ getNodeThresholds,
54
+ BUTTON_THEME_COLOR,
55
+ getNormalAttributes,
56
+ setNormalTextAttributeIntoInstance,
57
+ getImageMode,
58
+ }
59
+
60
+ export {
61
+ TaroImage,
62
+ TaroCanvas,
63
+ TaroText,
64
+ TaroView,
65
+ TaroIcon,
66
+ TaroForm,
67
+ TaroLabel,
68
+ TaroInput,
69
+ TaroVideo,
70
+ TaroButton,
71
+ TaroPicker,
72
+ TaroSlider,
73
+ TaroSwitch,
74
+ TaroSwiper,
75
+ TaroWebView,
76
+ TaroTextArea,
77
+ TaroRichText,
78
+ TaroProgress,
79
+ TaroInnerHtml,
80
+ TaroScrollView,
81
+ TaroMovableArea,
82
+ TaroMovableView,
83
+ TaroRadio,
84
+ TaroRadioGroup,
85
+ TaroCheckboxGroup,
86
+ TaroCheckbox,
87
+ TaroPageMeta,
88
+ TaroNavigationBar,
89
+ TaroListView,
90
+ TaroStickySection,
91
+ TaroScrollList
92
+ }
@@ -1,11 +1,16 @@
1
1
  import htmlParser from './utils/htmlParser'
2
- import { createChildItemWithPosition } from './render'
3
2
 
4
- import type { TaroElement } from '@tarojs/runtime'
3
+ import type { TaroElement, TaroInnerHtmlElement } from '@tarojs/runtime'
5
4
 
6
- @Builder
7
- export default function TaroInnerHtml (node: TaroElement) {
8
- if (node.innerHTML) {
9
- createChildItemWithPosition(htmlParser(node.innerHTML))
5
+ @Component
6
+ export default struct TaroInnerHtml {
7
+ @Builder customBuilder() {}
8
+ @BuilderParam createChildItem: (node: TaroElement, callback?: (node: TaroElement) => void) => void = this.customBuilder
9
+ @ObjectLink node: TaroInnerHtmlElement
10
+
11
+ build() {
12
+ if (this.node?.hmStyle?.display !== 'none' && this.node.innerHTML) {
13
+ this.createChildItem(htmlParser(this.node.innerHTML))
14
+ }
10
15
  }
11
16
  }
@@ -1,77 +1,19 @@
1
1
  import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
2
2
 
3
- import { getNormalAttributes, parseStyles, shouldBindEvent, getNodeThresholds } from './utils/helper'
3
+ import commonStyleModify from './style'
4
+ import { parseStyles, shouldBindEvent, getNodeThresholds, getStyleAttr } from './utils/helper'
4
5
  import { INPUT_TYPE_MAP, INPUT_CONFIRM_MAP } from './utils/constant/style'
5
6
 
6
7
  import type { TaroStyleType, TaroAny, TaroInputElement, TaroEvent } from '@tarojs/runtime'
7
8
 
8
9
  interface InputAttrs {
9
10
  textAlign?: TextAlign
11
+ autoFocus?: boolean
12
+ disabled?: boolean
10
13
  }
11
14
 
12
15
  @Extend(TextInput)
13
16
  function styles (style: TaroStyleType) {
14
- .id(style.id)
15
- .key(style.id)
16
- .flexGrow(style.flexGrow)
17
- .flexShrink(style.flexShrink)
18
- .flexBasis(style.flexBasis)
19
- .alignSelf(style.alignSelf)
20
- .padding({
21
- top: style.paddingTop,
22
- right: style.paddingRight,
23
- bottom: style.paddingBottom,
24
- left: style.paddingLeft
25
- })
26
- .margin({
27
- top: style.marginTop,
28
- right: style.marginRight,
29
- bottom: style.marginBottom,
30
- left: style.marginLeft
31
- })
32
- .width(style.width)
33
- .height(style.height)
34
- .constraintSize({
35
- minWidth: style.minWidth,
36
- maxWidth: style.maxWidth,
37
- minHeight: style.minHeight,
38
- maxHeight: style.maxHeight
39
- })
40
- .backgroundColor(style.backgroundColor)
41
- .backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
42
- .backgroundImageSize(style.backgroundSize)
43
- .backgroundImagePosition(style.backgroundPosition)
44
- .borderStyle({
45
- top: style.borderTopStyle,
46
- right: style.borderRightStyle,
47
- bottom: style.borderBottomStyle,
48
- left: style.borderLeftStyle
49
- })
50
- .borderWidth({
51
- top: style.borderTopWidth,
52
- right: style.borderRightWidth,
53
- bottom: style.borderBottomWidth,
54
- left: style.borderLeftWidth
55
- })
56
- .borderColor({
57
- top: style.borderTopColor,
58
- right: style.borderRightColor,
59
- bottom: style.borderBottomColor,
60
- left: style.borderLeftColor
61
- })
62
- .borderRadius({
63
- topLeft: style.borderTopLeftRadius,
64
- topRight: style.borderTopRightRadius,
65
- bottomLeft: style.borderBottomLeftRadius,
66
- bottomRight: style.borderBottomRightRadius
67
- })
68
- .zIndex(style.zIndex)
69
- .opacity(style.opacity)
70
- .linearGradient(style.linearGradient)
71
- .clip(style.overflow)
72
- .rotate({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y, angle: 0 })
73
- .scale({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y })
74
- .transform(style.transform)
75
17
  .fontColor(style.color)
76
18
  .fontSize(style.fontSize)
77
19
  .fontWeight(style.fontWeight)
@@ -82,12 +24,15 @@ function styles (style: TaroStyleType) {
82
24
  @Extend(TextInput)
83
25
  function attrs(attr: InputAttrs) {
84
26
  .textAlign(attr.textAlign)
27
+ .defaultFocus(attr.autoFocus)
28
+ .enabled(!attr.disabled)
85
29
  }
86
30
 
87
-
88
31
  function getAttributes(node: TaroInputElement): InputAttrs {
89
32
  return {
90
33
  textAlign: node.hmStyle.textAlign,
34
+ autoFocus: node._attrs.autoFocus || node._attrs.focus || false,
35
+ disabled: node._attrs.disabled || false,
91
36
  }
92
37
  }
93
38
 
@@ -104,11 +49,26 @@ function getPlaceholderColor (node: TaroInputElement): string {
104
49
  return placeholderTextColor || parseStyles(placeholderStyle)?.color
105
50
  }
106
51
 
52
+ function getPlaceholderFont(node: TaroInputElement): Font {
53
+ const placeholderStyle: string = node._attrs.placeholderStyle || ''
54
+ const styles = parseStyles(placeholderStyle);
55
+ if (styles) {
56
+ return {
57
+ size: styles.fontSize,
58
+ }
59
+ }
60
+
61
+ return {}
62
+ }
63
+
107
64
  @Component
108
65
  export default struct TaroInput {
109
66
  @State value: string = ''
110
67
 
111
- node: TaroInputElement | null = null
68
+ @Builder customBuilder() {}
69
+ @BuilderParam createLazyChildren: (node: TaroInputElement, layer?: number) => void = this.customBuilder
70
+ @ObjectLink node: TaroInputElement
71
+ @State overwriteStyle: Record<string, TaroAny> = {}
112
72
 
113
73
  aboutToAppear () {
114
74
  if (this.node) {
@@ -123,42 +83,45 @@ export default struct TaroInput {
123
83
  }
124
84
 
125
85
  build () {
126
- if (this.node) {
127
- TextInput({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
128
- .key(this.node._nid)
129
- .type(getInputType(this.node))
130
- .maxLength(Number(this.node._attrs?.maxlength) || null)
131
- .placeholderColor(getPlaceholderColor(this.node))
132
- .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
133
- .styles(getNormalAttributes(this.node))
134
- .attrs(getAttributes(this.node))
135
- .onChange((value: string) => {
136
- const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
137
-
138
- this.value = value
139
- this.node?.updateFormWidgetValue(value)
140
- eventHandler(event, 'input', this.node)
141
- })
142
- .onSubmit(() => {
143
- const event: TaroEvent = createTaroEvent('confirm', { detail: { value: this.value } }, this.node)
144
- eventHandler(event, 'confirm', this.node)
145
- })
146
- .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
147
- .onBlur(() => {
148
- const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
149
- eventHandler(event, 'blur', this.node)
150
- })
151
- .onFocus(() => {
152
- const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
153
-
154
- eventHandler(event, 'focus', this.node)
155
- })
156
- .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
157
- if (this.node) {
158
- this.node._nodeInfo.areaInfo = res[1]
159
- }
160
- }))
161
- .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
162
- }
86
+ TextInput({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
87
+ .key(this.node._nid.toString())
88
+ .type(getInputType(this.node))
89
+ .maxLength(Number(this.node._attrs?.maxlength) || null)
90
+ .placeholderColor(getPlaceholderColor(this.node))
91
+ .placeholderFont(getPlaceholderFont(this.node))
92
+ .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
93
+ .padding(0) // Note: 移出 Input 默认 padding 设置
94
+ .backgroundColor(getStyleAttr(this.node, "backgroundColor"))//
95
+ .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
96
+ .styles(this.node?.hmStyle)
97
+ .attrs(getAttributes(this.node))
98
+ .onChange((value: string) => {
99
+ const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
100
+
101
+ this.value = value
102
+ this.node?.updateFormWidgetValue(value)
103
+ eventHandler(event, 'input', this.node)
104
+ })
105
+ .onSubmit(() => {
106
+ const event: TaroEvent = createTaroEvent('confirm', { detail: { value: this.value } }, this.node)
107
+ eventHandler(event, 'confirm', this.node)
108
+ })
109
+ .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
110
+ .onBlur(() => {
111
+ const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
112
+ eventHandler(event, 'blur', this.node)
113
+ })
114
+ .onFocus(() => {
115
+ const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
116
+
117
+ eventHandler(event, 'focus', this.node)
118
+ })
119
+ .enableKeyboardOnFocus(typeof (this.node._attrs as TaroAny)?.enableKeyboardOnFocus === 'undefined' ? true : (this.node._attrs as TaroAny).enableKeyboardOnFocus)
120
+ .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
121
+ if (this.node) {
122
+ this.node._nodeInfo.areaInfo = res[1]
123
+ }
124
+ }))
125
+ .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
163
126
  }
164
127
  }