@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.
- package/dist/apis/base/system.ts +73 -20
- package/dist/apis/canvas/index.ts +10 -1
- package/dist/apis/device/clipboard.ts +23 -8
- package/dist/apis/framework/index.ts +1 -5
- package/dist/apis/index.ts +27 -17
- package/dist/apis/media/image/index.ts +169 -17
- package/dist/apis/network/request.ts +5 -5
- package/dist/apis/route/index.ts +15 -0
- package/dist/apis/storage/index.ts +146 -78
- package/dist/apis/ui/animation/animation.ts +71 -29
- package/dist/apis/ui/background.ts +2 -1
- package/dist/apis/ui/interaction/index.ts +58 -59
- package/dist/apis/ui/navigation-bar/index.ts +1 -1
- package/dist/apis/ui/pull-down-refresh.ts +9 -3
- package/dist/apis/ui/scroll/index.ts +5 -5
- package/dist/apis/ui/tab-bar.ts +3 -3
- package/dist/apis/utils/index.ts +21 -2
- package/dist/apis/utils/permissions.ts +6 -0
- package/dist/apis/wxml/IntersectionObserver.ts +18 -10
- package/dist/apis/wxml/index.ts +2 -0
- package/dist/apis/wxml/selectorQuery.ts +26 -13
- package/dist/components-harmony-ets/button.ets +63 -77
- package/dist/components-harmony-ets/canvas.ets +51 -0
- package/dist/components-harmony-ets/checkbox.ets +75 -258
- package/dist/components-harmony-ets/form.ets +51 -158
- package/dist/components-harmony-ets/icon.ets +33 -83
- package/dist/components-harmony-ets/image.ets +35 -79
- package/dist/components-harmony-ets/index.ets +92 -0
- package/dist/components-harmony-ets/innerHtml.ets +11 -6
- package/dist/components-harmony-ets/input.ets +64 -101
- package/dist/components-harmony-ets/label.ets +72 -174
- package/dist/components-harmony-ets/listView.ets +31 -0
- package/dist/components-harmony-ets/movableArea.ets +126 -0
- package/dist/components-harmony-ets/movableView.ets +93 -0
- package/dist/components-harmony-ets/navigationBar.ets +65 -0
- package/dist/components-harmony-ets/pageMeta.ets +94 -0
- package/dist/components-harmony-ets/picker.ets +46 -163
- package/dist/components-harmony-ets/progress.ets +52 -0
- package/dist/components-harmony-ets/pseudo.ets +80 -0
- package/dist/components-harmony-ets/radio.ets +80 -264
- package/dist/components-harmony-ets/richText.ets +20 -102
- package/dist/components-harmony-ets/scrollList.ets +108 -0
- package/dist/components-harmony-ets/scrollView.ets +71 -160
- package/dist/components-harmony-ets/slider.ets +22 -82
- package/dist/components-harmony-ets/stickySection.ets +42 -0
- package/dist/components-harmony-ets/style.ets +410 -0
- package/dist/components-harmony-ets/swiper.ets +64 -87
- package/dist/components-harmony-ets/switch.ets +39 -99
- package/dist/components-harmony-ets/{index.ts → tag.ts} +6 -0
- package/dist/components-harmony-ets/text.ets +111 -113
- package/dist/components-harmony-ets/textArea.ets +51 -95
- package/dist/components-harmony-ets/utils/AttributeManager.ets +2 -2
- package/dist/components-harmony-ets/utils/DynamicCenter.ts +2 -2
- package/dist/components-harmony-ets/utils/flexManager.ets +50 -19
- package/dist/components-harmony-ets/utils/helper.ets +20 -8
- package/dist/components-harmony-ets/utils/htmlParser/HarmonyHTMLParser.ts +1 -2
- package/dist/components-harmony-ets/utils/htmlParser/index.ts +1 -1
- package/dist/components-harmony-ets/utils/index.ts +54 -50
- package/dist/components-harmony-ets/utils/styles.ets +172 -92
- package/dist/components-harmony-ets/video.ets +37 -88
- package/dist/components-harmony-ets/view.ets +63 -159
- package/dist/components-harmony-ets/webView.ets +41 -98
- package/dist/index.d.ts +152 -0
- package/dist/index.js +187 -56
- package/dist/index.js.map +1 -1
- package/dist/runtime-ets/bom/document.ts +6 -4
- package/dist/runtime-ets/bom/getComputedStyle.ts +2 -2
- package/dist/runtime-ets/bom/window.ts +9 -2
- package/dist/runtime-ets/current.ts +5 -1
- package/dist/runtime-ets/dom/bind.ts +28 -12
- package/dist/runtime-ets/dom/class-list.ts +2 -2
- package/dist/runtime-ets/dom/cssNesting.ts +419 -0
- package/dist/runtime-ets/dom/cssStyleDeclaration.ts +28 -42
- package/dist/runtime-ets/dom/document.ts +22 -8
- package/dist/runtime-ets/dom/element/canvas.ts +136 -0
- package/dist/runtime-ets/dom/element/element.ts +376 -57
- package/dist/runtime-ets/dom/element/form.ts +31 -26
- package/dist/runtime-ets/dom/element/index.ts +30 -2
- package/dist/runtime-ets/dom/element/movableArea.ts +11 -0
- package/dist/runtime-ets/dom/element/movableView.ts +248 -0
- package/dist/runtime-ets/dom/element/normal.ts +35 -8
- package/dist/runtime-ets/dom/element/progress.ts +11 -0
- package/dist/runtime-ets/dom/element/scrollView.ts +1 -0
- package/dist/runtime-ets/dom/element/text.ts +1 -8
- package/dist/runtime-ets/dom/element/video.ts +5 -4
- package/dist/runtime-ets/dom/element/webView.ts +12 -5
- package/dist/runtime-ets/dom/event.ts +3 -5
- package/dist/runtime-ets/dom/eventTarget.ts +2 -3
- package/dist/runtime-ets/dom/node.ts +65 -32
- package/dist/runtime-ets/dom/stylesheet/covertWeb2Hm.ts +418 -237
- package/dist/runtime-ets/dom/stylesheet/index.ts +29 -311
- package/dist/runtime-ets/dom/stylesheet/type.ts +53 -11
- package/dist/runtime-ets/dom/stylesheet/util.ts +33 -27
- package/dist/runtime-ets/index.ts +2 -2
- package/dist/runtime-ets/interface/event.ts +1 -1
- package/dist/runtime-ets/utils/index.ts +74 -13
- package/dist/runtime-ets/utils/info.ts +2 -2
- package/dist/runtime-framework/react/app.ts +25 -30
- package/dist/runtime-framework/react/hooks.ts +3 -4
- package/dist/runtime-framework/react/index.ts +0 -2
- package/dist/runtime-framework/react/native-page.ts +219 -82
- package/dist/runtime-framework/react/page.ts +6 -10
- package/dist/runtime-framework/react/utils/index.ts +3 -3
- package/dist/runtime-framework/solid/app.ts +30 -46
- package/dist/runtime-framework/solid/connect.ts +21 -3
- package/dist/runtime-framework/solid/hooks.ts +17 -12
- package/dist/runtime-framework/solid/index.ts +6 -2
- package/dist/runtime-framework/solid/page.ts +85 -31
- package/dist/runtime-framework/solid/reconciler/props.ts +70 -25
- package/dist/runtime-framework/solid/reconciler/render.ts +16 -6
- package/dist/runtime-framework/solid/reconciler/use.ts +0 -1
- package/dist/runtime-framework/solid/utils/index.ts +3 -5
- package/dist/runtime-utils.d.ts +827 -0
- package/dist/runtime-utils.js +618 -245
- package/dist/runtime-utils.js.map +1 -1
- package/dist/runtime.d.ts +1 -0
- package/dist/runtime.js +618 -245
- package/dist/runtime.js.map +1 -1
- package/index.js +3 -1
- package/package.json +14 -15
- package/static/media/cancel.svg +1 -1
- package/static/media/circle.svg +1 -1
- package/static/media/clear.svg +1 -1
- package/static/media/download.svg +1 -1
- package/static/media/info.svg +1 -1
- package/static/media/info_circle.svg +1 -1
- package/static/media/search.svg +1 -1
- package/static/media/success.svg +1 -1
- package/static/media/success_no_circle.svg +1 -1
- package/static/media/warn.svg +1 -1
- package/types/harmony.d.ts +5 -0
- package/types/index.d.ts +4 -0
- package/types/runtime.d.ts +3 -1
- package/dist/runtime-ets/utils/bind.ts +0 -24
- /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
|
|
3
|
+
import commonStyleModify from './style'
|
|
4
|
+
import { shouldBindEvent, getNodeThresholds } from './utils/helper'
|
|
4
5
|
|
|
5
|
-
import type { TaroIconElement, TaroAny
|
|
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
|
-
@
|
|
116
|
-
export default
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
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
|
|
3
|
+
import commonStyleModify from './style'
|
|
4
|
+
import { shouldBindEvent, getNodeThresholds } from './utils/helper'
|
|
4
5
|
|
|
5
|
-
import type { TaroImageElement, TaroAny
|
|
6
|
+
import type { TaroImageElement, TaroAny } from '@tarojs/runtime'
|
|
6
7
|
|
|
7
|
-
|
|
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
|
-
@
|
|
84
|
-
export default
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
.
|
|
92
|
-
|
|
93
|
-
|
|
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
|
-
@
|
|
7
|
-
export default
|
|
8
|
-
|
|
9
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
.
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
})
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
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
|
}
|