@mpxjs/webpack-plugin 2.9.69-beta.0 → 2.9.69-beta.2

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

@@ -12,9 +12,10 @@ 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, useHoverStyle } from './utils'
 import { error } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
+import { GestureDetector } from 'react-native-gesture-handler'
 
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
@@ -683,8 +684,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     animation
   } = props
 
-  const [isHover, setIsHover] = useState(false)
-
   // 默认样式
   const defaultStyle: ExtendedViewStyle = style.display === 'flex'
     ? {
@@ -695,6 +694,8 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       }
     : {}
 
+  const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime })
+
   const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
   const {
@@ -725,45 +726,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,
@@ -789,13 +751,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       ref: nodeRef,
       style: finalStyle
     },
-    layoutProps,
-    hoverStyle
-      ? {
-          bindtouchstart: onTouchStart,
-          bindtouchend: onTouchEnd
-        }
-      : {}
+    layoutProps
     ), [
       'hover-start-time',
       'hover-stay-time',
@@ -816,9 +772,13 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     enableFastImage
   })
 
-  return enableAnimation
-    ? createElement(Animated.View, innerProps, childNode)
+  const BaseComponent = enableAnimation
+    ? createElement(Animated.View, extendObject({}, innerProps, { style: finalStyle }), childNode)
     : createElement(View, innerProps, childNode)
+
+  return enableHoverStyle
+    ? createElement(GestureDetector, { gesture }, BaseComponent)
+    : BaseComponent
 })
 
 _View.displayName = 'MpxView'

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

@@ -1,4 +1,4 @@
-import { forwardRef, JSX, useRef, useContext, useMemo, createElement } from 'react'
+import { forwardRef, JSX, useRef, useContext, useMemo, createElement, useCallback, useEffect } from 'react'
 import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils'
 import { Portal } from '@ant-design/react-native'
 import { getCustomEvent } from './getInnerListeners'
@@ -6,8 +6,9 @@ import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab }
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { getCurrentPage, extendObject } from './utils'
-import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation } from 'react-native-webview/lib/WebViewTypes'
+import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent } from 'react-native-webview/lib/WebViewTypes'
 import { RouteContext } from './context'
+import { BackHandler } from 'react-native'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -56,6 +57,35 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     top: 0 as number,
     bottom: 0 as number
   }
+  const canGoBack = useRef<boolean>(false)
+
+  const onAndroidBackPress = useCallback(() => {
+    if (canGoBack.current) {
+      webViewRef.current?.goBack()
+      return true
+    }
+    return false
+  }, [canGoBack])
+
+  const beforeRemoveHandle = useCallback((e: Event) => {
+    if (canGoBack.current) {
+      webViewRef.current?.goBack()
+      e.preventDefault()
+    }
+  }, [canGoBack])
+
+  const navigation = getFocusedNavigation()
+
+  navigation?.addListener('beforeRemove', beforeRemoveHandle)
+
+  useEffect(() => {
+    if (__mpx_mode__ === 'android') {
+      BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress)
+      return () => {
+        BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress)
+      }
+    }
+  }, [])
 
   useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     style: defaultWebViewStyle
@@ -73,7 +103,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         src: res.nativeEvent?.url
       }
     }
-    bindload(result)
+    bindload?.(result)
   }
   const _error = function (res: WebViewErrorEvent) {
     const result = {
@@ -83,7 +113,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         src: ''
       }
     }
-    binderror(result)
+    binderror?.(result)
   }
   const injectedJavaScript = `
     if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
@@ -109,12 +139,26 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         }
       });
     }
+    true;
   `
+  const sendMessage = function (params: string) {
+    return `
+      window.mpxWebviewMessageCallback(${params})
+      true;
+    `
+  }
   const _changeUrl = function (navState: WebViewNavigation) {
     if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
+      canGoBack.current = navState.canGoBack
       currentPage.__webViewUrl = navState.url
     }
   }
+
+  const _onLoadProgress = function (event: WebViewProgressEvent) {
+    if (__mpx_mode__ === 'android') {
+      canGoBack.current = event.nativeEvent.canGoBack
+    }
+  }
   const _message = function (res: WebViewMessageEvent) {
     let data: MessageData = {}
     let asyncCallback
@@ -134,7 +178,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         { // case下不允许直接声明，包个块解决该问题
           const title = postData._documentTitle
           if (title) {
-            const navigation = getFocusedNavigation()
             navigation && navigation.setOptions({ title })
           }
         }
@@ -181,21 +224,21 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
     asyncCallback && asyncCallback.then((res: any) => {
       if (webViewRef.current?.postMessage) {
-        const test = JSON.stringify({
+        const result = JSON.stringify({
           type,
           callbackId: data.callbackId,
           result: res
         })
-        webViewRef.current.postMessage(test)
+        webViewRef.current.injectJavaScript(sendMessage(result))
       }
     }).catch((error: any) => {
       if (webViewRef.current?.postMessage) {
-        const test = JSON.stringify({
+        const result = JSON.stringify({
           type,
           callbackId: data.callbackId,
           error
         })
-        webViewRef.current.postMessage(test)
+        webViewRef.current.injectJavaScript(sendMessage(result))
       }
     })
   }
@@ -211,16 +254,17 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       onError: _error
     })
   }
-  extendObject(events, {
-    onMessage: _message
-  })
 
   return createElement(Portal, null, createElement(WebView, extendObject({
     style: defaultWebViewStyle,
     source: { uri: src },
     ref: webViewRef,
     javaScriptEnabled: true,
-    onNavigationStateChange: _changeUrl
+    onNavigationStateChange: _changeUrl,
+    onMessage: _message,
+    injectedJavaScript: injectedJavaScript,
+    onLoadProgress: _onLoadProgress,
+    allowsBackForwardNavigationGestures: true
   }, events)))
 })
 

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)
     }
@@ -54,6 +55,9 @@ export const createFaces = (
       for (let i = 0; i < index; i++) {
         offset += freeSpaces[i]
       }
+      if (index === 0) {
+        offset *= 0.6
+      }
       return offset
     }) as unknown as T
     return [screenHeights, offsets]
@@ -62,17 +66,19 @@ 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 // 0.35
+      // 3: 0.45, // 0.45
+      // 4: 0.5 // 0.5
     }
-    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 = [1, 0.925, 0.8]
+
   return [
     // top items
     ...degrees
@@ -82,13 +88,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 +104,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,18 @@
+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
+}

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+
+type OverlayProps = {
+  itemHeight: number
+  maskContainerStyle?: StyleProp<ViewStyle>
+}
+
+const _PickerViewMask = ({
+  itemHeight,
+  maskContainerStyle
+}: OverlayProps) => {
+  return (
+    <View style={[styles.overlayContainer, maskContainerStyle]} pointerEvents={'none'}>
+      <LinearGradient colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0.5)']} style={{ flex: 1 }} />
+      <View style={{ height: itemHeight }} />
+      <LinearGradient colors={['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)']} style={{ flex: 1 }} />
+    </View>
+  )
+}
+const styles = StyleSheet.create({
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 100
+  }
+})
+
+_PickerViewMask.displayName = 'MpxPickerViewMask'
+export default _PickerViewMask

package/lib/runtime/components/react/{pickerOverlay.tsx → pickerViewOverlay.tsx}

@@ -7,7 +7,7 @@ type OverlayProps = {
   overlayContainerStyle?: StyleProp<ViewStyle>
 }
 
-const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
+const _PickerViewOverlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
   return (
     <View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
       <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]} />
@@ -19,7 +19,8 @@ const styles = StyleSheet.create({
   overlayContainer: {
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    zIndex: 200
   },
   selection: {
     borderTopWidth: 1,
@@ -29,4 +30,5 @@ const styles = StyleSheet.create({
   }
 })
 
-export default React.memo(Overlay)
+_PickerViewOverlay.displayName = 'MpxPickerViewOverlay'
+export default _PickerViewOverlay

package/lib/runtime/components/react/types/global.d.ts

@@ -1,3 +1,4 @@
+declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios'
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
   export function isFunction (fn: unknown): boolean
@@ -20,7 +21,8 @@ declare module '@mpxjs/utils' {
       left: number
       right: number
     },
-    setOptions: (params: Record<string, any>) => void
+    setOptions: (params: Record<string, any>) => void,
+    addListener: (eventName: string, callback: (e: Event) => void) => void
   } | undefined
 }
 

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

@@ -110,7 +110,7 @@ const parseTransform = (transformStr: string) => {
   const values = parseValues(transformStr)
   const transform: {[propName: string]: string|number|number[]}[] = []
   values.forEach(item => {
-    const match = item.match(/([/\w]+)\(([^)]+)\)/)
+    const match = item.match(/([/\w]+)\((.+)\)/)
     if (match && match.length >= 3) {
       let key = match[1]
       const val = match[2]

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

@@ -1,11 +1,13 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image, Platform } from 'react-native'
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
-import { VarContext } from './context'
+import { VarContext, ScrollViewContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
-import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
+import type { AnyFunc, ExtendedFunctionComponent, ExtendedViewStyle } from './types/common'
+import { runOnJS } from 'react-native-reanimated'
+import { Gesture } from 'react-native-gesture-handler'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
@@ -18,6 +20,9 @@ export const HIDDEN_STYLE = {
   opacity: 0
 }
 
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
+
 const varDecRegExp = /^--.*/
 const varUseRegExp = /var\(/
 const calcUseRegExp = /calc\(/
@@ -497,6 +502,7 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       props.onLayout && props.onLayout(e)
     }
   }
+
   return {
     layoutRef,
     layoutStyle,
@@ -534,13 +540,14 @@ export const debounce = <T extends AnyFunc> (
 ): ((...args: Parameters<T>) => void) & { clear: () => void } => {
   let timer: any
   const wrapper = (...args: ReadonlyArray<any>) => {
-    clearTimeout(timer)
+    timer && clearTimeout(timer)
     timer = setTimeout(() => {
       func(...args)
     }, delay)
   }
   wrapper.clear = () => {
-    clearTimeout(timer)
+    timer && clearTimeout(timer)
+    timer = null
   }
   return wrapper
 }
@@ -610,3 +617,66 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
     return acc
   }, {})
 }
+
+export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disabled } : { hoverStyle?: ExtendedViewStyle, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
+  const enableHoverStyle = !!hoverStyle
+  const enableHoverStyleRef = useRef(enableHoverStyle)
+  if (enableHoverStyleRef.current !== enableHoverStyle) {
+    throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
+  }
+
+  if (!enableHoverStyle) return { enableHoverStyle }
+
+  const gestureRef = useContext(ScrollViewContext).gestureRef
+  const [isHover, setIsHover] = useState(false)
+  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)
+  }
+
+  const gesture = useMemo(() => {
+    return Gesture.Pan()
+      .onTouchesDown(() => {
+        'worklet'
+        if (disabled) return
+        runOnJS(setStartTimer)()
+      })
+      .onTouchesUp(() => {
+        'worklet'
+        if (disabled) return
+        runOnJS(setStayTimer)()
+      })
+  }, [disabled])
+
+  if (gestureRef) {
+    gesture.simultaneousWithExternalGesture(gestureRef)
+  }
+
+  return {
+    isHover,
+    gesture,
+    enableHoverStyle
+  }
+}

package/lib/style-compiler/index.js

@@ -4,7 +4,6 @@ const loadPostcssConfig = require('./load-postcss-config')
 const { MPX_ROOT_VIEW, MPX_DISABLE_EXTRACTOR_CACHE } = require('../utils/const')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
-const pluginCondStrip = require('./plugins/conditional-strip')
 const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
 const cssArrayList = require('./plugins/css-array-list')
@@ -58,9 +57,9 @@ module.exports = function (css, map) {
       plugins.push(transSpecial({ id }))
     }
 
-    plugins.push(pluginCondStrip({
-      defs
-    }))
+    // plugins.push(pluginCondStrip({
+    //   defs
+    // }))
 
     for (const item of transRpxRules) {
       const {