@mpxjs/webpack-plugin 2.10.3 → 2.10.4-beta.10

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

@@ -76,36 +76,36 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 
 interface VideoProps {
-  src: string;
-  autoplay?: boolean;
-  loop?: boolean;
-  muted?: boolean;
-  controls?: boolean;
-  poster?: string;
-  style?: ViewStyle;
-  'initial-time'?: number;
-  'object-fit'?: null | 'contain' | 'fill' | 'cover';
-  'is-drm'?: boolean;
-  'provision-url'?: string;
-  'certificate-url'?: string;
-  'license-url'?: string;
-  'preferred-peak-bit-rate'?: number;
-  'enable-auto-rotation'?: number;
-  'enable-var'?: boolean;
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
-  bindplay?: (event: Record<string, any>) => void;
-  bindpause?: (event: Record<string, any>) => void;
-  bindended?: (event: Record<string, any>) => void;
-  bindtimeupdate?: (event: Record<string, any>) => void;
-  bindfullscreenchange?: (event: Record<string, any>) => void;
-  bindwaiting?: (event: Record<string, any>) => void;
-  binderror?: (event: Record<string, any>) => void;
-  bindloadedmetadata?: (event: Record<string, any>) => void;
-  bindcontrolstoggle?: (event: Record<string, any>) => void;
-  bindseekcomplete?: (event: Record<string, any>) => void;
+  src: string
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+  controls?: boolean
+  poster?: string
+  style?: ViewStyle
+  'initial-time'?: number
+  'object-fit'?: null | 'contain' | 'fill' | 'cover'
+  'is-drm'?: boolean
+  'provision-url'?: string
+  'certificate-url'?: string
+  'license-url'?: string
+  'preferred-peak-bit-rate'?: number
+  'enable-auto-rotation'?: number
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  bindplay?: (event: Record<string, any>) => void
+  bindpause?: (event: Record<string, any>) => void
+  bindended?: (event: Record<string, any>) => void
+  bindtimeupdate?: (event: Record<string, any>) => void
+  bindfullscreenchange?: (event: Record<string, any>) => void
+  bindwaiting?: (event: Record<string, any>) => void
+  binderror?: (event: Record<string, any>) => void
+  bindloadedmetadata?: (event: Record<string, any>) => void
+  bindcontrolstoggle?: (event: Record<string, any>) => void
+  bindseekcomplete?: (event: Record<string, any>) => void
 }
 interface VideoInfoData {
   naturalSize: {
@@ -233,7 +233,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
         {},
         {
           detail: {
-            position: Platform.OS === 'android' ? seekTime * 1000 : seekTime
+            position: __mpx_mode__ !== 'ios' ? seekTime * 1000 : seekTime
           },
           layoutRef
         },
@@ -326,14 +326,16 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
   if (isDrm) {
     source.drm = {
       type: DRMType.FAIRPLAY,
-      certificateUrl: Platform.OS === 'android' ? provisionUrl : certificateUrl,
+      certificateUrl: __mpx_mode__ !== 'ios' ? provisionUrl : certificateUrl,
       licenseServer: licenseUrl
     }
   }
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         style: styles.video,
         ref: videoRef,
@@ -360,8 +362,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
         onControlsVisibilityChange:
           bindcontrolstoggle && handleAndroidControlsVisibilityChange,
         onLoad: handleVideoLoad
-      },
-      layoutProps
+      }
     ),
     [
       'src',

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

@@ -13,7 +13,7 @@ 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, useHover } from './utils'
-import { error } from '@mpxjs/utils'
+import { error, isFunction } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
 import Portal from './mpx-portal'
@@ -36,6 +36,8 @@ export interface _ViewProps extends ViewProps {
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindtransitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  catchtransitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 type Handler = (...args: any[]) => void
@@ -683,7 +685,9 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
-    animation
+    animation,
+    catchtransitionend,
+    bindtransitionend
   } = props
 
   // 默认样式
@@ -737,28 +741,48 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   const viewStyle = extendObject({}, innerStyle, layoutStyle)
-
-  const { enableStyleAnimation, animationStyle } = useAnimationHooks({
-    enableAnimation,
-    animation,
-    style: viewStyle
-  })
+  const transitionend = isFunction(catchtransitionend)
+    ? catchtransitionend
+    : isFunction(bindtransitionend)
+      ? bindtransitionend
+      : null
+  const { enableStyleAnimation, animationStyle } = useAnimationHooks(
+    transitionend
+      ? {
+          layoutRef,
+          animation,
+          enableAnimation,
+          style: viewStyle,
+          transitionend
+        }
+      : {
+          layoutRef,
+          animation,
+          enableAnimation,
+          style: viewStyle
+        })
 
   const innerProps = useInnerProps(
-    props,
-    extendObject({
-      ref: nodeRef,
-      style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
-    },
-    layoutProps
-    ), [
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        ref: nodeRef,
+        style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
+      }
+
+    ),
+    [
       'hover-start-time',
       'hover-stay-time',
       'hover-style',
       'hover-class'
-    ], {
+    ],
+    {
       layoutRef
-    })
+    }
+  )
 
   const childNode = wrapWithChildren(props, {
     hasVarDec,

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

@@ -122,14 +122,17 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
   const navigation = useNavigation()
 
-  useEffect(() => {
-    const beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
-    return () => {
-      if (isFunction(beforeRemoveSubscription)) {
-        beforeRemoveSubscription()
-      }
-    }
-  }, [])
+  // useEffect(() => {
+  //   let beforeRemoveSubscription:any
+  //   if (__mpx_mode__ !== 'ios') {
+  //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+  //   }
+  //   return () => {
+  //     if (isFunction(beforeRemoveSubscription)) {
+  //       beforeRemoveSubscription()
+  //     }
+  //   }
+  // }, [])
 
   useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     style: defaultWebViewStyle
@@ -140,7 +143,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
 
   const _reload = function () {
-    if (__mpx_mode__ === 'android') {
+    if (__mpx_mode__ !== 'ios') {
       fristLoaded.current = false // 安卓需要重新设置
     }
     setPageLoadErr(false)
@@ -186,7 +189,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
 
   const _onLoadProgress = function (event: WebViewProgressEvent) {
-    if (__mpx_mode__ === 'android') {
+    if (__mpx_mode__ !== 'ios') {
       canGoBack.current = event.nativeEvent.canGoBack
     }
   }
@@ -209,7 +212,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         { // case下不允许直接声明，包个块解决该问题
           const title = postData._documentTitle?.trim()
           if (title !== undefined) {
-            navigation && navigation.setOptions({ title })
+            navigation && navigation.setPageConfig({ navigationBarTitleText: title })
           }
         }
         break
@@ -302,7 +305,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
   }
   const onLoadEnd = function (res: WebViewEvent) {
-    if (__mpx_mode__ === 'android') {
+    if (__mpx_mode__ !== 'ios') {
       res.persist()
       setTimeout(() => {
         onLoadEndHandle(res)

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

@@ -1,57 +1,87 @@
-import { MutableRefObject } from 'react'
+import { RefObject, MutableRefObject } from 'react'
 import { NativeSyntheticEvent } from 'react-native'
 
-type LayoutRef = MutableRefObject<any>
+type LayoutRef = MutableRefObject<{
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  offsetLeft?: number
+  offsetTop?: number
+} | null>
 
-type SetTimeoutReturnType = ReturnType<typeof setTimeout>
+type InnerRef = MutableRefObject<{
+  startTimer: {
+    bubble: ReturnType<typeof setTimeout> | null
+    capture: ReturnType<typeof setTimeout> | null
+  }
+  mpxPressInfo: {
+    detail: {
+      x: number
+      y: number
+    }
+  }
+}>
+
+type PropsRef = MutableRefObject<Props>
+
+type EventType = 'bubble' | 'capture'
 
 type Props = Record<string, any>
 
-type AdditionalProps = Record<string, any>;
+type AdditionalProps = Record<string, any>
 
-type RemoveProps = string[];
+type RemoveProps = string[]
 
 type NativeTouchEvent = NativeSyntheticEvent<NativeEvent>
 
 type Navigation = Record<string, any> | undefined
 
+interface EventConfigDetail {
+  bubble: string[],
+  capture: string[],
+  hasCatch: boolean
+}
+
+type EventConfig = {
+  innerRef: InnerRef
+  propsRef: PropsRef
+  disableTap: boolean
+  layoutRef: LayoutRef
+  navigation: Navigation
+  [index: string]: EventConfigDetail
+}
+
+interface RawConfig {
+  layoutRef?: LayoutRef
+  disableTap?: boolean
+  [index: string]: any
+}
+
 interface NativeEvent {
-  timestamp: number;
-  pageX: number;
-  pageY: number;
+  timestamp: number
+  pageX: number
+  pageY: number
   touches: TouchPoint[]
   changedTouches: TouchPoint[]
 }
 
 interface TouchPoint {
-  identifier: number;
-  pageX: number;
-  pageY: number;
-  clientX: number;
-  clientY: number;
-  locationX?: number;
-  locationY?: number;
+  identifier: number
+  pageX: number
+  pageY: number
+  clientX: number
+  clientY: number
+  locationX?: number
+  locationY?: number
 }
 
-interface InnerRef {
-  startTimer: {
-    bubble: null | ReturnType<typeof setTimeout>;
-    capture: null | ReturnType<typeof setTimeout>;
-  };
-  mpxPressInfo: {
-    detail: {
-      x: number;
-      y: number;
-    };
-  };
-}
-interface UseInnerPropsConfig {
-  layoutRef?: LayoutRef;
-  disableTouch?: boolean;
-  disableTap?: boolean
-}
 interface DataSetType {
-  [key: string]: string;
+  [key: string]: string
+}
+
+interface ExtendedNativeTouchEvent extends NativeTouchEvent {
+  _stoppedEventTypes?: Set<string>
 }
 
 export {
@@ -62,7 +92,11 @@ export {
   UseInnerPropsConfig,
   InnerRef,
   LayoutRef,
-  SetTimeoutReturnType,
+  PropsRef,
   DataSetType,
-  Navigation
+  Navigation,
+  ExtendedNativeTouchEvent,
+  EventConfig,
+  RawConfig,
+  EventType
 }

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

@@ -1,4 +1,4 @@
-declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios'
+declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony'
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
   export function isFunction (fn: unknown): boolean

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

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react'
-import { TransformsStyle } from 'react-native'
+import type { MutableRefObject } from 'react'
+import type { NativeSyntheticEvent, TransformsStyle } from 'react-native'
 import {
   Easing,
   useSharedValue,
@@ -9,11 +10,10 @@ import {
   withDelay,
   makeMutable,
   cancelAnimation,
-  SharedValue,
-  WithTimingConfig,
-  AnimationCallback
+  runOnJS
 } from 'react-native-reanimated'
-import { error, hasOwn } from '@mpxjs/utils'
+import type { AnimationCallback, WithTimingConfig, SharedValue, AnimatableValue } from 'react-native-reanimated'
+import { error, hasOwn, collectDataset } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -175,9 +175,8 @@ function getTransformObj (transforms: { [propName: string]: string | number }[])
   }, {} as { [propName: string]: string | number })
 }
 
-export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean }) {
-  const { style = {}, animation, enableAnimation } = props
-
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
+  const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props
   const enableStyleAnimation = enableAnimation || !!animation
   const enableAnimationRef = useRef(enableStyleAnimation)
   if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -285,10 +284,31 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       })
     })
   }
+  function withTimingCallback (finished?: boolean, current?: AnimatableValue, duration?: number) {
+    if (!transitionend) return
+    const target = {
+      id: animation?.id || -1,
+      dataset: collectDataset(props),
+      offsetLeft: layoutRef?.current?.offsetLeft || 0,
+      offsetTop: layoutRef?.current?.offsetTop || 0
+    }
+    transitionend({
+      type: 'transitionend',
+      detail: { elapsedTime: duration, finished, current },
+      target,
+      currentTarget: target,
+      timeStamp: Date.now()
+    })
+  }
   // 创建单个animation
   function getAnimation ({ key, value }: { key: string, value: string|number }, { delay, duration, easing }: ExtendWithTimingConfig, callback?: AnimationCallback) {
     const animation = typeof callback === 'function'
-      ? withTiming(value, { duration, easing }, callback)
+      ? withTiming(value, { duration, easing }, (finished, current) => {
+        callback(finished, current)
+        if (transitionend && finished) {
+          runOnJS(withTimingCallback)(finished, current, duration)
+        }
+      })
       : withTiming(value, { duration, easing })
     return delay ? withDelay(delay, animation) : animation
   }

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

@@ -20,10 +20,11 @@ export const HIDDEN_STYLE = {
   opacity: 0
 }
 
-declare const __mpx_mode__: 'ios' | 'android'
+declare const __mpx_mode__: 'ios' | 'android' | 'harmony'
 
 export const isIOS = __mpx_mode__ === 'ios'
 export const isAndroid = __mpx_mode__ === 'android'
+export const isHarmony = __mpx_mode__ === 'harmony'
 
 const varDecRegExp = /^--/
 const varUseRegExp = /var\(/
@@ -98,7 +99,7 @@ export function isText (ele: ReactNode): ele is ReactElement {
   if (isValidElement(ele)) {
     const displayName = (ele.type as ExtendedFunctionComponent)?.displayName
     const isCustomText = (ele.type as ExtendedFunctionComponent)?.isCustomText
-    return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'Text' || !!isCustomText
+    return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'MpxInlineText' || displayName === 'Text' || !!isCustomText
   }
   return false
 }
@@ -532,7 +533,18 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       if (enableOffset) {
         nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
           const { y: navigationY = 0 } = navigation?.layout || {}
-          layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY }
+          layoutRef.current = {
+            x,
+            y: y - navigationY,
+            width,
+            height,
+            offsetLeft,
+            offsetTop: offsetTop - navigationY,
+            _x: x,
+            _y: y,
+            _offsetLeft: offsetLeft,
+            _offsetTop: offsetTop
+          }
         })
       }
       onLayout && onLayout(e)