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

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

@@ -5,7 +5,7 @@
  * ✔ color
  */
 import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent } from 'react-native'
-import { useRef, useEffect, forwardRef, JSX, useState, useContext } from 'react'
+import { useRef, useEffect, forwardRef, JSX, useState, useContext, createElement } from 'react'
 import { warn } from '@mpxjs/utils'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
@@ -136,22 +136,26 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
   })
 
   if (type === 'checkbox') {
-    return <CheckBox
-      {...innerProps}
-      color={color}
-      style={normalStyle}
-      checked={isChecked}
-    />
+    return createElement(
+      CheckBox,
+      extendObject({}, innerProps, {
+        color: color,
+        style: normalStyle,
+        checked: isChecked
+      })
+    )
   }
 
-  return <Switch
-    {...innerProps}
-    style={normalStyle}
-    value={isChecked}
-    trackColor={{ false: '#FFF', true: color }}
-    thumbColor={isChecked ? '#FFF' : '#f4f3f4'}
-    ios_backgroundColor="#FFF"
-  />
+  return createElement(
+    Switch,
+    extendObject({}, innerProps, {
+      style: normalStyle,
+      value: isChecked,
+      trackColor: { false: '#FFF', true: color },
+      thumbColor: isChecked ? '#FFF' : '#f4f3f4',
+      ios_backgroundColor: '#FFF'
+    })
+  )
 })
 
 _Switch.displayName = 'MpxSwitch'

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

@@ -5,7 +5,7 @@
  * ✘ decode
  */
 import { Text, TextStyle, TextProps } from 'react-native'
-import { useRef, forwardRef, ReactNode, JSX } from 'react'
+import { useRef, forwardRef, ReactNode, JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, wrapChildren } from './utils'
@@ -65,21 +65,13 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     layoutRef
   })
 
-  return (
-    <Text
-      {...innerProps}
-    >
-      {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current
-          }
-        )
-      }
-    </Text>
-  )
+  return createElement(Text, innerProps, wrapChildren(
+    props,
+    {
+      hasVarDec,
+      varContext: varContextRef.current
+    }
+  ))
 })
 
 _Text.displayName = 'MpxText'

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

@@ -9,10 +9,10 @@
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
-import { JSX, forwardRef } from 'react'
+import { JSX, forwardRef, createElement } from 'react'
 import { Keyboard, TextInput } from 'react-native'
 import Input, { InputProps, PrivateInputProps } from './mpx-input'
-import { omit } from './utils'
+import { omit, extendObject } from './utils'
 import { HandlerRef } from './useNodesRef'
 
 export type TextareProps = Omit<
@@ -29,14 +29,15 @@ const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
       'multiline',
       'confirm-hold'
     ])
-    return (
-      <Input
-        ref={ref}
-        multiline
-        confirm-type='next'
-        bindblur={() => Keyboard.dismiss()}
-        {...restProps}
-      />
+
+    return createElement(
+      Input,
+      extendObject({
+        ref: ref,
+        multiline: true,
+        confirmType: 'next',
+        bindblur: () => Keyboard.dismiss()
+      }, restProps)
     )
   }
 )

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

@@ -5,15 +5,17 @@
  * ✔ hover-stay-time
  */
 import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, StyleSheet, Image, LayoutChangeEvent } from 'react-native'
-import { useRef, useState, useEffect, forwardRef, ReactNode, JSX } from 'react'
+import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, createElement } 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, renderImage, pickStyle, extendObject } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils'
+import { error } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
+import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
 
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
@@ -550,7 +552,7 @@ function inheritStyle (innerStyle: ExtendedViewStyle = {}) {
       : undefined)
 }
 
-function wrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
+function useWrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
   // 预处理数据
   const preImageInfo: PreImageInfo = preParseImage(imageStyle)
   // 预解析
@@ -641,7 +643,7 @@ function wrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string,
 
 interface WrapChildrenConfig {
   hasVarDec: boolean
-  enableBackground: boolean
+  enableBackground?: boolean
   textStyle?: TextStyle
   backgroundStyle?: ExtendedViewStyle
   varContext?: Record<string, any>
@@ -659,7 +661,8 @@ function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, tex
   })
 
   return [
-    enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    enableBackground ? useWrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
     children
   ]
 }
@@ -682,8 +685,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     animation
   } = props
 
-  const [isHover, setIsHover] = useState(false)
-
   // 默认样式
   const defaultStyle: ExtendedViewStyle = style.display === 'flex'
     ? {
@@ -694,6 +695,9 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       }
     : {}
 
+  const enableHover = !!hoverStyle
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime })
+
   const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
   const {
@@ -716,7 +720,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   enableBackground = enableBackground || !!backgroundStyle
   const enableBackgroundRef = useRef(enableBackground)
   if (enableBackgroundRef.current !== enableBackground) {
-    throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
+    error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
   }
 
   const nodeRef = useRef(null)
@@ -724,45 +728,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     style: normalStyle
   })
 
-  const dataRef = useRef<{
-    startTimer?: ReturnType<typeof setTimeout>
-    stayTimer?: ReturnType<typeof setTimeout>
-  }>({})
-
-  useEffect(() => {
-    return () => {
-      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
-    }
-  }, [])
-
-  const setStartTimer = () => {
-    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-    dataRef.current.startTimer = setTimeout(() => {
-      setIsHover(true)
-    }, +hoverStartTime)
-  }
-
-  const setStayTimer = () => {
-    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
-    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-    dataRef.current.stayTimer = setTimeout(() => {
-      setIsHover(false)
-    }, +hoverStayTime)
-  }
-
-  function onTouchStart (e: NativeSyntheticEvent<TouchEvent>) {
-    const { bindtouchstart } = props
-    bindtouchstart && bindtouchstart(e)
-    setStartTimer()
-  }
-
-  function onTouchEnd (e: NativeSyntheticEvent<TouchEvent>) {
-    const { bindtouchend } = props
-    bindtouchend && bindtouchend(e)
-    setStayTimer()
-  }
-
   const {
     layoutRef,
     layoutStyle,
@@ -771,30 +736,19 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const viewStyle = extendObject({}, 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 { enableStyleAnimation, animationStyle } = useAnimationHooks({
+    enableAnimation,
+    animation,
+    style: viewStyle
+  })
+
   const innerProps = useInnerProps(
     props,
     extendObject({
       ref: nodeRef,
-      style: finalStyle
+      style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
     },
-    layoutProps,
-    hoverStyle
-      ? {
-          bindtouchstart: onTouchStart,
-          bindtouchend: onTouchEnd
-        }
-      : {}
+    layoutProps
     ), [
       'hover-start-time',
       'hover-stay-time',
@@ -814,17 +768,14 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     innerStyle,
     enableFastImage
   })
-  return enableAnimation
-    ? (<Animated.View
-      {...innerProps}
-    >
-      {childNode}
-    </Animated.View>)
-    : (<View
-      {...innerProps}
-    >
-      {childNode}
-    </View>)
+
+  const BaseComponent = enableStyleAnimation
+    ? createElement(Animated.View, innerProps, childNode)
+    : createElement(View, innerProps, childNode)
+
+  return enableHover
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, BaseComponent)
+    : BaseComponent
 })
 
 _View.displayName = 'MpxView'

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

@@ -1,6 +1,5 @@
-import { forwardRef, JSX, useEffect, useRef, useContext, useMemo } from 'react'
-import { noop, warn } from '@mpxjs/utils'
-import { View } from 'react-native'
+import { forwardRef, JSX, useRef, useContext, useMemo, createElement } from 'react'
+import { warn, getFocusedNavigation, isFunction } 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'
@@ -31,26 +30,25 @@ interface WebViewProps {
 }
 
 interface PayloadData {
-  data?: Record<string, any>
+  [x: string]: any
 }
 
 type MessageData = {
   payload?: PayloadData,
+  args?: Array<any>,
   type?: string,
   callbackId?: number
 }
 
-const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element => {
-  const { src, bindmessage = noop, bindload = noop, binderror = noop } = props
-  if (!src) {
-    return (<View></View>)
-  }
+const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element | null => {
+  const { src, bindmessage, bindload, binderror } = props
+  const mpx = global.__mpx
   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 webViewRef = useRef<WebView>(null)
   const defaultWebViewStyle = {
     position: 'absolute' as 'absolute' | 'relative' | 'static',
     left: 0 as number,
@@ -59,34 +57,14 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     bottom: 0 as number
   }
 
-  const webViewRef = useRef<WebView>(null)
   useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     style: defaultWebViewStyle
   })
 
-  const _messageList = useRef<any[]>([])
-  const handleUnload = () => {
-    // 这里是 WebView 销毁前执行的逻辑
-    bindmessage(getCustomEvent('messsage', {}, {
-      detail: {
-        data: _messageList.current
-      },
-      layoutRef: webViewRef
-    }))
+  if (!src) {
+    return null
   }
 
-  useEffect(() => {
-    if (currentPage) {
-      currentPage.__webViewUrl = src
-    }
-  }, [src, currentPage])
-
-  useEffect(() => {
-    // 组件卸载时执行
-    return () => {
-      handleUnload()
-    }
-  }, [])
   const _load = function (res: WebViewNavigationEvent) {
     const result = {
       type: 'load',
@@ -107,8 +85,33 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
     binderror(result)
   }
+  const injectedJavaScript = `
+    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+      var _documentTitle = document.title;
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'setTitle',
+        payload: {
+          _documentTitle: _documentTitle
+        }
+      }))
+      Object.defineProperty(document, 'title', {
+        set (val) {
+          _documentTitle = val
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'setTitle',
+            payload: {
+              _documentTitle: _documentTitle
+            }
+          }))
+        },
+        get () {
+          return _documentTitle
+        }
+      });
+    }
+  `
   const _changeUrl = function (navState: WebViewNavigation) {
-    if (currentPage) {
+    if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
       currentPage.__webViewUrl = navState.url
     }
   }
@@ -121,43 +124,79 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       if (typeof nativeEventData === 'string') {
         data = JSON.parse(nativeEventData)
       }
-    } catch (e) {
-      data = {}
-    }
+    } catch (e) {}
+    const args = data.args
     const postData: PayloadData = data.payload || {}
-    switch (data.type) {
+    const params = Array.isArray(args) ? args : [postData]
+    const type = data.type
+    switch (type) {
+      case 'setTitle':
+        { // case下不允许直接声明，包个块解决该问题
+          const title = postData._documentTitle
+          if (title) {
+            const navigation = getFocusedNavigation()
+            navigation && navigation.setOptions({ title })
+          }
+        }
+        break
       case 'postMessage':
-        _messageList.current.push(postData.data)
+        bindmessage && bindmessage(getCustomEvent('messsage', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
+          detail: {
+            data: params[0]?.data
+          }
+        }))
         asyncCallback = Promise.resolve({
           errMsg: 'invokeWebappApi:ok'
         })
         break
       case 'navigateTo':
-        asyncCallback = navObj.navigateTo(postData)
+        asyncCallback = navObj.navigateTo(...params)
         break
       case 'navigateBack':
-        asyncCallback = navObj.navigateBack(postData)
+        asyncCallback = navObj.navigateBack(...params)
         break
       case 'redirectTo':
-        asyncCallback = navObj.redirectTo(postData)
+        asyncCallback = navObj.redirectTo(...params)
         break
       case 'switchTab':
-        asyncCallback = navObj.switchTab(postData)
+        asyncCallback = navObj.switchTab(...params)
         break
       case 'reLaunch':
-        asyncCallback = navObj.reLaunch(postData)
+        asyncCallback = navObj.reLaunch(...params)
+        break
+      default:
+        if (type) {
+          const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type]
+          if (isFunction(implement)) {
+            asyncCallback = Promise.resolve(implement(...params))
+          } else {
+            /* eslint-disable prefer-promise-reject-errors */
+            asyncCallback = Promise.reject({
+              errMsg: `未在apiImplementations中配置${type}方法`
+            })
+          }
+        }
         break
     }
 
     asyncCallback && asyncCallback.then((res: any) => {
       if (webViewRef.current?.postMessage) {
         const test = JSON.stringify({
-          type: data.type,
+          type,
           callbackId: data.callbackId,
           result: res
         })
         webViewRef.current.postMessage(test)
       }
+    }).catch((error: any) => {
+      if (webViewRef.current?.postMessage) {
+        const test = JSON.stringify({
+          type,
+          callbackId: data.callbackId,
+          error
+        })
+        webViewRef.current.postMessage(test)
+      }
     })
   }
   const events = {}
@@ -172,21 +211,17 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       onError: _error
     })
   }
-  if (bindmessage) {
-    extendObject(events, {
-      onMessage: _message
-    })
-  }
-  return (<Portal>
-    <WebView
-      style={defaultWebViewStyle}
-      source={{ uri: src }}
-      ref={webViewRef}
-      {...events}
-      onNavigationStateChange={_changeUrl}
-      javaScriptEnabled={true}
-    ></WebView>
-  </Portal>)
+  extendObject(events, {
+    onMessage: _message
+  })
+
+  return createElement(Portal, null, createElement(WebView, extendObject({
+    style: defaultWebViewStyle,
+    source: { uri: src },
+    ref: webViewRef,
+    javaScriptEnabled: true,
+    onNavigationStateChange: _changeUrl
+  }, events)))
 })
 
 _WebView.displayName = 'MpxWebview'

package/lib/runtime/components/react/pickerFaces.ts

@@ -8,6 +8,7 @@ export type Faces = {
   deg: number
   offsetY: number
   opacity: number
+  scale: number
   screenHeight: number
 }
 
@@ -33,7 +34,7 @@ export const createFaces = (
     const maxStep = Math.trunc((visibleCount + 2) / 2) // + 2 because there are 2 more faces at 90 degrees
     const stepDegree = 90 / maxStep
 
-    const result = []
+    const result: number[] = []
     for (let i = 1; i <= maxStep; i++) {
       result.push(i * stepDegree)
     }
@@ -62,17 +63,17 @@ export const createFaces = (
   const getOpacity = (index: number) => {
     const map: Record<number, number> = {
       0: 0,
-      1: 0.2,
-      2: 0.35,
-      3: 0.45,
-      4: 0.5
+      1: 0.8,
+      2: 0.9
     }
-    return map[index] ?? Math.min(1, map[4] + index * 0.5)
+    return map[index] ?? Math.min(1, map[2] + index * 0.05)
   }
 
   const degrees = getDegreesRelativeCenter()
   const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees)
 
+  const scales = [0.973, 0.9, 0.8]
+
   return [
     // top items
     ...degrees
@@ -82,13 +83,14 @@ export const createFaces = (
           deg: degree,
           opacity: getOpacity(degrees.length - 1 - index),
           offsetY: -1 * offsets[index],
+          scale: scales[index],
           screenHeight: screenHeight[index]
         }
       })
       .reverse(),
 
     // center item
-    { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
+    { index: 0, deg: 0, opacity: 1, offsetY: 0, scale: 1, screenHeight: itemHeight },
 
     // bottom items
     ...degrees.map<Faces>((degree, index) => {
@@ -97,6 +99,7 @@ export const createFaces = (
         deg: -1 * degree,
         opacity: getOpacity(degrees.length - 1 - index),
         offsetY: offsets[index],
+        scale: scales[index],
         screenHeight: screenHeight[index]
       }
     })

package/lib/runtime/components/react/pickerVIewContext.ts

@@ -0,0 +1,27 @@
+import { createContext, useContext } from 'react'
+import { SharedValue } from 'react-native-reanimated'
+
+type ContextValue = SharedValue<number>
+
+export const PickerViewColumnAnimationContext = createContext<
+    ContextValue | undefined
+>(undefined)
+
+export const usePickerViewColumnAnimationContext = () => {
+  const value = useContext(PickerViewColumnAnimationContext)
+  if (value === undefined) {
+    throw new Error(
+      'usePickerViewColumnAnimationContext must be called from within PickerViewColumnAnimationContext.Provider!'
+    )
+  }
+  return value
+}
+
+export const PickerViewStyleContext = createContext<
+    Record<string, any> | undefined
+>(undefined)
+
+export const usePickerViewStyleContext = () => {
+  const value = useContext(PickerViewStyleContext)
+  return value
+}

package/lib/runtime/components/react/pickerViewIndicator.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+
+type IndicatorProps = {
+  itemHeight: number
+  indicatorItemStyle?: StyleProp<ViewStyle>
+  indicatorContainerStyle?: StyleProp<ViewStyle>
+}
+
+const _PickerViewIndicator = ({ itemHeight, indicatorItemStyle, indicatorContainerStyle }: IndicatorProps) => {
+  return (
+    <View style={[styles.indicatorContainer, indicatorContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, indicatorItemStyle]} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  indicatorContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 200
+  },
+  selection: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.05)',
+    alignSelf: 'stretch'
+  }
+})
+
+_PickerViewIndicator.displayName = 'MpxPickerViewIndicator'
+export default _PickerViewIndicator