@mpxjs/webpack-plugin 2.9.69-beta.4 → 2.9.69-beta.5

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

@@ -42,7 +42,7 @@ export interface PortalManagerContextValue {
 export interface PortalContextValue {
   mount: (children: React.ReactNode, key?: number, pageId?: number|null) => number| undefined
   update: (key: number, children: React.ReactNode, pageId?: number|null) => void
-  unmount: (key: number, pageId?: number|null) => void
+  unmount: (key: number) => void
   manager?: PortalManagerContextValue
 }
 

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

@@ -45,8 +45,8 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { GestureDetector } from 'react-native-gesture-handler'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHoverStyle } 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'
@@ -223,7 +223,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const formContext = useContext(FormContext)
 
-  const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled })
+  const enableHover = hoverClass !== 'none'
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled })
 
   let submitFn: () => void | undefined
   let resetFn: () => void | undefined
@@ -235,15 +236,13 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   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})`
 
@@ -251,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,
@@ -287,7 +286,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     {},
     defaultStyle,
     style,
-    applyHoverEffect ? hoverStyle : {}
+    isHover ? hoverStyle : {}
   )
 
   const {
@@ -414,8 +413,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     )
   )
 
-  return enableHoverStyle
-    ? createElement(GestureDetector, { gesture }, baseButton)
+  return enableHover
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, baseButton)
     : baseButton
 })
 

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

@@ -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

@@ -69,6 +69,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   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)
@@ -125,6 +126,19 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   })
   const debounceResetScrollPosition = useDebounceCallback(stableResetScrollPosition, 10)
 
+  const clearTimerScrollTo = () => {
+    if (timerScrollTo.current) {
+      clearTimeout(timerScrollTo.current)
+      timerScrollTo.current = null
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      clearTimerScrollTo()
+    }
+  }, [])
+
   useEffect(() => {
     if (
       !scrollViewRef.current ||
@@ -138,7 +152,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     ) {
       return
     }
-    setTimeout(() => {
+    clearTimerScrollTo()
+    timerScrollTo.current = setTimeout(() => {
       scrollViewRef.current?.scrollTo({
         x: 0,
         y: getYofIndex(initialIndex),
@@ -151,7 +166,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   const onContentSizeChange = (_w: number, h: number) => {
     const y = getYofIndex(initialIndex)
     if (y <= h) {
-      setTimeout(() => {
+      clearTimerScrollTo()
+      timerScrollTo.current = setTimeout(() => {
         scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
       }, 0)
     }

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

@@ -23,7 +23,7 @@ const PortalConsumer = ({ manager, children } :PortalConsumerProps): JSX.Element
     const curPageId = navigation?.pageId
     keyRef.current = manager.mount(children, undefined, curPageId)
     return () => {
-      manager.unmount(keyRef.current, curPageId)
+      manager.unmount(keyRef.current)
     }
   }, [])
   return null

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

@@ -26,6 +26,7 @@ export type Operation =
 // events
 const addType = 'MPX_RN_ADD_PORTAL'
 const removeType = 'MPX_RN_REMOVE_PORTAL'
+const updateType = 'MPX_RN_UPDATE_PORTAL'
 // fix react native web does not support DeviceEventEmitter
 const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter()
 
@@ -46,6 +47,10 @@ class PortalGuard {
   remove = (key: number) => {
     TopViewEventEmitter.emit(removeType, key)
   }
+
+  update = (key: number, e: ReactNode) => {
+    TopViewEventEmitter.emit(updateType, key, e)
+  }
 }
 /**
  * portal
@@ -57,6 +62,7 @@ const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
   const _queue = useRef<Operation[]>([])
   const _addType = useRef<EventSubscription | null>(null)
   const _removeType = useRef<EventSubscription | null>(null)
+  const _updateType = useRef<EventSubscription | null>(null)
   const manager = useRef<PortalManagerContextValue | null>(null)
   let currentPageId: number | undefined
   const _mount = (children: ReactNode, _key?: number, curPageId?: number) => {
@@ -68,26 +74,17 @@ const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
     const key = _key || _nextKey.current++
     if (manager.current) {
       manager.current.mount(key, children)
-    } else {
-      _queue.current.push({ type: 'mount', key, children })
     }
     return key
   }
 
-  const _unmount = (key: number, curPageId?: number) => {
-    const navigation = getFocusedNavigation()
-    const pageId = navigation?.pageId
-    if (pageId !== (curPageId ?? currentPageId)) {
-      return
-    }
+  const _unmount = (key: number) => {
     if (manager.current) {
       manager.current.unmount(key)
-    } else {
-      _queue.current.push({ type: 'unmount', key })
     }
   }
 
-  const _update = (key: number, children: ReactNode, curPageId?: number) => {
+  const _update = (key: number, children?: ReactNode, curPageId?: number) => {
     const navigation = getFocusedNavigation()
     const pageId = navigation?.pageId
     if (pageId !== (curPageId ?? currentPageId)) {
@@ -95,17 +92,6 @@ const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
     }
     if (manager.current) {
       manager.current.update(key, children)
-    } else {
-      const op: Operation = { type: 'mount', key, children }
-      const index = _queue.current.findIndex(
-        (o) => o.type === 'mount' || (o.type === 'update' && o.key === key)
-      )
-
-      if (index > -1) {
-        _queue.current[index] = op
-      } else {
-        _queue.current.push(op)
-      }
     }
   }
 
@@ -113,29 +99,13 @@ const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
     const navigation = getFocusedNavigation()
     currentPageId = navigation?.pageId
     _addType.current = TopViewEventEmitter.addListener(addType, _mount)
-    _removeType.current = TopViewEventEmitter.addListener(
-      removeType,
-      _unmount
-    )
+    _removeType.current = TopViewEventEmitter.addListener(removeType, _unmount)
+    _updateType.current = TopViewEventEmitter.addListener(updateType, _update)
+
     return () => {
-      while (_queue.current.length && manager.current) {
-        const action = _queue.current.pop()
-        if (!action) {
-          continue
-        }
-        // tslint:disable-next-line:switch-default
-        switch (action.type) {
-          case 'mount':
-            manager.current?.mount(action.key, action.children)
-            break
-          case 'update':
-            manager.current?.update(action.key, action.children)
-            break
-          case 'unmount':
-            manager.current?.unmount(action.key)
-            break
-        }
-      }
+      _addType.current?.remove()
+      _removeType.current?.remove()
+      _updateType.current?.remove()
     }
   }, [])
   return (
@@ -146,7 +116,6 @@ const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
         unmount: _unmount
       }}
       >
-      {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
       <View style={styles.container} collapsable={false}>
         {children}
       </View>

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

@@ -25,5 +25,6 @@ const Portal = ({ children }:PortalProps): JSX.Element => {
 Portal.Host = PortalHost
 Portal.add = portal.add
 Portal.remove = portal.remove
+Portal.update = portal.update
 
 export default Portal

package/lib/runtime/components/react/mpx-swiper-item.tsx

@@ -16,7 +16,7 @@ interface SwiperItemProps {
   'parent-height'?: number;
   children?: ReactNode;
   style?: Object;
-  customStyle: [];
+  customStyle: Object;
   itemIndex: number;
 }
 
@@ -24,6 +24,7 @@ interface ContextType {
   offset: SharedValue<number>;
   step: SharedValue<number>;
   scale: boolean;
+  dir: string;
 }
 
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
@@ -39,6 +40,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
   const offset = contextValue.offset || 0
   const step = contextValue.step || 0
   const scale = contextValue.scale || false
+  const dir = contextValue.dir || 'x'
   const { textProps } = splitProps(props)
   const nodeRef = useRef(null)
 
@@ -70,22 +72,26 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     'enable-offset',
     'style'
   ], { layoutRef })
-
   const itemAnimatedStyle = useAnimatedStyle(() => {
     if (!step.value) return {}
     const inputRange = [step.value, 0]
     const outputRange = [0.7, 1]
-    return {
-      transform: [{
+    // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现
+    const outerLayoutStyle = dir === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value }
+    const transformStyle = []
+    if (scale) {
+      transformStyle.push({
         scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
-      }]
+      })
     }
+    return Object.assign(outerLayoutStyle, {
+      transform: transformStyle
+    })
   })
-  const mergeStyle = [innerStyle, layoutStyle, { width: '100%', height: '100%' }, scale ? itemAnimatedStyle : {}].concat(customStyle)
   return (
     <Animated.View
       {...innerProps}
-      style={mergeStyle}
+      style={[innerStyle, layoutStyle, itemAnimatedStyle, customStyle]}
       data-itemId={props['item-id']}>
       {
         wrapChildren(