@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.70

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 (99) hide show
  1. package/LICENSE +433 -0
  2. package/README.md +1 -1
  3. package/lib/config.js +0 -14
  4. package/lib/dependencies/ResolveDependency.js +0 -5
  5. package/lib/index.js +7 -38
  6. package/lib/json-compiler/helper.js +3 -3
  7. package/lib/loader.js +0 -53
  8. package/lib/parser.js +1 -1
  9. package/lib/platform/json/wx/index.js +21 -8
  10. package/lib/platform/style/wx/index.js +51 -54
  11. package/lib/platform/template/wx/component-config/button.js +2 -14
  12. package/lib/platform/template/wx/component-config/fix-component-name.js +15 -12
  13. package/lib/platform/template/wx/component-config/image.js +0 -4
  14. package/lib/platform/template/wx/component-config/index.js +1 -1
  15. package/lib/platform/template/wx/component-config/input.js +0 -4
  16. package/lib/platform/template/wx/component-config/rich-text.js +6 -2
  17. package/lib/platform/template/wx/component-config/scroll-view.js +0 -4
  18. package/lib/platform/template/wx/component-config/switch.js +0 -4
  19. package/lib/platform/template/wx/component-config/text.js +0 -4
  20. package/lib/platform/template/wx/component-config/textarea.js +0 -5
  21. package/lib/platform/template/wx/component-config/unsupported.js +1 -1
  22. package/lib/platform/template/wx/component-config/view.js +0 -4
  23. package/lib/platform/template/wx/index.js +1 -127
  24. package/lib/resolve-loader.js +1 -4
  25. package/lib/runtime/components/react/dist/getInnerListeners.js +5 -6
  26. package/lib/runtime/components/react/dist/mpx-canvas/html.js +2 -4
  27. package/lib/runtime/components/react/dist/mpx-canvas/index.jsx +5 -1
  28. package/lib/runtime/components/react/dist/mpx-picker-view-column.jsx +96 -107
  29. package/lib/runtime/components/react/dist/mpx-picker-view.jsx +26 -27
  30. package/lib/runtime/components/react/dist/mpx-swiper/carouse.jsx +480 -0
  31. package/lib/runtime/components/react/dist/mpx-swiper/index.jsx +68 -0
  32. package/lib/runtime/components/react/dist/mpx-swiper/type.js +1 -0
  33. package/lib/runtime/components/react/dist/mpx-view.jsx +6 -3
  34. package/lib/runtime/components/react/dist/pickerFaces.js +6 -12
  35. package/lib/runtime/components/react/dist/{pickerViewOverlay.jsx → pickerOverlay.jsx} +3 -5
  36. package/lib/runtime/components/react/dist/useAnimationHooks.js +7 -8
  37. package/lib/runtime/components/react/dist/utils.jsx +89 -60
  38. package/lib/runtime/components/react/event.config.ts +25 -26
  39. package/lib/runtime/components/react/getInnerListeners.ts +212 -169
  40. package/lib/runtime/components/react/mpx-button.tsx +9 -14
  41. package/lib/runtime/components/react/mpx-canvas/html.ts +2 -4
  42. package/lib/runtime/components/react/mpx-canvas/index.tsx +44 -46
  43. package/lib/runtime/components/react/mpx-checkbox-group.tsx +15 -13
  44. package/lib/runtime/components/react/mpx-checkbox.tsx +20 -21
  45. package/lib/runtime/components/react/mpx-form.tsx +15 -20
  46. package/lib/runtime/components/react/mpx-icon.tsx +2 -2
  47. package/lib/runtime/components/react/mpx-image.tsx +87 -47
  48. package/lib/runtime/components/react/mpx-input.tsx +24 -32
  49. package/lib/runtime/components/react/mpx-label.tsx +12 -14
  50. package/lib/runtime/components/react/mpx-movable-area.tsx +10 -16
  51. package/lib/runtime/components/react/mpx-movable-view.tsx +20 -24
  52. package/lib/runtime/components/react/mpx-navigator.tsx +2 -8
  53. package/lib/runtime/components/react/mpx-radio-group.tsx +13 -15
  54. package/lib/runtime/components/react/mpx-radio.tsx +19 -25
  55. package/lib/runtime/components/react/mpx-rich-text/html.ts +40 -0
  56. package/lib/runtime/components/react/mpx-rich-text/index.tsx +121 -0
  57. package/lib/runtime/components/react/mpx-root-portal.tsx +3 -5
  58. package/lib/runtime/components/react/mpx-scroll-view.tsx +40 -41
  59. package/lib/runtime/components/react/mpx-switch.tsx +19 -15
  60. package/lib/runtime/components/react/mpx-text.tsx +8 -16
  61. package/lib/runtime/components/react/mpx-textarea.tsx +11 -10
  62. package/lib/runtime/components/react/mpx-view.tsx +18 -20
  63. package/lib/runtime/components/react/mpx-web-view.tsx +94 -59
  64. package/lib/runtime/components/react/types/global.d.ts +2 -1
  65. package/lib/runtime/components/react/useAnimationHooks.ts +36 -12
  66. package/lib/runtime/components/react/utils.tsx +91 -60
  67. package/lib/runtime/components/web/mpx-web-view.vue +34 -20
  68. package/lib/runtime/optionProcessor.js +0 -22
  69. package/lib/style-compiler/index.js +1 -1
  70. package/lib/style-compiler/plugins/scope-id.js +30 -2
  71. package/lib/template-compiler/compiler.js +30 -26
  72. package/lib/utils/env.js +1 -6
  73. package/lib/utils/pre-process-json.js +9 -5
  74. package/package.json +4 -7
  75. package/lib/dependencies/AddEntryDependency.js +0 -24
  76. package/lib/runtime/components/react/dist/mpx-picker-view-column-item.jsx +0 -39
  77. package/lib/runtime/components/react/dist/mpx-swiper.jsx +0 -606
  78. package/lib/runtime/components/react/dist/pickerVIewContext.js +0 -9
  79. package/lib/runtime/components/react/dist/pickerViewMask.jsx +0 -18
  80. package/lib/runtime/components/tenon/getInnerListeners.js +0 -334
  81. package/lib/runtime/components/tenon/tenon-button.vue +0 -309
  82. package/lib/runtime/components/tenon/tenon-image.vue +0 -66
  83. package/lib/runtime/components/tenon/tenon-input.vue +0 -171
  84. package/lib/runtime/components/tenon/tenon-rich-text.vue +0 -26
  85. package/lib/runtime/components/tenon/tenon-scroll-view.vue +0 -127
  86. package/lib/runtime/components/tenon/tenon-switch.vue +0 -96
  87. package/lib/runtime/components/tenon/tenon-text.vue +0 -70
  88. package/lib/runtime/components/tenon/tenon-textarea.vue +0 -86
  89. package/lib/runtime/components/tenon/tenon-view.vue +0 -93
  90. package/lib/runtime/components/web/event.js +0 -105
  91. package/lib/runtime/optionProcessor.tenon.js +0 -84
  92. package/lib/style-compiler/plugins/hm.js +0 -20
  93. package/lib/tenon/index.js +0 -117
  94. package/lib/tenon/processJSON.js +0 -352
  95. package/lib/tenon/processScript.js +0 -203
  96. package/lib/tenon/processStyles.js +0 -21
  97. package/lib/tenon/processTemplate.js +0 -126
  98. package/lib/tenon/script-helper.js +0 -223
  99. package/lib/utils/get-relative-path.js +0 -25
package/lib/runtime/components/react/mpx-radio.tsx CHANGED
@@ -4,7 +4,7 @@
4
4
  * ✔ checked
5
5
  * ✔ color
6
6
  */
7
- import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react'
7
+ import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction, createElement } from 'react'
8
8
  import { View, StyleSheet, ViewStyle, NativeSyntheticEvent } from 'react-native'
9
9
  import { warn } from '@mpxjs/utils'
10
10
  import { LabelContext, RadioGroupContext } from './context'
@@ -193,32 +193,26 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
193
193
  }
194
194
  }, [checked])
195
195
 
196
- return (
197
- <View {...innerProps}>
198
- <View style={defaultStyle}>
199
- <Icon
200
- type='success'
201
- size={24}
202
- color={disabled ? '#E1E1E1' : color}
203
- style={{
204
- ...styles.icon,
205
- ...(isChecked && styles.iconChecked),
206
- ...(disabled && styles.iconDisabled)
207
- }}
208
- />
209
- </View>
196
+ return createElement(View, innerProps,
197
+ createElement(
198
+ View,
199
+ { style: defaultStyle },
200
+ createElement(Icon, {
201
+ type: 'success',
202
+ size: 24,
203
+ color: disabled ? '#E1E1E1' : color,
204
+ style: extendObject({}, styles.icon, isChecked && styles.iconChecked, disabled && styles.iconDisabled)
205
+ })
206
+ ),
207
+ wrapChildren(
208
+ props,
210
209
  {
211
- wrapChildren(
212
- props,
213
- {
214
- hasVarDec,
215
- varContext: varContextRef.current,
216
- textStyle,
217
- textProps
218
- }
219
- )
210
+ hasVarDec,
211
+ varContext: varContextRef.current,
212
+ textStyle,
213
+ textProps
220
214
  }
221
- </View>
215
+ )
222
216
  )
223
217
  }
224
218
  )
package/lib/runtime/components/react/mpx-rich-text/html.ts ADDED
@@ -0,0 +1,40 @@
1
+
2
+ export const generateHTML = (html: string) => {
3
+ return `<html><head>
4
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" name="viewport">
5
+ <style>
6
+ html {
7
+ -ms-content-zooming: none;
8
+ -ms-touch-action: pan-x pan-y;
9
+ }
10
+ body {
11
+ position: fixed;
12
+ top: 0;
13
+ right: 0;
14
+ bottom: 0;
15
+ left: 0;
16
+ overflow: hidden;
17
+ }
18
+ html,body {
19
+ margin: 0;
20
+ padding: 0;
21
+ }
22
+ * {
23
+ user-select: none;
24
+ -ms-user-select: none;
25
+ -moz-user-select: none;
26
+ -webkit-user-select: none;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body><div id="rich-text">${html}</div>
31
+ <script>
32
+ function sendHeight() {
33
+ const dom = document.getElementById('rich-text')
34
+ window.ReactNativeWebView.postMessage(dom.scrollHeight);
35
+ }
36
+ window.onload = sendHeight;
37
+ </script>
38
+ </body
39
+ ></html>`
40
+ }
package/lib/runtime/components/react/mpx-rich-text/index.tsx ADDED
@@ -0,0 +1,121 @@
1
+
2
+ /**
3
+ * ✔ nodes
4
+ */
5
+ import { View, ViewProps, ViewStyle } from 'react-native'
6
+ import { useRef, forwardRef, JSX, useState } from 'react'
7
+ import useInnerProps from '../getInnerListeners'
8
+ import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
9
+ import { useTransformStyle, useLayout } from '../utils'
10
+ import { WebView, WebViewMessageEvent } from 'react-native-webview'
11
+ import { generateHTML } from './html'
12
+
13
+ type Node = {
14
+ type: 'node' | 'text'
15
+ name?: string
16
+ attrs?: any
17
+ children?: Array<Node>
18
+ text: string
19
+ }
20
+
21
+ interface _RichTextProps extends ViewProps {
22
+ style?: ViewStyle
23
+ nodes: string | Array<Node>
24
+ 'enable-var'?: boolean
25
+ 'external-var-context'?: Record<string, any>
26
+ 'parent-font-size'?: number
27
+ 'parent-width'?: number
28
+ 'parent-height'?: number
29
+ }
30
+
31
+ function jsonToHtmlStr (elements: Array<Node>) {
32
+ let htmlStr = ''
33
+
34
+ for (const element of elements) {
35
+ if (element.type === 'text') {
36
+ htmlStr += element.text
37
+ return htmlStr
38
+ }
39
+
40
+ const { name, attrs = {}, children = [] } = element
41
+
42
+ let attrStr = ''
43
+ for (const [key, value] of Object.entries(attrs)) attrStr += ` ${key}="${value}"`
44
+
45
+ let childrenStr = ''
46
+ for (const child of children) childrenStr += jsonToHtmlStr([child])
47
+
48
+ htmlStr += `<${name}${attrStr}>${childrenStr}</${name}>`
49
+ }
50
+
51
+ return htmlStr
52
+ }
53
+
54
+ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((props, ref): JSX.Element => {
55
+ const {
56
+ style = {},
57
+ nodes,
58
+ 'enable-var': enableVar,
59
+ 'external-var-context': externalVarContext,
60
+ 'parent-font-size': parentFontSize,
61
+ 'parent-width': parentWidth,
62
+ 'parent-height': parentHeight
63
+ } = props
64
+
65
+ const nodeRef = useRef(null)
66
+ const [webViewHeight, setWebViewHeight] = useState(0)
67
+
68
+ const {
69
+ normalStyle,
70
+ hasSelfPercent,
71
+ setWidth,
72
+ setHeight
73
+ } = useTransformStyle(Object.assign({
74
+ width: '100%',
75
+ height: webViewHeight
76
+ }, style), {
77
+ enableVar,
78
+ externalVarContext,
79
+ parentFontSize,
80
+ parentWidth,
81
+ parentHeight
82
+ })
83
+
84
+ const {
85
+ layoutRef,
86
+ layoutStyle,
87
+ layoutProps
88
+ } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
89
+
90
+ useNodesRef<View, _RichTextProps>(props, ref, nodeRef, {
91
+ layoutRef
92
+ })
93
+
94
+ const innerProps = useInnerProps(props, {
95
+ ref: nodeRef,
96
+ style: { ...normalStyle, ...layoutStyle },
97
+ ...layoutProps
98
+ }, [], {
99
+ layoutRef
100
+ })
101
+
102
+ const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
103
+
104
+ return (
105
+ <View
106
+ {...innerProps}
107
+ >
108
+ <WebView
109
+ source={{ html: generateHTML(html) }}
110
+ onMessage={(event: WebViewMessageEvent) => {
111
+ setWebViewHeight(+event.nativeEvent.data)
112
+ }}
113
+ >
114
+ </WebView>
115
+ </View>
116
+ )
117
+ })
118
+
119
+ _RichText.displayName = 'mpx-rich-text'
120
+
121
+ export default _RichText
package/lib/runtime/components/react/mpx-root-portal.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * ✔ enable
3
3
  */
4
- import { ReactNode } from 'react'
4
+ import { ReactNode, createElement, Fragment } from 'react'
5
5
  import { Portal } from '@ant-design/react-native'
6
6
  import { warn } from '@mpxjs/utils'
7
7
  interface RootPortalProps {
@@ -16,10 +16,8 @@ const _RootPortal = (props: RootPortalProps) => {
16
16
  warn('The root-portal component does not support the style prop.')
17
17
  }
18
18
  return enable
19
- ? <Portal>
20
- {children}
21
- </Portal>
22
- : <>{children}</>
19
+ ? createElement(Portal, null, children)
20
+ : createElement(Fragment, null, children)
23
21
  }
24
22
 
25
23
  _RootPortal.displayName = 'MpxRootPortal'
package/lib/runtime/components/react/mpx-scroll-view.tsx CHANGED
@@ -33,7 +33,7 @@
33
33
  */
34
34
  import { ScrollView } from 'react-native-gesture-handler'
35
35
  import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
36
- import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext } from 'react'
36
+ import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement } from 'react'
37
37
  import { useAnimatedRef } from 'react-native-reanimated'
38
38
  import { warn } from '@mpxjs/utils'
39
39
  import useInnerProps, { getCustomEvent } from './getInnerListeners'
@@ -165,7 +165,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
165
165
  const initialTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
166
166
  const intersectionObservers = useContext(IntersectionObserverContext)
167
167
 
168
- const snapScrollIntoView = useRef<string>('')
168
+ const firstScrollIntoViewChange = useRef<boolean>(false)
169
169
 
170
170
  const {
171
171
  normalStyle,
@@ -220,23 +220,28 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
220
220
  }, [refresherTriggered])
221
221
 
222
222
  useEffect(() => {
223
- if (scrollIntoView && __selectRef && snapScrollIntoView.current !== scrollIntoView) {
224
- snapScrollIntoView.current = scrollIntoView || ''
225
- setTimeout(() => {
226
- const refs = __selectRef(`#${scrollIntoView}`, 'node')
227
- if (refs) {
228
- const { nodeRef } = refs.getNodeInstance()
229
- nodeRef.current?.measureLayout(
230
- scrollViewRef.current,
231
- (left: number, top:number) => {
232
- scrollToOffset(left, top)
233
- }
234
- )
235
- }
236
- })
223
+ if (scrollIntoView && __selectRef) {
224
+ if (!firstScrollIntoViewChange.current) {
225
+ setTimeout(handleScrollIntoView)
226
+ } else {
227
+ handleScrollIntoView()
228
+ }
237
229
  }
230
+ firstScrollIntoViewChange.current = true
238
231
  }, [scrollIntoView])
239
232
 
233
+ function handleScrollIntoView () {
234
+ const refs = __selectRef!(`#${scrollIntoView}`, 'node')
235
+ if (!refs) return
236
+ const { nodeRef } = refs.getNodeInstance()
237
+ nodeRef.current?.measureLayout(
238
+ scrollViewRef.current,
239
+ (left: number, top:number) => {
240
+ scrollToOffset(left, top)
241
+ }
242
+ )
243
+ }
244
+
240
245
  function selectLength (size: { height: number; width: number }) {
241
246
  return !scrollX ? size.height : size.width
242
247
  }
@@ -491,32 +496,26 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
491
496
  white: ['#fff']
492
497
  }
493
498
 
494
- return (
495
- <ScrollView
496
- {...innerProps}
497
- refreshControl={refresherEnabled
498
- ? (
499
- <RefreshControl
500
- progressBackgroundColor={refresherBackground}
501
- refreshing={refreshing}
502
- onRefresh={onRefresh}
503
- {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}
504
- />
505
- )
506
- : undefined}
507
- >
508
- {
509
- wrapChildren(
510
- props,
511
- {
512
- hasVarDec,
513
- varContext: varContextRef.current,
514
- textStyle,
515
- textProps
516
- }
517
- )
499
+ return createElement(
500
+ ScrollView,
501
+ extendObject({}, innerProps, {
502
+ refreshControl: refresherEnabled
503
+ ? createElement(RefreshControl, extendObject({
504
+ progressBackgroundColor: refresherBackground,
505
+ refreshing: refreshing,
506
+ onRefresh: onRefresh
507
+ }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
508
+ : undefined
509
+ }),
510
+ wrapChildren(
511
+ props,
512
+ {
513
+ hasVarDec,
514
+ varContext: varContextRef.current,
515
+ textStyle,
516
+ textProps
518
517
  }
519
- </ScrollView>
518
+ )
520
519
  )
521
520
  })
522
521
 
package/lib/runtime/components/react/mpx-switch.tsx CHANGED
@@ -5,7 +5,7 @@
5
5
  * ✔ color
6
6
  */
7
7
  import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent } from 'react-native'
8
- import { useRef, useEffect, forwardRef, JSX, useState, useContext } from 'react'
8
+ import { useRef, useEffect, forwardRef, JSX, useState, useContext, createElement } from 'react'
9
9
  import { warn } from '@mpxjs/utils'
10
10
  import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
11
11
  import useInnerProps, { getCustomEvent } from './getInnerListeners'
@@ -136,22 +136,26 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
136
136
  })
137
137
 
138
138
  if (type === 'checkbox') {
139
- return <CheckBox
140
- {...innerProps}
141
- color={color}
142
- style={normalStyle}
143
- checked={isChecked}
144
- />
139
+ return createElement(
140
+ CheckBox,
141
+ extendObject({}, innerProps, {
142
+ color: color,
143
+ style: normalStyle,
144
+ checked: isChecked
145
+ })
146
+ )
145
147
  }
146
148
 
147
- return <Switch
148
- {...innerProps}
149
- style={normalStyle}
150
- value={isChecked}
151
- trackColor={{ false: '#FFF', true: color }}
152
- thumbColor={isChecked ? '#FFF' : '#f4f3f4'}
153
- ios_backgroundColor="#FFF"
154
- />
149
+ return createElement(
150
+ Switch,
151
+ extendObject({}, innerProps, {
152
+ style: normalStyle,
153
+ value: isChecked,
154
+ trackColor: { false: '#FFF', true: color },
155
+ thumbColor: isChecked ? '#FFF' : '#f4f3f4',
156
+ ios_backgroundColor: '#FFF'
157
+ })
158
+ )
155
159
  })
156
160
 
157
161
  _Switch.displayName = 'MpxSwitch'
package/lib/runtime/components/react/mpx-text.tsx CHANGED
@@ -5,7 +5,7 @@
5
5
  * ✘ decode
6
6
  */
7
7
  import { Text, TextStyle, TextProps } from 'react-native'
8
- import { useRef, forwardRef, ReactNode, JSX } from 'react'
8
+ import { useRef, forwardRef, ReactNode, JSX, createElement } from 'react'
9
9
  import useInnerProps from './getInnerListeners'
10
10
  import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
11
11
  import { useTransformStyle, wrapChildren } from './utils'
@@ -65,21 +65,13 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
65
65
  layoutRef
66
66
  })
67
67
 
68
- return (
69
- <Text
70
- {...innerProps}
71
- >
72
- {
73
- wrapChildren(
74
- props,
75
- {
76
- hasVarDec,
77
- varContext: varContextRef.current
78
- }
79
- )
80
- }
81
- </Text>
82
- )
68
+ return createElement(Text, innerProps, wrapChildren(
69
+ props,
70
+ {
71
+ hasVarDec,
72
+ varContext: varContextRef.current
73
+ }
74
+ ))
83
75
  })
84
76
 
85
77
  _Text.displayName = 'MpxText'
package/lib/runtime/components/react/mpx-textarea.tsx CHANGED
@@ -9,10 +9,10 @@
9
9
  * ✘ show-confirm-bar
10
10
  * ✔ bindlinechange: No `heightRpx` info.
11
11
  */
12
- import { JSX, forwardRef } from 'react'
12
+ import { JSX, forwardRef, createElement } from 'react'
13
13
  import { Keyboard, TextInput } from 'react-native'
14
14
  import Input, { InputProps, PrivateInputProps } from './mpx-input'
15
- import { omit } from './utils'
15
+ import { omit, extendObject } from './utils'
16
16
  import { HandlerRef } from './useNodesRef'
17
17
 
18
18
  export type TextareProps = Omit<
@@ -29,14 +29,15 @@ const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
29
29
  'multiline',
30
30
  'confirm-hold'
31
31
  ])
32
- return (
33
- <Input
34
- ref={ref}
35
- multiline
36
- confirm-type='next'
37
- bindblur={() => Keyboard.dismiss()}
38
- {...restProps}
39
- />
32
+
33
+ return createElement(
34
+ Input,
35
+ extendObject({
36
+ ref: ref,
37
+ multiline: true,
38
+ confirmType: 'next',
39
+ bindblur: () => Keyboard.dismiss()
40
+ }, restProps)
40
41
  )
41
42
  }
42
43
  )
package/lib/runtime/components/react/mpx-view.tsx CHANGED
@@ -5,7 +5,7 @@
5
5
  * ✔ hover-stay-time
6
6
  */
7
7
  import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, StyleSheet, Image, LayoutChangeEvent } from 'react-native'
8
- import { useRef, useState, useEffect, forwardRef, ReactNode, JSX } from 'react'
8
+ import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, createElement } from 'react'
9
9
  import useInnerProps from './getInnerListeners'
10
10
  import Animated from 'react-native-reanimated'
11
11
  import useAnimationHooks from './useAnimationHooks'
@@ -13,6 +13,7 @@ import type { AnimationProp } from './useAnimationHooks'
13
13
  import { ExtendedViewStyle } from './types/common'
14
14
  import useNodesRef, { HandlerRef } from './useNodesRef'
15
15
  import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject } from './utils'
16
+ import { error } from '@mpxjs/utils'
16
17
  import LinearGradient from 'react-native-linear-gradient'
17
18
 
18
19
  export interface _ViewProps extends ViewProps {
@@ -550,7 +551,7 @@ function inheritStyle (innerStyle: ExtendedViewStyle = {}) {
550
551
  : undefined)
551
552
  }
552
553
 
553
- function wrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
554
+ function useWrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
554
555
  // 预处理数据
555
556
  const preImageInfo: PreImageInfo = preParseImage(imageStyle)
556
557
  // 预解析
@@ -659,7 +660,8 @@ function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, tex
659
660
  })
660
661
 
661
662
  return [
662
- enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
663
+ // eslint-disable-next-line react-hooks/rules-of-hooks
664
+ enableBackground ? useWrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
663
665
  children
664
666
  ]
665
667
  }
@@ -716,7 +718,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
716
718
  enableBackground = enableBackground || !!backgroundStyle
717
719
  const enableBackgroundRef = useRef(enableBackground)
718
720
  if (enableBackgroundRef.current !== enableBackground) {
719
- throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
721
+ error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
720
722
  }
721
723
 
722
724
  const nodeRef = useRef(null)
@@ -774,13 +776,16 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
774
776
  enableAnimation = enableAnimation || !!animation
775
777
  const enableAnimationRef = useRef(enableAnimation)
776
778
  if (enableAnimationRef.current !== enableAnimation) {
777
- throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
779
+ error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
778
780
  }
779
- const finalStyle = enableAnimation
780
- ? useAnimationHooks({
781
- animation,
782
- style: viewStyle
783
- })
781
+
782
+ const finalStyle = enableAnimationRef.current
783
+ ? [viewStyle,
784
+ // eslint-disable-next-line react-hooks/rules-of-hooks
785
+ useAnimationHooks({
786
+ animation,
787
+ style: viewStyle
788
+ })]
784
789
  : viewStyle
785
790
  const innerProps = useInnerProps(
786
791
  props,
@@ -814,17 +819,10 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
814
819
  innerStyle,
815
820
  enableFastImage
816
821
  })
822
+
817
823
  return enableAnimation
818
- ? (<Animated.View
819
- {...innerProps}
820
- >
821
- {childNode}
822
- </Animated.View>)
823
- : (<View
824
- {...innerProps}
825
- >
826
- {childNode}
827
- </View>)
824
+ ? createElement(Animated.View, innerProps, childNode)
825
+ : createElement(View, innerProps, childNode)
828
826
  })
829
827
 
830
828
  _View.displayName = 'MpxView'