@mpxjs/webpack-plugin 2.9.69-beta.1 → 2.9.69-beta.10

package/lib/runtime/components/react/mpx-button.tsx

@@ -34,7 +34,7 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { createElement, useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
+import { createElement, useEffect, useRef, ReactNode, forwardRef, useContext, JSX } from 'react'
 import {
   View,
   StyleSheet,
@@ -45,10 +45,12 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
+import type { ExtendedViewStyle } from './types/common'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -68,7 +70,7 @@ export interface ButtonProps {
   disabled?: boolean
   loading?: boolean
   'hover-class'?: string
-  'hover-style'?: ViewStyle & TextStyle & Record<string, any>
+  'hover-style'?: ExtendedViewStyle
   'hover-start-time'?: number
   'hover-stay-time'?: number
   'open-type'?: OpenType
@@ -83,8 +85,6 @@ export interface ButtonProps {
   children: ReactNode
   bindgetuserinfo?: (userInfo: any) => void
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  bindtouchstart?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  bindtouchend?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 const LOADING_IMAGE_URI =
@@ -216,15 +216,16 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     style = {},
     children,
     bindgetuserinfo,
-    bindtap,
-    bindtouchstart,
-    bindtouchend
+    bindtap
   } = props
 
   const pageId = useContext(RouteContext)
 
   const formContext = useContext(FormContext)
 
+  const enableHover = hoverClass !== 'none'
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled })
+
   let submitFn: () => void | undefined
   let resetFn: () => void | undefined
 
@@ -233,27 +234,15 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     resetFn = formContext.reset
   }
 
-  const refs = useRef<{
-    hoverStartTimer: ReturnType<typeof setTimeout> | undefined
-    hoverStayTimer: ReturnType<typeof setTimeout> | undefined
-  }>({
-    hoverStartTimer: undefined,
-    hoverStayTimer: undefined
-  })
-
-  const [isHover, setIsHover] = useState(false)
-
   const isMiniSize = size === 'mini'
 
-  const applyHoverEffect = isHover && hoverClass !== 'none'
-
   const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]
 
-  const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color
+  const normalBackgroundColor = disabled ? disabledColor : isHover || loading ? hoverColor : color
 
   const plainBorderColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor},.6)`
       : `rgb(${plainColor})`
 
@@ -261,14 +250,14 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const plainTextColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor}, .6)`
       : `rgb(${plainColor})`
 
   const normalTextColor =
     type === 'default'
-      ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})`
-      : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})`
+      ? `rgba(0, 0, 0, ${disabled ? 0.3 : isHover || loading ? 0.6 : 1})`
+      : `rgba(255 ,255 ,255 , ${disabled || isHover || loading ? 0.6 : 1})`
 
   const viewStyle = {
     borderWidth: 1,
@@ -297,7 +286,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     {},
     defaultStyle,
     style,
-    applyHoverEffect ? hoverStyle : {}
+    isHover ? hoverStyle : {}
   )
 
   const {
@@ -366,34 +355,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   }
 
-  const setStayTimer = () => {
-    clearTimeout(refs.current.hoverStayTimer)
-    refs.current.hoverStayTimer = setTimeout(() => {
-      setIsHover(false)
-      clearTimeout(refs.current.hoverStayTimer)
-    }, hoverStayTime)
-  }
-
-  const setStartTimer = () => {
-    clearTimeout(refs.current.hoverStartTimer)
-    refs.current.hoverStartTimer = setTimeout(() => {
-      setIsHover(true)
-      clearTimeout(refs.current.hoverStartTimer)
-    }, hoverStartTime)
-  }
-
-  const onTouchStart = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    bindtouchstart && bindtouchstart(evt)
-    if (disabled) return
-    setStartTimer()
-  }
-
-  const onTouchEnd = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    bindtouchend && bindtouchend(evt)
-    if (disabled) return
-    setStayTimer()
-  }
-
   const handleFormTypeFn = () => {
     if (formType === 'submit') {
       submitFn && submitFn()
@@ -418,8 +379,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       },
       layoutProps,
       {
-        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
-        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
         bindtap: !disabled && onTap
       }
     ),
@@ -442,7 +401,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   )
 
-  return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
+  const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
     wrapChildren(
       props,
       {
@@ -453,6 +412,10 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       }
     )
   )
+
+  return enableHover
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, baseButton)
+    : baseButton
 })
 
 Button.displayName = 'MpxButton'

package/lib/runtime/components/react/mpx-image.tsx

@@ -403,32 +403,48 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     }
   )
 
-  return createElement(View, innerProps,
-    isSvg
-      ? createElement(SvgCssUri, {
-        uri: src,
-        onLayout: onSvgLoad,
-        onError: binderror && onSvgError,
-        style: extendObject(
-          { transformOrigin: 'top left' },
-          modeStyle
-        )
-      })
-      : loaded && renderImage({
-        source: { uri: src },
-        resizeMode: resizeMode,
-        onLoad: bindload && onImageLoad,
-        onError: binderror && onImageError,
-        style: extendObject(
-          {
-            transformOrigin: 'top left',
-            width: isCropMode ? imageWidth : '100%',
-            height: isCropMode ? imageHeight : '100%'
-          },
-          isCropMode ? modeStyle : {}
-        )
-      }, enableFastImage)
+  const createBaseImage = (innerProps = {}) => {
+    return renderImage(
+      extendObject(
+        {
+          source: { uri: src },
+          resizeMode: resizeMode,
+          onLoad: bindload && onImageLoad,
+          onError: binderror && onImageError,
+          style: extendObject(
+            {
+              transformOrigin: 'top left',
+              width: isCropMode ? imageWidth : '100%',
+              height: isCropMode ? imageHeight : '100%'
+            },
+            isCropMode ? modeStyle : {}
+          )
+        },
+        innerProps
+      ),
+      enableFastImage
+    )
+  }
+
+  const SvgImage = createElement(
+    View,
+    innerProps,
+    createElement(SvgCssUri, {
+      uri: src,
+      onLayout: onSvgLoad,
+      onError: binderror && onSvgError,
+      style: extendObject(
+        { transformOrigin: 'top left' },
+        modeStyle
+      )
+    })
   )
+
+  const BaseImage = createBaseImage(innerProps)
+
+  const LayoutImage = createElement(View, innerProps, loaded && createBaseImage())
+
+  return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
 })
 
 Image.displayName = 'mpx-image'

package/lib/runtime/components/react/mpx-picker/time.tsx

@@ -1,5 +1,6 @@
 import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native'
-import { PickerView, Portal } from '@ant-design/react-native'
+import Portal from '../mpx-portal'
+import { PickerView } from '@ant-design/react-native'
 import React, { forwardRef, useState, useRef, useEffect } from 'react'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
 import { TimeProps } from './type'

package/lib/runtime/components/react/mpx-picker-view-column-item.tsx

@@ -9,7 +9,7 @@ interface PickerColumnItemProps {
   item: React.ReactElement
   index: number
   itemHeight: number
-  itemWidth: number | '100%'
+  itemWidth?: number | '100%'
   textStyleFromParent: Record<string, any>
   textStyle: Record<string, any>
   hasVarDec: boolean
@@ -23,7 +23,7 @@ const _PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
   item,
   index,
   itemHeight,
-  itemWidth,
+  itemWidth = '100%',
   textStyleFromParent,
   textStyle,
   hasVarDec,
@@ -44,8 +44,8 @@ const _PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
     return {
       opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
       transform: [
-        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
         { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
+        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
         { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
       ]
     }

package/lib/runtime/components/react/mpx-picker-view-column.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
 import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
 import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, useDebounceCallback, useStableCallback } from './utils'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import PickerOverlay from './pickerViewOverlay'
 import PickerMask from './pickerViewMask'
@@ -64,14 +64,12 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   })
 
   const { height: pickerH, itemHeight } = wrapperStyle
-  const [scrollViewWidth, setScrollViewWidth] = useState<number | '100%'>('100%')
-  const [itemRawW, setItemRawW] = useState<number | '100%'>('100%')
   const [itemRawH, setItemRawH] = useState(itemHeight)
   const maxIndex = useMemo(() => columnData.length - 1, [columnData])
-  const maxScrollViewWidth = useRef(-1)
   const prevScrollingInfo = useRef({ index: initialIndex, y: 0 })
   const touching = useRef(false)
   const scrolling = useRef(false)
+  const timerScrollTo = useRef<NodeJS.Timeout | null>(null)
   const activeIndex = useRef(initialIndex)
   const prevIndex = usePrevious(initialIndex)
   const prevMaxIndex = usePrevious(maxIndex)
@@ -88,11 +86,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length, 'pickerH=', pickerH, 'itemRawH=', itemRawH, 'itemHeight=', itemHeight)
 
-  // const initialOffset = useMemo(() => ({
-  //   x: 0,
-  //   y: itemRawH * initialIndex
-  // }), [itemRawH])
-
   const paddingHeight = useMemo(
     () => Math.round((pickerH - itemHeight) / 2),
     [pickerH, itemHeight]
@@ -112,8 +105,41 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     return Math.max(0, Math.min(calc, maxIndex))
   }, [itemRawH, maxIndex])
 
+  const getYofIndex = useCallback((index: number) => {
+    return index * itemRawH
+  }, [itemRawH])
+
+  const stableResetScrollPosition = useStableCallback((y: number) => {
+    // console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current, itemRawH, 'snapToOffsets=', snapToOffsets)
+    if (touching.current || scrolling.current) {
+      return
+    }
+    // needReset.current = true
+    if (y % itemRawH !== 0) {
+      scrolling.current = true
+      const targetIndex = getIndex(y)
+      const targetY = getYofIndex(targetIndex)
+      scrollViewRef.current?.scrollTo({ x: 0, y: targetY, animated: false })
+    } else {
+      onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } })
+    }
+  })
+  const debounceResetScrollPosition = useDebounceCallback(stableResetScrollPosition, 10)
+
+  const clearTimerScrollTo = () => {
+    if (timerScrollTo.current) {
+      clearTimeout(timerScrollTo.current)
+      timerScrollTo.current = null
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      clearTimerScrollTo()
+    }
+  }, [])
+
   useEffect(() => {
-    // console.log('[mpx-picker-view-column], useEffect000 --->', 'columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'prevIndex=', prevIndex, 'activeIndex=', activeIndex.current, 'maxIndex=', maxIndex, 'prevMaxIndex=', prevMaxIndex)
     if (
       !scrollViewRef.current ||
       !itemRawH ||
@@ -126,11 +152,11 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     ) {
       return
     }
-    // console.log('[mpx-picker-view-column], useEffect ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'y=', itemRawH * initialIndex, `${scrollViewRef.current?.scrollTo}`)
-    setTimeout(() => {
+    clearTimerScrollTo()
+    timerScrollTo.current = setTimeout(() => {
       scrollViewRef.current?.scrollTo({
         x: 0,
-        y: itemRawH * initialIndex,
+        y: getYofIndex(initialIndex),
         animated: false
       })
     }, isAndroid ? 200 : 0)
@@ -138,86 +164,64 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   }, [itemRawH, initialIndex])
 
   const onContentSizeChange = (_w: number, h: number) => {
-    const y = itemRawH * initialIndex
-    // console.log('[mpx-picker-view-column], onContentSizeChange --->', 'columnIndex=', columnIndex, '_w=', _w, 'h=', h, 'y=', y, 'itemRawH=', itemRawH)
+    const y = getYofIndex(initialIndex)
     if (y <= h) {
-      setTimeout(() => {
+      clearTimerScrollTo()
+      timerScrollTo.current = setTimeout(() => {
         scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
       }, 0)
     }
   }
 
-  const onScrollViewLayout = (e: LayoutChangeEvent) => {
-    if (isAndroid) {
-      return
-    }
-    // RN iOS bug: https://github.com/facebook/react-native/issues/36135
-    const { width } = e.nativeEvent.layout
-    const widthInt = Math.ceil(width)
-    // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'width=', width, 'widthInt=', widthInt, 'scrollViewWidth=', scrollViewWidth)
-    if (widthInt !== scrollViewWidth) {
-      const maxW = maxScrollViewWidth.current
-      if (maxW !== -1 && widthInt > maxW) {
-        return
-      }
-      if (maxW === -1) {
-        maxScrollViewWidth.current = Math.ceil(widthInt * 1.5)
-      }
-      setScrollViewWidth(widthInt)
-    }
-    if (itemRawW === '100%') {
-      setItemRawW(widthInt)
-    }
-  }
-
   const onItemLayout = (e: LayoutChangeEvent) => {
     const { height: rawH } = e.nativeEvent.layout
-    // console.log('[mpx-picker-view-column], onItemLayout --->', 'columnIndex=', columnIndex, 'width=', width)
-    if (rawH && itemRawH !== rawH) {
-      setItemRawH(rawH)
+    const roundedH = Math.round(rawH)
+    if (roundedH && roundedH !== itemRawH) {
+      setItemRawH(roundedH)
     }
   }
 
-  const onTouchStart = () => {
+  const onScrollBeginDrag = () => {
+    isIOS && debounceResetScrollPosition.clear()
     touching.current = true
     prevScrollingInfo.current = {
       index: activeIndex.current,
-      y: activeIndex.current * itemRawH
+      y: getYofIndex(activeIndex.current)
     }
   }
 
-  const onTouchEnd = () => {
-    touching.current = false
-  }
-
-  const onTouchCancel = () => {
+  const onScrollEndDrag = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     touching.current = false
+    const { y } = e.nativeEvent.contentOffset
+    if (isIOS) {
+      if (y >= 0 && y <= snapToOffsets[maxIndex]) {
+        debounceResetScrollPosition(y)
+      }
+    }
   }
 
   const onMomentumScrollBegin = () => {
+    isIOS && debounceResetScrollPosition.clear()
     scrolling.current = true
   }
 
-  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent> | { nativeEvent: { contentOffset: { y: number } } }) => {
     scrolling.current = false
-    if (!itemRawH) {
-      return
-    }
     const { y: scrollY } = e.nativeEvent.contentOffset
-    let calcIndex = Math.round(scrollY / itemRawH)
-    activeIndex.current = calcIndex
-    if (calcIndex !== initialIndex) {
-      calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0
+    // console.log('[mpx-picker-view-column], onMomentumScrollEnd --->', 'columnIndex=', columnIndex, scrollY, itemRawH)
+    if (isIOS && scrollY % itemRawH !== 0) {
+      return debounceResetScrollPosition(scrollY)
+    }
+    const calcIndex = getIndex(scrollY)
+    if (calcIndex !== activeIndex.current) {
+      activeIndex.current = calcIndex
       onSelectChange(calcIndex)
     }
   }
 
   const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (isAndroid) {
-      return
-    }
-    // 全局注册的震动触感 hook
-    const pickerVibrate = global.__mpx.config.rnConfig.pickerVibrate
+    // 全局注册的振动触感 hook
+    const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate
     if (typeof pickerVibrate !== 'function') {
       return
     }
@@ -229,7 +233,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
         if (currentId !== prevIndex) {
           prevScrollingInfo.current = {
             index: currentId,
-            y: currentId * itemRawH
+            y: getYofIndex(currentId)
           }
           // vibrateShort({ type: 'selection' })
           pickerVibrate()
@@ -246,7 +250,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           item={item}
           index={index}
           itemHeight={itemHeight}
-          itemWidth={itemRawW}
           textStyleFromParent={textStyleFromParent}
           textStyle={textStyle}
           hasVarDec={hasVarDec}
@@ -271,14 +274,12 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           showsHorizontalScrollIndicator={false}
           scrollEventThrottle={16}
           {...layoutProps}
-          style={[{ width: scrollViewWidth }]}
+          style={[{ width: '100%' }]}
           decelerationRate="fast"
           snapToOffsets={snapToOffsets}
           onScroll={onScroll}
-          onLayout={onScrollViewLayout}
-          onTouchStart={onTouchStart}
-          onTouchEnd={onTouchEnd}
-          onTouchCancel={onTouchCancel}
+          onScrollBeginDrag={onScrollBeginDrag}
+          onScrollEndDrag={onScrollEndDrag}
           onMomentumScrollBegin={onMomentumScrollBegin}
           onMomentumScrollEnd={onMomentumScrollEnd}
           onContentSizeChange={onContentSizeChange}

package/lib/runtime/components/react/mpx-portal/portal-consumer.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useRef, ReactNode } from 'react'
+import { PortalContextValue } from '../context'
+import { getFocusedNavigation } from '@mpxjs/utils'
+
+export type PortalConsumerProps = {
+  manager: PortalContextValue
+  children?: ReactNode
+}
+const PortalConsumer = ({ manager, children } :PortalConsumerProps): JSX.Element | null => {
+  const keyRef = useRef<any>(null)
+  useEffect(() => {
+    const navigation = getFocusedNavigation()
+    const curPageId = navigation?.pageId
+    manager.update(keyRef.current, children, curPageId)
+  }, [children])
+  useEffect(() => {
+    if (!manager) {
+      throw new Error(
+        'Looks like you forgot to wrap your root component with `Provider` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal`.\n\n'
+      )
+    }
+    const navigation = getFocusedNavigation()
+    const curPageId = navigation?.pageId
+    keyRef.current = manager.mount(children, undefined, curPageId)
+    return () => {
+      manager.unmount(keyRef.current)
+    }
+  }, [])
+  return null
+}
+
+export default PortalConsumer