@mpxjs/webpack-plugin 2.10.3-beta.4 → 2.10.4
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/LICENSE +433 -0
- package/lib/index.js +1 -1
- package/lib/platform/template/wx/component-config/input.js +1 -1
- package/lib/platform/template/wx/component-config/text.js +18 -3
- package/lib/platform/template/wx/component-config/view.js +0 -2
- package/lib/platform/template/wx/index.js +41 -93
- package/lib/react/processScript.js +1 -18
- package/lib/runtime/components/react/dist/event.config.js +1 -0
- package/lib/runtime/components/react/dist/getInnerListeners.js +18 -7
- package/lib/runtime/components/react/dist/mpx-canvas/index.jsx +1 -1
- package/lib/runtime/components/react/dist/mpx-inline-text.jsx +11 -0
- package/lib/runtime/components/react/dist/mpx-input.jsx +3 -6
- package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-picker/date.jsx +194 -68
- package/lib/runtime/components/react/dist/mpx-picker/dateData.js +17 -0
- package/lib/runtime/components/react/dist/mpx-picker/index.jsx +178 -96
- package/lib/runtime/components/react/dist/mpx-picker/multiSelector.jsx +79 -139
- package/lib/runtime/components/react/dist/mpx-picker/region.jsx +190 -90
- package/lib/runtime/components/react/dist/mpx-picker/selector.jsx +60 -75
- package/lib/runtime/components/react/dist/mpx-picker/time.jsx +100 -228
- package/lib/runtime/components/react/dist/{mpx-picker-view.jsx → mpx-picker-view/index.jsx} +3 -3
- package/lib/runtime/components/react/dist/{mpx-picker-view-column.jsx → mpx-picker-view-column/index.jsx} +64 -16
- package/lib/runtime/components/react/dist/{mpx-picker-view-column-item.jsx → mpx-picker-view-column/pickerViewColumnItem.jsx} +8 -5
- package/lib/runtime/components/react/dist/{pickerFaces.js → mpx-picker-view-column/pickerViewFaces.js} +6 -0
- package/lib/runtime/components/react/dist/mpx-popup/index.jsx +61 -0
- package/lib/runtime/components/react/dist/mpx-popup/popupBase.jsx +92 -0
- package/lib/runtime/components/react/dist/mpx-scroll-view.jsx +192 -25
- package/lib/runtime/components/react/dist/mpx-simple-text.jsx +8 -7
- package/lib/runtime/components/react/dist/mpx-simple-view.jsx +11 -15
- package/lib/runtime/components/react/dist/mpx-swiper.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-video.jsx +3 -3
- package/lib/runtime/components/react/dist/mpx-web-view.jsx +4 -4
- package/lib/runtime/components/react/dist/utils.jsx +1 -1
- package/lib/runtime/components/react/event.config.ts +2 -0
- package/lib/runtime/components/react/getInnerListeners.ts +28 -25
- package/lib/runtime/components/react/mpx-canvas/index.tsx +2 -2
- package/lib/runtime/components/react/mpx-inline-text.tsx +18 -0
- package/lib/runtime/components/react/mpx-input.tsx +2 -6
- package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx +1 -1
- package/lib/runtime/components/react/mpx-picker/date.tsx +226 -69
- package/lib/runtime/components/react/mpx-picker/dateData.ts +22 -0
- package/lib/runtime/components/react/mpx-picker/index.tsx +239 -118
- package/lib/runtime/components/react/mpx-picker/multiSelector.tsx +96 -139
- package/lib/runtime/components/react/mpx-picker/region.tsx +217 -89
- package/lib/runtime/components/react/mpx-picker/selector.tsx +75 -80
- package/lib/runtime/components/react/mpx-picker/time.tsx +119 -236
- package/lib/runtime/components/react/mpx-picker/type.ts +85 -71
- package/lib/runtime/components/react/{mpx-picker-view.tsx → mpx-picker-view/index.tsx} +7 -7
- package/lib/runtime/components/react/{mpx-picker-view-column.tsx → mpx-picker-view-column/index.tsx} +70 -19
- package/lib/runtime/components/react/{mpx-picker-view-column-item.tsx → mpx-picker-view-column/pickerViewColumnItem.tsx} +8 -5
- package/lib/runtime/components/react/{pickerFaces.ts → mpx-picker-view-column/pickerViewFaces.ts} +7 -0
- package/lib/runtime/components/react/mpx-popup/index.tsx +86 -0
- package/lib/runtime/components/react/mpx-popup/popupBase.tsx +130 -0
- package/lib/runtime/components/react/mpx-scroll-view.tsx +249 -43
- package/lib/runtime/components/react/mpx-simple-text.tsx +10 -8
- package/lib/runtime/components/react/mpx-simple-view.tsx +11 -16
- package/lib/runtime/components/react/mpx-swiper.tsx +2 -4
- package/lib/runtime/components/react/mpx-video.tsx +2 -2
- package/lib/runtime/components/react/mpx-web-view.tsx +4 -4
- package/lib/runtime/components/react/types/getInnerListeners.d.ts +5 -1
- package/lib/runtime/components/react/utils.tsx +1 -1
- package/lib/runtime/components/web/mpx-input.vue +1 -1
- package/lib/runtime/stringify.wxs +2 -2
- package/lib/template-compiler/compiler.js +7 -7
- package/package.json +4 -5
- /package/lib/runtime/components/react/dist/{pickerVIewContext.js → mpx-picker-view/pickerVIewContext.js} +0 -0
- /package/lib/runtime/components/react/dist/{pickerViewIndicator.jsx → mpx-picker-view-column/pickerViewIndicator.jsx} +0 -0
- /package/lib/runtime/components/react/dist/{pickerViewMask.jsx → mpx-picker-view-column/pickerViewMask.jsx} +0 -0
- /package/lib/runtime/components/react/{pickerVIewContext.ts → mpx-picker-view/pickerVIewContext.ts} +0 -0
- /package/lib/runtime/components/react/{pickerViewIndicator.tsx → mpx-picker-view-column/pickerViewIndicator.tsx} +0 -0
- /package/lib/runtime/components/react/{pickerViewMask.tsx → mpx-picker-view-column/pickerViewMask.tsx} +0 -0
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* ✔ enable-back-to-top
|
|
11
11
|
* ✘ enable-passive
|
|
12
12
|
* ✔ refresher-enabled
|
|
13
|
-
*
|
|
13
|
+
* ✔ refresher-threshold(仅自定义下拉节点样式支持)
|
|
14
14
|
* ✔ refresher-default-style(仅 android 支持)
|
|
15
15
|
* ✔ refresher-background(仅 android 支持)
|
|
16
16
|
* ✔ refresher-triggered
|
|
@@ -31,14 +31,14 @@
|
|
|
31
31
|
* ✔ bindscrolltolower
|
|
32
32
|
* ✔ bindscroll
|
|
33
33
|
*/
|
|
34
|
-
import { ScrollView, RefreshControl } from 'react-native-gesture-handler'
|
|
34
|
+
import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler'
|
|
35
35
|
import { View, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
|
|
36
|
-
import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext,
|
|
37
|
-
import { useAnimatedRef } from 'react-native-reanimated'
|
|
36
|
+
import { isValidElement, Children, JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react'
|
|
37
|
+
import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated'
|
|
38
38
|
import { warn } from '@mpxjs/utils'
|
|
39
39
|
import useInnerProps, { getCustomEvent } from './getInnerListeners'
|
|
40
40
|
import useNodesRef, { HandlerRef } from './useNodesRef'
|
|
41
|
-
import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
|
|
41
|
+
import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler, HIDDEN_STYLE } from './utils'
|
|
42
42
|
import { IntersectionObserverContext, ScrollViewContext } from './context'
|
|
43
43
|
|
|
44
44
|
interface ScrollViewProps {
|
|
@@ -46,6 +46,7 @@ interface ScrollViewProps {
|
|
|
46
46
|
enhanced?: boolean;
|
|
47
47
|
bounces?: boolean;
|
|
48
48
|
style?: ViewStyle;
|
|
49
|
+
scrollEventThrottle?: number;
|
|
49
50
|
'scroll-x'?: boolean;
|
|
50
51
|
'scroll-y'?: boolean;
|
|
51
52
|
'enable-back-to-top'?: boolean;
|
|
@@ -58,6 +59,7 @@ interface ScrollViewProps {
|
|
|
58
59
|
'refresher-enabled'?: boolean;
|
|
59
60
|
'refresher-default-style'?: 'black' | 'white' | 'none';
|
|
60
61
|
'refresher-background'?: string;
|
|
62
|
+
'refresher-threshold'?: number;
|
|
61
63
|
'scroll-top'?: number;
|
|
62
64
|
'scroll-left'?: number;
|
|
63
65
|
'enable-offset'?: boolean;
|
|
@@ -90,7 +92,6 @@ type ScrollAdditionalProps = {
|
|
|
90
92
|
onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
|
|
91
93
|
onContentSizeChange: (width: number, height: number) => void;
|
|
92
94
|
onLayout?: (event: LayoutChangeEvent) => void;
|
|
93
|
-
scrollEventThrottle: number;
|
|
94
95
|
scrollsToTop: boolean;
|
|
95
96
|
showsHorizontalScrollIndicator: boolean;
|
|
96
97
|
showsVerticalScrollIndicator: boolean;
|
|
@@ -106,6 +107,7 @@ type ScrollAdditionalProps = {
|
|
|
106
107
|
onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
|
|
107
108
|
onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
|
|
108
109
|
};
|
|
110
|
+
|
|
109
111
|
const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, ScrollViewProps>((scrollViewProps: ScrollViewProps = {}, ref): JSX.Element => {
|
|
110
112
|
const { textProps, innerProps: props = {} } = splitProps(scrollViewProps)
|
|
111
113
|
const {
|
|
@@ -129,6 +131,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
129
131
|
'refresher-enabled': refresherEnabled,
|
|
130
132
|
'refresher-default-style': refresherDefaultStyle,
|
|
131
133
|
'refresher-background': refresherBackground,
|
|
134
|
+
'refresher-threshold': refresherThreshold = 45,
|
|
132
135
|
'show-scrollbar': showScrollbar = true,
|
|
133
136
|
'scroll-into-view': scrollIntoView = '',
|
|
134
137
|
'scroll-top': scrollTop = 0,
|
|
@@ -148,11 +151,21 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
148
151
|
const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
|
|
149
152
|
const waitForHandlers = flatGesture(waitFor)
|
|
150
153
|
|
|
151
|
-
const [refreshing, setRefreshing] = useState(true)
|
|
152
|
-
|
|
153
154
|
const snapScrollTop = useRef(0)
|
|
154
155
|
const snapScrollLeft = useRef(0)
|
|
155
156
|
|
|
157
|
+
const [refreshing, setRefreshing] = useState(false)
|
|
158
|
+
|
|
159
|
+
const [enableScroll, setEnableScroll] = useState(true)
|
|
160
|
+
const enableScrollValue = useSharedValue(true)
|
|
161
|
+
|
|
162
|
+
const [scrollBounces, setScrollBounces] = useState(false)
|
|
163
|
+
const bouncesValue = useSharedValue(!!false)
|
|
164
|
+
|
|
165
|
+
const translateY = useSharedValue(0)
|
|
166
|
+
const isAtTop = useSharedValue(true)
|
|
167
|
+
const refresherHeight = useSharedValue(0)
|
|
168
|
+
|
|
156
169
|
const scrollOptions = useRef({
|
|
157
170
|
contentLength: 0,
|
|
158
171
|
offset: 0,
|
|
@@ -168,6 +181,14 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
168
181
|
|
|
169
182
|
const firstScrollIntoViewChange = useRef<boolean>(false)
|
|
170
183
|
|
|
184
|
+
const refreshColor = {
|
|
185
|
+
black: ['#000'],
|
|
186
|
+
white: ['#fff']
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
const { refresherContent, otherContent } = getRefresherContent(props.children)
|
|
190
|
+
const hasRefresher = refresherContent && refresherEnabled
|
|
191
|
+
|
|
171
192
|
const {
|
|
172
193
|
normalStyle,
|
|
173
194
|
hasVarDec,
|
|
@@ -203,6 +224,10 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
203
224
|
|
|
204
225
|
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
|
|
205
226
|
|
|
227
|
+
const hasRefresherLayoutRef = useRef(false)
|
|
228
|
+
|
|
229
|
+
// layout 完成前先隐藏,避免安卓闪烁问题
|
|
230
|
+
const refresherLayoutStyle = useMemo(() => { return !hasRefresherLayoutRef.current ? HIDDEN_STYLE : {} }, [hasRefresherLayoutRef.current])
|
|
206
231
|
const lastOffset = useRef(0)
|
|
207
232
|
|
|
208
233
|
if (scrollX && scrollY) {
|
|
@@ -222,12 +247,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
222
247
|
}
|
|
223
248
|
}, [scrollTop, scrollLeft])
|
|
224
249
|
|
|
225
|
-
useEffect(() => {
|
|
226
|
-
if (refreshing !== refresherTriggered) {
|
|
227
|
-
setRefreshing(!!refresherTriggered)
|
|
228
|
-
}
|
|
229
|
-
}, [refresherTriggered])
|
|
230
|
-
|
|
231
250
|
useEffect(() => {
|
|
232
251
|
if (scrollIntoView && __selectRef) {
|
|
233
252
|
if (!firstScrollIntoViewChange.current) {
|
|
@@ -239,6 +258,22 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
239
258
|
firstScrollIntoViewChange.current = true
|
|
240
259
|
}, [scrollIntoView])
|
|
241
260
|
|
|
261
|
+
useEffect(() => {
|
|
262
|
+
if (refresherEnabled) {
|
|
263
|
+
setRefreshing(!!refresherTriggered)
|
|
264
|
+
|
|
265
|
+
if (!refresherContent) return
|
|
266
|
+
|
|
267
|
+
if (refresherTriggered) {
|
|
268
|
+
translateY.value = withTiming(refresherHeight.value)
|
|
269
|
+
resetScrollState(false)
|
|
270
|
+
} else {
|
|
271
|
+
translateY.value = withTiming(0)
|
|
272
|
+
resetScrollState(true)
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
}, [refresherTriggered])
|
|
276
|
+
|
|
242
277
|
function scrollTo ({ top = 0, left = 0, animated = false } : { top?: number; left?: number; animated?: boolean }) {
|
|
243
278
|
scrollToOffset(left, top, animated)
|
|
244
279
|
}
|
|
@@ -249,7 +284,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
249
284
|
const { nodeRef } = refs.getNodeInstance()
|
|
250
285
|
nodeRef.current?.measureLayout(
|
|
251
286
|
scrollViewRef.current,
|
|
252
|
-
(left: number, top:number) => {
|
|
287
|
+
(left: number, top: number) => {
|
|
253
288
|
scrollToOffset(left, top)
|
|
254
289
|
}
|
|
255
290
|
)
|
|
@@ -333,6 +368,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
333
368
|
const { bindscroll } = props
|
|
334
369
|
const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
|
|
335
370
|
const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
|
|
371
|
+
isAtTop.value = scrollTop <= 0
|
|
336
372
|
bindscroll &&
|
|
337
373
|
bindscroll(
|
|
338
374
|
getCustomEvent('scroll', e, {
|
|
@@ -359,6 +395,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
359
395
|
const { bindscrollend } = props
|
|
360
396
|
const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
|
|
361
397
|
const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
|
|
398
|
+
isAtTop.value = scrollTop <= 0
|
|
362
399
|
bindscrollend &&
|
|
363
400
|
bindscrollend(
|
|
364
401
|
getCustomEvent('scrollend', e, {
|
|
@@ -394,14 +431,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
394
431
|
}
|
|
395
432
|
}
|
|
396
433
|
|
|
397
|
-
function onRefresh () {
|
|
398
|
-
const { bindrefresherrefresh } = props
|
|
399
|
-
bindrefresherrefresh &&
|
|
400
|
-
bindrefresherrefresh(
|
|
401
|
-
getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
|
|
402
|
-
)
|
|
403
|
-
}
|
|
404
|
-
|
|
405
434
|
function onScrollTouchStart (e: NativeSyntheticEvent<TouchEvent>) {
|
|
406
435
|
const { bindtouchstart } = props
|
|
407
436
|
bindtouchstart && bindtouchstart(e)
|
|
@@ -462,6 +491,156 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
462
491
|
onScrollDrag(e)
|
|
463
492
|
}
|
|
464
493
|
|
|
494
|
+
// 处理刷新
|
|
495
|
+
function onRefresh () {
|
|
496
|
+
if (hasRefresher && refresherTriggered === undefined) {
|
|
497
|
+
// 处理使用了自定义刷新组件,又没设置 refresherTriggered 的情况
|
|
498
|
+
setRefreshing(true)
|
|
499
|
+
setTimeout(() => {
|
|
500
|
+
setRefreshing(false)
|
|
501
|
+
translateY.value = withTiming(0)
|
|
502
|
+
if (!enableScrollValue.value) {
|
|
503
|
+
resetScrollState(true)
|
|
504
|
+
}
|
|
505
|
+
}, 500)
|
|
506
|
+
}
|
|
507
|
+
const { bindrefresherrefresh } = props
|
|
508
|
+
bindrefresherrefresh &&
|
|
509
|
+
bindrefresherrefresh(
|
|
510
|
+
getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
|
|
511
|
+
)
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
function getRefresherContent (children: ReactNode) {
|
|
515
|
+
let refresherContent = null
|
|
516
|
+
const otherContent: ReactNode[] = []
|
|
517
|
+
|
|
518
|
+
Children.forEach(children, (child) => {
|
|
519
|
+
if (isValidElement(child) && child.props.slot === 'refresher') {
|
|
520
|
+
refresherContent = child
|
|
521
|
+
} else {
|
|
522
|
+
otherContent.push(child)
|
|
523
|
+
}
|
|
524
|
+
})
|
|
525
|
+
|
|
526
|
+
return {
|
|
527
|
+
refresherContent,
|
|
528
|
+
otherContent
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
// 刷新控件的动画样式
|
|
533
|
+
const refresherAnimatedStyle = useAnimatedStyle(() => {
|
|
534
|
+
return {
|
|
535
|
+
position: 'absolute',
|
|
536
|
+
left: 0,
|
|
537
|
+
right: 0,
|
|
538
|
+
top: -refresherHeight.value, // 初始隐藏在顶部
|
|
539
|
+
transform: [{ translateY: Math.min(translateY.value, refresherHeight.value) }],
|
|
540
|
+
backgroundColor: refresherBackground || 'transparent'
|
|
541
|
+
}
|
|
542
|
+
})
|
|
543
|
+
|
|
544
|
+
// 内容区域的动画样式 - 只有内容区域需要下移
|
|
545
|
+
const contentAnimatedStyle = useAnimatedStyle(() => {
|
|
546
|
+
return {
|
|
547
|
+
transform: [{
|
|
548
|
+
translateY: translateY.value > refresherHeight.value
|
|
549
|
+
? refresherHeight.value
|
|
550
|
+
: translateY.value
|
|
551
|
+
}]
|
|
552
|
+
}
|
|
553
|
+
})
|
|
554
|
+
|
|
555
|
+
function onRefresherLayout (e: LayoutChangeEvent) {
|
|
556
|
+
const { height } = e.nativeEvent.layout
|
|
557
|
+
refresherHeight.value = height
|
|
558
|
+
hasRefresherLayoutRef.current = true
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
function updateScrollState (newValue: boolean) {
|
|
562
|
+
'worklet'
|
|
563
|
+
if (enableScrollValue.value !== newValue) {
|
|
564
|
+
enableScrollValue.value = newValue
|
|
565
|
+
runOnJS(setEnableScroll)(newValue)
|
|
566
|
+
}
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
const resetScrollState = (value: boolean) => {
|
|
570
|
+
enableScrollValue.value = value
|
|
571
|
+
setEnableScroll(value)
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
function updateBouncesState (newValue: boolean) {
|
|
575
|
+
'worklet'
|
|
576
|
+
if (bouncesValue.value !== newValue) {
|
|
577
|
+
bouncesValue.value = newValue
|
|
578
|
+
runOnJS(setScrollBounces)(newValue)
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
// 处理下拉刷新的手势
|
|
583
|
+
const panGesture = Gesture.Pan()
|
|
584
|
+
.onUpdate((event) => {
|
|
585
|
+
'worklet'
|
|
586
|
+
if (enhanced && !!bounces) {
|
|
587
|
+
if (event.translationY > 0 && bouncesValue.value) {
|
|
588
|
+
updateBouncesState(false)
|
|
589
|
+
} else if ((event.translationY < 0) && !bouncesValue.value) {
|
|
590
|
+
updateBouncesState(true)
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
if (translateY.value <= 0 && event.translationY < 0) {
|
|
595
|
+
// 滑动到顶再向上开启滚动
|
|
596
|
+
updateScrollState(true)
|
|
597
|
+
} else if (event.translationY > 0 && isAtTop.value) {
|
|
598
|
+
// 滚动到顶再向下禁止滚动
|
|
599
|
+
updateScrollState(false)
|
|
600
|
+
}
|
|
601
|
+
// 禁止滚动后切换为滑动
|
|
602
|
+
if (!enableScrollValue.value && isAtTop.value) {
|
|
603
|
+
if (refreshing) {
|
|
604
|
+
// 从完全展开状态(refresherHeight.value)开始计算偏移
|
|
605
|
+
translateY.value = Math.max(
|
|
606
|
+
0,
|
|
607
|
+
Math.min(
|
|
608
|
+
refresherHeight.value,
|
|
609
|
+
refresherHeight.value + event.translationY
|
|
610
|
+
)
|
|
611
|
+
)
|
|
612
|
+
} else if (event.translationY > 0) {
|
|
613
|
+
// 非刷新状态下的下拉逻辑保持不变
|
|
614
|
+
translateY.value = Math.min(event.translationY * 0.6, refresherHeight.value)
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
})
|
|
618
|
+
.onEnd((event) => {
|
|
619
|
+
'worklet'
|
|
620
|
+
if (enableScrollValue.value) return
|
|
621
|
+
if (refreshing) {
|
|
622
|
+
// 刷新状态下,根据滑动距离决定是否隐藏
|
|
623
|
+
// 如果向下滑动没超过 refresherThreshold,就完全隐藏,如果向上滑动完全隐藏
|
|
624
|
+
if ((event.translationY > 0 && translateY.value < refresherThreshold) || event.translationY < 0) {
|
|
625
|
+
translateY.value = withTiming(0)
|
|
626
|
+
updateScrollState(true)
|
|
627
|
+
runOnJS(setRefreshing)(false)
|
|
628
|
+
} else {
|
|
629
|
+
translateY.value = withTiming(refresherHeight.value)
|
|
630
|
+
}
|
|
631
|
+
} else if (event.translationY >= refresherHeight.value) {
|
|
632
|
+
// 触发刷新
|
|
633
|
+
translateY.value = withTiming(refresherHeight.value)
|
|
634
|
+
runOnJS(onRefresh)()
|
|
635
|
+
} else {
|
|
636
|
+
// 回弹
|
|
637
|
+
translateY.value = withTiming(0)
|
|
638
|
+
updateScrollState(true)
|
|
639
|
+
runOnJS(setRefreshing)(false)
|
|
640
|
+
}
|
|
641
|
+
})
|
|
642
|
+
.simultaneousWithExternalGesture(scrollViewRef)
|
|
643
|
+
|
|
465
644
|
const scrollAdditionalProps: ScrollAdditionalProps = extendObject(
|
|
466
645
|
{
|
|
467
646
|
style: extendObject({}, innerStyle, layoutStyle),
|
|
@@ -473,7 +652,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
473
652
|
scrollsToTop: enableBackToTop,
|
|
474
653
|
showsHorizontalScrollIndicator: scrollX && showScrollbar,
|
|
475
654
|
showsVerticalScrollIndicator: scrollY && showScrollbar,
|
|
476
|
-
scrollEnabled: scrollX || scrollY,
|
|
655
|
+
scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
|
|
656
|
+
bounces: false,
|
|
477
657
|
ref: scrollViewRef,
|
|
478
658
|
onScroll: onScroll,
|
|
479
659
|
onContentSizeChange: onContentSizeChange,
|
|
@@ -491,7 +671,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
491
671
|
|
|
492
672
|
if (enhanced) {
|
|
493
673
|
Object.assign(scrollAdditionalProps, {
|
|
494
|
-
bounces,
|
|
674
|
+
bounces: hasRefresher ? scrollBounces : !!bounces,
|
|
495
675
|
pagingEnabled
|
|
496
676
|
})
|
|
497
677
|
}
|
|
@@ -524,35 +704,61 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
|
|
|
524
704
|
'bindrefresherrefresh'
|
|
525
705
|
], { layoutRef })
|
|
526
706
|
|
|
527
|
-
const
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
707
|
+
const withRefresherScrollView = createElement(
|
|
708
|
+
GestureDetector,
|
|
709
|
+
{ gesture: panGesture },
|
|
710
|
+
createElement(
|
|
711
|
+
ScrollView,
|
|
712
|
+
innerProps,
|
|
713
|
+
createElement(
|
|
714
|
+
Animated.View,
|
|
715
|
+
{ style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout },
|
|
716
|
+
refresherContent
|
|
717
|
+
),
|
|
718
|
+
createElement(
|
|
719
|
+
Animated.View,
|
|
720
|
+
{ style: contentAnimatedStyle },
|
|
721
|
+
createElement(
|
|
722
|
+
ScrollViewContext.Provider,
|
|
723
|
+
{ value: contextValue },
|
|
724
|
+
wrapChildren(
|
|
725
|
+
extendObject({}, props, { children: otherContent }),
|
|
726
|
+
{
|
|
727
|
+
hasVarDec,
|
|
728
|
+
varContext: varContextRef.current,
|
|
729
|
+
textStyle,
|
|
730
|
+
textProps
|
|
731
|
+
}
|
|
732
|
+
)
|
|
733
|
+
)
|
|
734
|
+
)
|
|
735
|
+
)
|
|
736
|
+
)
|
|
531
737
|
|
|
532
|
-
|
|
738
|
+
const commonScrollView = createElement(
|
|
533
739
|
ScrollView,
|
|
534
|
-
extendObject(
|
|
740
|
+
extendObject(innerProps, {
|
|
535
741
|
refreshControl: refresherEnabled
|
|
536
742
|
? createElement(RefreshControl, extendObject({
|
|
537
743
|
progressBackgroundColor: refresherBackground,
|
|
538
744
|
refreshing: refreshing,
|
|
539
745
|
onRefresh: onRefresh
|
|
540
|
-
},
|
|
746
|
+
}, refresherDefaultStyle && refresherDefaultStyle !== 'none'
|
|
747
|
+
? { colors: refreshColor[refresherDefaultStyle] }
|
|
748
|
+
: {}))
|
|
541
749
|
: undefined
|
|
542
750
|
}),
|
|
543
|
-
createElement(ScrollViewContext.Provider,
|
|
544
|
-
{
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
textStyle,
|
|
551
|
-
textProps
|
|
552
|
-
}
|
|
553
|
-
)
|
|
751
|
+
createElement(ScrollViewContext.Provider, { value: contextValue },
|
|
752
|
+
wrapChildren(props, {
|
|
753
|
+
hasVarDec,
|
|
754
|
+
varContext: varContextRef.current,
|
|
755
|
+
textStyle,
|
|
756
|
+
textProps
|
|
757
|
+
})
|
|
554
758
|
)
|
|
555
759
|
)
|
|
760
|
+
|
|
761
|
+
return hasRefresher ? withRefresherScrollView : commonScrollView
|
|
556
762
|
})
|
|
557
763
|
|
|
558
764
|
_ScrollView.displayName = 'MpxScrollView'
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import { Text, TextProps } from 'react-native'
|
|
2
2
|
import { JSX, createElement } from 'react'
|
|
3
|
+
import useInnerProps from './getInnerListeners'
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const _Text2 = (props: TextProps): JSX.Element => {
|
|
5
|
+
const SimpleText = (props: TextProps): JSX.Element => {
|
|
7
6
|
const {
|
|
8
|
-
allowFontScaling = false
|
|
7
|
+
allowFontScaling = false,
|
|
8
|
+
children
|
|
9
9
|
} = props
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
const innerProps = useInnerProps(props, {
|
|
12
12
|
allowFontScaling
|
|
13
|
-
})
|
|
13
|
+
}, [])
|
|
14
|
+
|
|
15
|
+
return createElement(Text, innerProps, children)
|
|
14
16
|
}
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
SimpleText.displayName = 'MpxSimpleText'
|
|
17
19
|
|
|
18
|
-
export default
|
|
20
|
+
export default SimpleText
|
|
@@ -1,23 +1,18 @@
|
|
|
1
1
|
import { View, ViewProps, TextStyle } from 'react-native'
|
|
2
|
-
import { createElement
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
const _View2 = forwardRef<HandlerRef<View, ViewProps>, ViewProps>((simpleViewProps: ViewProps, ref) => {
|
|
7
|
-
const nodeRef = useRef(null)
|
|
2
|
+
import { createElement } from 'react'
|
|
3
|
+
import { splitProps, splitStyle, wrapChildren } from './utils'
|
|
4
|
+
import useInnerProps from './getInnerListeners'
|
|
8
5
|
|
|
6
|
+
const SimpleView = (simpleViewProps: ViewProps): JSX.Element => {
|
|
9
7
|
const { textProps, innerProps: props = {} } = splitProps(simpleViewProps)
|
|
10
8
|
|
|
11
9
|
const { textStyle, innerStyle = {} } = splitStyle(props.style || {})
|
|
12
10
|
|
|
13
|
-
|
|
14
|
-
style: innerStyle
|
|
15
|
-
})
|
|
11
|
+
const innerProps = useInnerProps(props, {
|
|
12
|
+
style: innerStyle
|
|
13
|
+
}, [])
|
|
16
14
|
|
|
17
|
-
return createElement(View,
|
|
18
|
-
style: innerStyle,
|
|
19
|
-
ref: nodeRef
|
|
20
|
-
}), wrapChildren(
|
|
15
|
+
return createElement(View, innerProps, wrapChildren(
|
|
21
16
|
props,
|
|
22
17
|
{
|
|
23
18
|
hasVarDec: false,
|
|
@@ -25,8 +20,8 @@ const _View2 = forwardRef<HandlerRef<View, ViewProps>, ViewProps>((simpleViewPro
|
|
|
25
20
|
textProps
|
|
26
21
|
}
|
|
27
22
|
))
|
|
28
|
-
}
|
|
23
|
+
}
|
|
29
24
|
|
|
30
|
-
|
|
25
|
+
SimpleView.displayName = 'MpxSimpleView'
|
|
31
26
|
|
|
32
|
-
export default
|
|
27
|
+
export default SimpleView
|
|
@@ -55,7 +55,6 @@ interface SwiperProps {
|
|
|
55
55
|
'parent-width'?: number;
|
|
56
56
|
'parent-height'?: number;
|
|
57
57
|
'external-var-context'?: Record<string, any>;
|
|
58
|
-
disableGesture?: boolean;
|
|
59
58
|
bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
|
|
60
59
|
}
|
|
61
60
|
|
|
@@ -137,8 +136,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
|
|
|
137
136
|
'external-var-context': externalVarContext,
|
|
138
137
|
style = {},
|
|
139
138
|
autoplay = false,
|
|
140
|
-
circular = false
|
|
141
|
-
disableGesture = false
|
|
139
|
+
circular = false
|
|
142
140
|
} = props
|
|
143
141
|
const easeingFunc = props['easing-function'] || 'default'
|
|
144
142
|
const easeDuration = props.duration || 500
|
|
@@ -732,7 +730,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
|
|
|
732
730
|
</View>)
|
|
733
731
|
}
|
|
734
732
|
|
|
735
|
-
if (children.length === 1
|
|
733
|
+
if (children.length === 1) {
|
|
736
734
|
return renderSwiper()
|
|
737
735
|
} else {
|
|
738
736
|
return (<GestureDetector gesture={gestureHandler}>
|
|
@@ -233,7 +233,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
|
|
|
233
233
|
{},
|
|
234
234
|
{
|
|
235
235
|
detail: {
|
|
236
|
-
position:
|
|
236
|
+
position: __mpx_mode__ !== 'ios' ? seekTime * 1000 : seekTime
|
|
237
237
|
},
|
|
238
238
|
layoutRef
|
|
239
239
|
},
|
|
@@ -326,7 +326,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
|
|
|
326
326
|
if (isDrm) {
|
|
327
327
|
source.drm = {
|
|
328
328
|
type: DRMType.FAIRPLAY,
|
|
329
|
-
certificateUrl:
|
|
329
|
+
certificateUrl: __mpx_mode__ !== 'ios' ? provisionUrl : certificateUrl,
|
|
330
330
|
licenseServer: licenseUrl
|
|
331
331
|
}
|
|
332
332
|
}
|
|
@@ -143,7 +143,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
|
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
const _reload = function () {
|
|
146
|
-
if (__mpx_mode__
|
|
146
|
+
if (__mpx_mode__ !== 'ios') {
|
|
147
147
|
fristLoaded.current = false // 安卓需要重新设置
|
|
148
148
|
}
|
|
149
149
|
setPageLoadErr(false)
|
|
@@ -189,7 +189,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
|
|
|
189
189
|
}
|
|
190
190
|
|
|
191
191
|
const _onLoadProgress = function (event: WebViewProgressEvent) {
|
|
192
|
-
if (__mpx_mode__
|
|
192
|
+
if (__mpx_mode__ !== 'ios') {
|
|
193
193
|
canGoBack.current = event.nativeEvent.canGoBack
|
|
194
194
|
}
|
|
195
195
|
}
|
|
@@ -305,8 +305,8 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
|
|
|
305
305
|
}
|
|
306
306
|
}
|
|
307
307
|
const onLoadEnd = function (res: WebViewEvent) {
|
|
308
|
-
|
|
309
|
-
|
|
308
|
+
if (__mpx_mode__ !== 'ios') {
|
|
309
|
+
res.persist()
|
|
310
310
|
setTimeout(() => {
|
|
311
311
|
onLoadEndHandle(res)
|
|
312
312
|
}, 0)
|
|
@@ -53,6 +53,9 @@ interface UseInnerPropsConfig {
|
|
|
53
53
|
interface DataSetType {
|
|
54
54
|
[key: string]: string;
|
|
55
55
|
}
|
|
56
|
+
interface ExtendedNativeTouchEvent extends NativeTouchEvent {
|
|
57
|
+
_stoppedEventTypes?: Set<string>
|
|
58
|
+
}
|
|
56
59
|
|
|
57
60
|
export {
|
|
58
61
|
NativeTouchEvent,
|
|
@@ -64,5 +67,6 @@ export {
|
|
|
64
67
|
LayoutRef,
|
|
65
68
|
SetTimeoutReturnType,
|
|
66
69
|
DataSetType,
|
|
67
|
-
Navigation
|
|
70
|
+
Navigation,
|
|
71
|
+
ExtendedNativeTouchEvent
|
|
68
72
|
}
|
|
@@ -99,7 +99,7 @@ export function isText (ele: ReactNode): ele is ReactElement {
|
|
|
99
99
|
if (isValidElement(ele)) {
|
|
100
100
|
const displayName = (ele.type as ExtendedFunctionComponent)?.displayName
|
|
101
101
|
const isCustomText = (ele.type as ExtendedFunctionComponent)?.isCustomText
|
|
102
|
-
return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'Text' || !!isCustomText
|
|
102
|
+
return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'MpxInlineText' || displayName === 'Text' || !!isCustomText
|
|
103
103
|
}
|
|
104
104
|
return false
|
|
105
105
|
}
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
const domProps = {
|
|
86
86
|
name: this.name,
|
|
87
87
|
value: this.value,
|
|
88
|
-
type: this.password ? 'password' : this.type,
|
|
88
|
+
type: this.password ? 'password' : this.type === 'digit' ? 'number' : this.type,
|
|
89
89
|
placeholder: this.placeholder,
|
|
90
90
|
disabled: this.disabled,
|
|
91
91
|
autofocus: this.focus || this.autoFocus
|
|
@@ -223,13 +223,13 @@ function normalizeDynamicStyle (value) {
|
|
|
223
223
|
}
|
|
224
224
|
|
|
225
225
|
module.exports = {
|
|
226
|
-
|
|
226
|
+
c: function (staticClass, dynamicClass) {
|
|
227
227
|
if (typeof staticClass !== 'string') {
|
|
228
228
|
return console.log('Template attr class must be a string!')
|
|
229
229
|
}
|
|
230
230
|
return concat(staticClass, mpEscape(stringifyDynamicClass(dynamicClass)))
|
|
231
231
|
},
|
|
232
|
-
|
|
232
|
+
s: function (staticStyle, dynamicStyle) {
|
|
233
233
|
var normalizedDynamicStyle = normalizeDynamicStyle(dynamicStyle)
|
|
234
234
|
var parsedStaticStyle = typeof staticStyle === 'string' ? parseStyleText(staticStyle) : {}
|
|
235
235
|
return genStyleText(extend(parsedStaticStyle, normalizedDynamicStyle))
|