@mpxjs/webpack-plugin 2.9.67 → 2.9.69

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

@@ -1,9 +1,19 @@
 import { View } from 'react-native'
-import { LinearGradient, LinearGradientProps } from 'react-native-linear-gradient'
-import React, { forwardRef, useState, useRef, ReactElement, JSX } from 'react'
+import React, { forwardRef, useState, useRef } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
-import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { parseInlineStyle, useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import {
+  useLayout,
+  splitProps,
+  splitStyle,
+  wrapChildren,
+  parseInlineStyle,
+  useTransformStyle,
+  useDebounceCallback,
+  useStableCallback,
+  extendObject
+} from './utils'
+import type { AnyFunc } from './types/common'
 /**
  * ✔ value
  * ✔ bindchange
@@ -18,9 +28,10 @@ import { parseInlineStyle, useTransformStyle, splitStyle, splitProps, useLayout,
 
 interface PickerViewProps {
   children: React.ReactNode
-  // 初始的defaultValue数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
+  // 初始的defaultValue数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），
+  // 数字大于 picker-view-column 可选项长度时，选择最后一项。
   value?: Array<number>
-  bindchange?: Function
+  bindchange?: AnyFunc
   style: {
     [key: string]: any
   }
@@ -48,27 +59,29 @@ const styles: { [key: string]: Object } = {
     justifyContent: 'space-around',
     overflow: 'hidden',
     alignItems: 'center'
-  },
-  maskTop: {
-    position: 'absolute',
-    width: 1000,
-    zIndex: 100
-  },
-  maskBottom: {
-    position: 'absolute',
-    width: 1000,
-    zIndex: 100
   }
 }
+
 const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProps>((props: PickerViewProps, ref) => {
-  const { children, value = [], bindchange, style, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props
+  const {
+    children,
+    value = [],
+    bindchange,
+    style,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext
+  } = props
+
   // indicatorStyle 需要转换为rn的style
   // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
   const indicatorStyle = parseInlineStyle(props['indicator-style'])
-  const { height: indicatorH, width: indicatorW } = indicatorStyle
+  const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle
+  const [pickMaxH, setPickMaxH] = useState(0)
   const nodeRef = useRef(null)
-  useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {})
-  //  picker-view 设置的color等textStyle,在小程序上的表现是可以继承到最内层的text样式, 但是RN内部column是slot无法设置, 需要业务自己在column内的元素上设置
+  const cloneRef = useRef(null)
+  const activeValueRef = useRef(value)
+  activeValueRef.current = value.slice()
+
   const {
     normalStyle,
     hasVarDec,
@@ -77,69 +90,85 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext })
-  const { textStyle } = splitStyle(normalStyle)
-  const { textProps } = splitProps(props)
+  useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {})
   const {
     // 存储layout布局信息
     layoutRef,
     layoutProps,
     layoutStyle
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
+  const { textProps } = splitProps(props)
+  const { textStyle } = splitStyle(normalStyle)
 
-  const isSetW = indicatorW !== undefined ? 1 : 0
-  const cloneRef = useRef(null)
-  const maskPos: PosType = {}
-  let [pickH, setPickH] = useState(0)
-  const itemH = pickH / 5
-  if (normalStyle?.height && pickH && pickH !== normalStyle?.height) {
-    maskPos.height = itemH * 2 + Math.ceil((normalStyle.height - pickH) / 2)
-  } else {
-    maskPos.height = itemH * 2
+  const onColumnItemRawHChange = (height: number) => {
+    if (height > pickMaxH) {
+      setPickMaxH(height)
+    }
   }
 
-  const onColumnLayoutChange = (layoutConfig: PickerLayout) => {
-    pickH = layoutConfig.height
-    setPickH(layoutConfig.height)
+  const bindchangeDebounce = useDebounceCallback(useStableCallback(bindchange), 300)
+
+  const onSelectChange = (columnIndex: number, selectedIndex: number) => {
+    bindchangeDebounce.clear()
+    const activeValue = activeValueRef.current
+    activeValue[columnIndex] = selectedIndex
+    const eventData = getCustomEvent(
+      'change',
+      {},
+      { detail: { value: activeValue, source: 'change' }, layoutRef }
+    )
+    bindchangeDebounce(eventData)
   }
 
-  const onSelectChange = (columnIndex: number, selIndex: number) => {
-    const changeValue = value.slice()
-    changeValue[columnIndex] = selIndex
-    const eventData = getCustomEvent('change', {}, { detail: { value: changeValue, source: 'change' }, layoutRef })
-    bindchange && bindchange(eventData)
+  const onInitialChange = (value: number[]) => {
+    const eventData = getCustomEvent(
+      'change',
+      {},
+      { detail: { value, source: 'change' }, layoutRef }
+    )
+    bindchange?.(eventData) // immediate
   }
 
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef,
-    style: {
-      ...normalStyle,
-      ...layoutStyle,
-      position: 'relative',
-      overflow: 'hidden'
-    },
-    ...layoutProps
-  }, [
-    'enable-offset'
-  ], { layoutRef })
-
-  const cloneChild = (child: React.ReactNode, index: number) => {
-    // const extraProps = index === 0 ? { getInnerLayout: getInnerLayout, innerProps } : {}
+  const innerProps = useInnerProps(
+    props,
+    extendObject({
+      ref: nodeRef,
+      style: extendObject(
+        normalStyle,
+        layoutStyle,
+        {
+          position: 'relative',
+          overflow: 'hidden'
+        }
+      ),
+      layoutProps
+    }),
+    ['enable-offset'],
+    { layoutRef }
+  )
+
+  const renderColumn = (child: React.ReactElement, index: number, columnData: React.ReactNode[], initialIndex: number) => {
     const extraProps = {}
-    const childProps = {
-      ...(child as ReactElement)?.props,
-      ref: cloneRef,
-      prefix: index,
-      key: 'pick-view' + index,
-      wrapperStyle: {
-        height: normalStyle?.height || 0,
-        itemHeight: indicatorH || 0
+    const childProps = child?.props || {}
+    const wrappedProps = extendObject(
+      childProps,
+      {
+        columnData,
+        ref: cloneRef,
+        columnIndex: index,
+        key: `pick-view-${index}`,
+        wrapperStyle: {
+          height: normalStyle?.height || 0,
+          itemHeight: indicatorH || 0
+        },
+        onColumnItemRawHChange,
+        onSelectChange: onSelectChange.bind(null, index),
+        initialIndex,
+        pickerOverlayStyle
       },
-      onColumnLayoutChange,
-      onSelectChange: onSelectChange.bind(null, index),
-      selectedIndex: value?.[index] || 0,
-      ...extraProps
-    }
-    const realElement = React.cloneElement(child as ReactElement, childProps)
+      extraProps
+    )
+    const realElement = React.cloneElement(child, wrappedProps)
     return wrapChildren(
       {
         children: realElement
@@ -153,69 +182,44 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     )
   }
 
-  const renderTopMask = () => {
-    const linearProps: LinearGradientProps = {
-      colors: ['rgba(255,255,255,0.8)', 'rgba(255,255,255,0.2)'],
-      style: [
-        styles.maskTop,
-        {
-          height: maskPos.height,
-          top: 0,
-          pointerEvents: 'none'
-        }
-      ]
-    }
-    return (<LinearGradient {...linearProps}/>)
+  const validateChildInitialIndex = (index: number, data: React.ReactNode[]) => {
+    return Math.max(0, Math.min(value[index] || 0, data.length - 1))
   }
 
-  const renderBottomMask = () => {
-    const linearProps: LinearGradientProps = {
-      colors: ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.8)'],
-      style: [
-        styles.maskBottom,
-        {
-          height: maskPos.height,
-          bottom: 0,
-          pointerEvents: 'none'
-        }
-      ]
+  const flatColumnChildren = (data: React.ReactElement) => {
+    const columnData = React.Children.toArray(data?.props?.children)
+    if (columnData.length === 1 && React.isValidElement(columnData[0]) && columnData[0].type === React.Fragment) {
+      // 只有一个 Fragment 嵌套情况
+      return React.Children.toArray(columnData[0].props.children)
     }
-    return <LinearGradient {...linearProps}></LinearGradient>
+    return columnData
   }
 
-  const renderLine = () => {
-    return <View style={[{
-      position: 'absolute',
-      top: '50%',
-      transform: [{ translateY: -(itemH / 2) }],
-      height: itemH,
-      borderTopWidth: 1,
-      borderBottomWidth: 1,
-      borderColor: '#f0f0f0',
-      width: '100%',
-      zIndex: 101
-    }]}></View>
+  const renderPickerColumns = () => {
+    const columns = React.Children.toArray(children)
+    const renderColumns: React.ReactNode[] = []
+    const validValue: number[] = []
+    let isInvalid = false
+    columns.forEach((item: React.ReactElement, index) => {
+      const columnData = flatColumnChildren(item)
+      const validIndex = validateChildInitialIndex(index, columnData)
+      if (validIndex !== value[index]) {
+        isInvalid = true
+      }
+      validValue.push(validIndex)
+      renderColumns.push(renderColumn(item, index, columnData, validIndex))
+    })
+    isInvalid && onInitialChange(validValue)
+    return renderColumns
   }
 
-  const renderSubChild = () => {
-    if (Array.isArray(children)) {
-      return children.map((item, index) => {
-        return cloneChild(item, index)
-      })
-    } else {
-      return cloneChild(children, 0)
-    }
-  }
-  return (<View {...innerProps}>
-    {renderTopMask()}
-    <View style={[styles.wrapper]}>
-      {renderSubChild()}
+  return (
+    <View {...innerProps}>
+      <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
     </View>
-    {renderBottomMask()}
-    {!isSetW && renderLine()}
-  </View>)
+  )
 })
 
-_PickerView.displayName = 'mpx-picker-view'
+_PickerView.displayName = 'MpxPickerView'
 
 export default _PickerView

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

@@ -4,15 +4,15 @@
  * ✔ hover-start-time
  * ✔ hover-stay-time
  */
-import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent, Text } from 'react-native'
-import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, Children, cloneElement } from 'react'
+import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, StyleSheet, Image, LayoutChangeEvent } from 'react-native'
+import { useRef, useState, useEffect, forwardRef, ReactNode, JSX } from 'react'
 import useInnerProps from './getInnerListeners'
 import Animated from 'react-native-reanimated'
 import useAnimationHooks from './useAnimationHooks'
 import type { AnimationProp } from './useAnimationHooks'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle } from './utils'
 import LinearGradient from 'react-native-linear-gradient'
 
 export interface _ViewProps extends ViewProps {
@@ -24,6 +24,7 @@ export interface _ViewProps extends ViewProps {
   'hover-stay-time'?: number
   'enable-background'?: boolean
   'enable-var'?: boolean
+  'enable-fast-image'?: boolean
   'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
@@ -76,9 +77,11 @@ type PreImageInfo = {
 type ImageProps = {
   style: ImageStyle,
   src?: string,
+  source?: {uri: string },
   colors: Array<string>,
   locations?: Array<number>
   angle?: number
+  resizeMode?: 'cover' | 'stretch'
 }
 
 const linearMap = new Map([
@@ -280,13 +283,14 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
       if (!dimensions) return
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
-      (imageProps.style as ImageStyle).resizeMode = 'stretch'
+      imageProps.resizeMode = 'stretch'
       dimensions = {
         width: isPercent(width) ? width : +width,
         height: isPercent(height) ? height : +height
       } as { width: NumberVal, height: NumberVal }
     }
   }
+
   // 样式合并
   imageProps.style = {
     ...imageProps.style as ImageStyle,
@@ -296,8 +300,9 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
 
 // background-image转换为source
 function backgroundImage (imageProps: ImageProps, preImageInfo: PreImageInfo) {
-  if (preImageInfo.src) {
-    imageProps.src = preImageInfo.src
+  const src = preImageInfo.src
+  if (src) {
+    imageProps.source = { uri: src }
   }
 }
 
@@ -326,8 +331,8 @@ function linearGradient (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
 const imageStyleToProps = (preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) => {
   // 初始化
   const imageProps: ImageProps = {
+    resizeMode: 'cover',
     style: {
-      resizeMode: 'cover' as ImageResizeMode,
       position: 'absolute'
       // ...StyleSheet.absoluteFillObject
     },
@@ -533,7 +538,26 @@ function isDiagonalAngle (linearInfo?: LinearInfo): boolean {
   return !!(linearInfo?.direction && diagonalAngleMap[linearInfo.direction])
 }
 
-function wrapImage (imageStyle?: ExtendedViewStyle) {
+function inheritStyle (innerStyle: ExtendedViewStyle = {}) {
+  const { borderWidth, borderRadius } = innerStyle
+  const borderStyles = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius']
+  return pickStyle(innerStyle,
+    borderStyles,
+    borderWidth && borderRadius
+      ? (key, val) => {
+        // 盒子内圆角borderWith与borderRadius的关系
+        // 当borderRadius 小于 当borderWith 内边框为直角
+        // 当borderRadius 大于等于 当borderWith 内边框为圆角
+          if (borderStyles.includes(key)) {
+            const borderVal = +val - borderWidth
+            return borderVal > 0 ? borderVal : 0
+          }
+          return val
+        }
+      : undefined)
+}
+
+function wrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
   // 预处理数据
   const preImageInfo: PreImageInfo = preParseImage(imageStyle)
   // 预解析
@@ -616,9 +640,9 @@ function wrapImage (imageStyle?: ExtendedViewStyle) {
     }
   }
 
-  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
+  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
     {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} /> }
-    {show && type === 'image' && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} />}
+    {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size), enableFastImage))}
   </View>
 }
 
@@ -629,9 +653,11 @@ interface WrapChildrenConfig {
   backgroundStyle?: ExtendedViewStyle
   varContext?: Record<string, any>
   textProps?: Record<string, any>
+  innerStyle?: Record<string, any>
+  enableFastImage?: boolean
 }
 
-function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps }: WrapChildrenConfig) {
+function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }: WrapChildrenConfig) {
   const children = wrapChildren(props, {
     hasVarDec,
     varContext,
@@ -640,7 +666,7 @@ function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, tex
   })
 
   return [
-    enableBackground ? wrapImage(backgroundStyle) : null,
+    enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
     children
   ]
 }
@@ -655,6 +681,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'enable-background': enableBackground,
+    'enable-fast-image': enableFastImage,
     'enable-animation': enableAnimation,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
@@ -755,9 +782,22 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   const viewStyle = Object.assign({}, innerStyle, layoutStyle)
+
+  enableAnimation = enableAnimation || !!animation
+  const enableAnimationRef = useRef(enableAnimation)
+  if (enableAnimationRef.current !== enableAnimation) {
+    throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+  }
+  const finalStyle = enableAnimation
+    ? useAnimationHooks({
+      animation,
+      style: viewStyle
+    })
+    : viewStyle
+
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    style: viewStyle,
+    style: finalStyle,
     ...layoutProps,
     ...(hoverStyle && {
       bindtouchstart: onTouchStart,
@@ -772,29 +812,19 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     layoutRef
   })
 
-  enableAnimation = enableAnimation || !!animation
-  const enableAnimationRef = useRef(enableAnimation)
-  if (enableAnimationRef.current !== enableAnimation) {
-    throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
-  }
-  const finalStyle = enableAnimation
-    ? useAnimationHooks({
-      animation,
-      style: viewStyle
-    })
-    : viewStyle
   const childNode = wrapWithChildren(props, {
     hasVarDec,
     enableBackground: enableBackgroundRef.current,
     textStyle,
     backgroundStyle,
     varContext: varContextRef.current,
-    textProps
+    textProps,
+    innerStyle,
+    enableFastImage
   })
-  return animation?.actions?.length
+  return enableAnimation
     ? (<Animated.View
       {...innerProps}
-      style={finalStyle}
     >
       {childNode}
     </Animated.View>)

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -1,11 +1,13 @@
-import { forwardRef, JSX, useEffect, useRef } from 'react'
+import { forwardRef, JSX, useEffect, useRef, useContext, useMemo } from 'react'
 import { noop, warn } from '@mpxjs/utils'
 import { Portal } from '@ant-design/react-native'
 import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent } from 'react-native-webview/lib/WebViewTypes'
+import { getCurrentPage } from './utils'
+import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation } from 'react-native-webview/lib/WebViewTypes'
+import { RouteContext } from './context'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -51,6 +53,9 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   if (props.style) {
     warn('The web-view component does not support the style prop.')
   }
+  const pageId = useContext(RouteContext)
+  const currentPage = useMemo(() => getCurrentPage(pageId), [pageId])
+
   const defaultWebViewStyle = {
     position: 'absolute' as 'absolute' | 'relative' | 'static',
     left: 0 as number,
@@ -64,17 +69,23 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     defaultStyle: defaultWebViewStyle
   })
 
-  const _messageList: any[] = []
+  const _messageList = useRef<any[]>([])
   const handleUnload = () => {
     // 这里是 WebView 销毁前执行的逻辑
     bindmessage(getCustomEvent('messsage', {}, {
       detail: {
-        data: _messageList
+        data: _messageList.current
       },
       layoutRef: webViewRef
     }))
   }
 
+  useEffect(() => {
+    if (currentPage) {
+      currentPage.__webViewUrl = src
+    }
+  }, [src, currentPage])
+
   useEffect(() => {
     // 组件卸载时执行
     return () => {
@@ -101,6 +112,11 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
     binderror(result)
   }
+  const _changeUrl = function (navState: WebViewNavigation) {
+    if (currentPage) {
+      currentPage.__webViewUrl = navState.url
+    }
+  }
   const _message = function (res: WebViewMessageEvent) {
     let data: MessageData = {}
     let asyncCallback
@@ -116,7 +132,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     const postData: PayloadData = data.payload || {}
     switch (data.type) {
       case 'postMessage':
-        _messageList.push(postData.data)
+        _messageList.current.push(postData.data)
         asyncCallback = Promise.resolve({
           errMsg: 'invokeWebappApi:ok'
         })
@@ -157,6 +173,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       onLoad={_load}
       onError={_error}
       onMessage={_message}
+      onNavigationStateChange={_changeUrl}
       javaScriptEnabled={true}
     ></WebView>
   </Portal>)