@mpxjs/webpack-plugin 2.10.3 → 2.10.4

package/lib/runtime/components/react/{mpx-picker-view-column.tsx → mpx-picker-view-column/index.tsx}

@@ -1,22 +1,23 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
-import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, StyleSheet, View } from 'react-native'
+import { GestureResponderEvent, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, StyleSheet, View } from 'react-native'
 import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS } from './utils'
-import useNodesRef, { HandlerRef } from './useNodesRef'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS } from '../utils'
+import useNodesRef, { HandlerRef } from '../useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
-import MpxPickerVIewColumnItem from './mpx-picker-view-column-item'
-import { PickerViewColumnAnimationContext } from './pickerVIewContext'
+import MpxPickerVIewColumnItem from './pickerViewColumnItem'
+import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext'
+import { calcHeightOffsets } from './pickerViewFaces'
 
 interface ColumnProps {
-  children?: React.ReactNode
+  columnIndex: number
   columnData: React.ReactNode[]
   initialIndex: number
   onSelectChange: Function
   style: {
     [key: string]: any
   }
-  'enable-var': boolean
+  'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
   wrapperStyle: {
     height: number
@@ -24,7 +25,6 @@ interface ColumnProps {
   }
   pickerMaskStyle: Record<string, any>
   pickerIndicatorStyle: Record<string, any>
-  columnIndex: number
 }
 
 const visibleCount = 5
@@ -62,10 +62,11 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   const [itemRawH, setItemRawH] = useState(itemHeight)
   const maxIndex = useMemo(() => columnData.length - 1, [columnData])
   const prevScrollingInfo = useRef({ index: initialIndex, y: 0 })
-  const touching = useRef(false)
+  const dragging = useRef(false)
   const scrolling = useRef(false)
   const timerResetPosition = useRef<NodeJS.Timeout | null>(null)
   const timerScrollTo = useRef<NodeJS.Timeout | null>(null)
+  const timerClickOnce = useRef<NodeJS.Timeout | null>(null)
   const activeIndex = useRef(initialIndex)
   const prevIndex = usePrevious(initialIndex)
   const prevMaxIndex = usePrevious(maxIndex)
@@ -113,6 +114,13 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }
   }, [])
 
+  const clearTimerClickOnce = useCallback(() => {
+    if (timerClickOnce.current) {
+      clearTimeout(timerClickOnce.current)
+      timerClickOnce.current = null
+    }
+  }, [])
+
   useEffect(() => {
     return () => {
       clearTimerResetPosition()
@@ -124,7 +132,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     if (
       !scrollViewRef.current ||
       !itemRawH ||
-      touching.current ||
+      dragging.current ||
       scrolling.current ||
       prevIndex == null ||
       initialIndex === prevIndex ||
@@ -140,8 +148,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
         y: initialIndex * itemRawH,
         animated: false
       })
-    }, isAndroid ? 200 : 0)
-    activeIndex.current = initialIndex
+      activeIndex.current = initialIndex
+    }, isIOS ? 0 : 200)
   }, [itemRawH, maxIndex, initialIndex])
 
   const onContentSizeChange = useCallback((_w: number, h: number) => {
@@ -150,6 +158,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
       clearTimerScrollTo()
       timerScrollTo.current = setTimeout(() => {
         scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
+        activeIndex.current = initialIndex
       }, 0)
     }
   }, [itemRawH, initialIndex])
@@ -163,7 +172,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   }, [itemRawH])
 
   const resetScrollPosition = useCallback((y: number) => {
-    if (touching.current || scrolling.current) {
+    if (dragging.current || scrolling.current) {
       return
     }
     scrolling.current = true
@@ -191,7 +200,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   const onScrollBeginDrag = useCallback(() => {
     isIOS && clearTimerResetPosition()
-    touching.current = true
+    dragging.current = true
     prevScrollingInfo.current = {
       index: activeIndex.current,
       y: activeIndex.current * itemRawH
@@ -199,7 +208,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   }, [itemRawH])
 
   const onScrollEndDrag = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    touching.current = false
+    dragging.current = false
     if (isIOS) {
       const { y } = e.nativeEvent.contentOffset
       if (y % itemRawH === 0) {
@@ -220,7 +229,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }
     const { y } = e.nativeEvent.contentOffset
     const { index: prevIndex, y: _y } = prevScrollingInfo.current
-    if (touching.current || scrolling.current) {
+    if (dragging.current || scrolling.current) {
       if (Math.abs(y - _y) >= itemRawH) {
         const currentId = getIndex(y)
         if (currentId !== prevIndex) {
@@ -235,6 +244,47 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }
   }, [itemRawH, getIndex])
 
+  const offsetHeights = useMemo(() => calcHeightOffsets(itemRawH), [itemRawH])
+
+  const calcOffset = useCallback((y: number): number | false => {
+    const baselineY = activeIndex.current * itemRawH + pickerH / 2
+    const diff = Math.abs(y - baselineY)
+    const positive = y - baselineY > 0 ? 1 : -1
+    const [h1, h2, h3] = offsetHeights
+    if (diff > h1 && diff < h3) {
+      if (diff < h2) {
+        return 1 * positive
+      } else {
+        return 2 * positive
+      }
+    }
+    return false
+  }, [offsetHeights])
+
+  /**
+   * 和小程序表现对齐，点击（不滑动）非焦点选项自动滚动到对应位置
+   */
+  const onClickOnceItem = useCallback((e: GestureResponderEvent) => {
+    const { locationY } = e.nativeEvent || {}
+    const offsetIndex = calcOffset(locationY)
+    if (dragging.current || !offsetIndex) {
+      return
+    }
+    const targetIndex = activeIndex.current + offsetIndex
+    if (targetIndex < 0 || targetIndex > maxIndex) {
+      return
+    }
+    const y = targetIndex * itemRawH
+    scrollViewRef.current?.scrollTo({ x: 0, y, animated: true })
+    if (isAndroid) {
+      // Android scrollTo 不会自动触发 onMomentumScrollEnd，需要手动触发
+      clearTimerClickOnce()
+      timerClickOnce.current = setTimeout(() => {
+        onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } })
+      }, 250)
+    }
+  }, [itemRawH, maxIndex, calcOffset, onMomentumScrollEnd])
+
   const renderInnerchild = () =>
     columnData.map((item: React.ReactElement, index: number) => {
       return (
@@ -264,6 +314,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           showsHorizontalScrollIndicator={false}
           scrollEventThrottle={16}
           {...layoutProps}
+          onTouchStart={onClickOnceItem}
           style={[{ width: '100%' }]}
           decelerationRate="fast"
           snapToOffsets={snapToOffsets}
@@ -297,9 +348,9 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   return (
     <View style={[styles.wrapper, normalStyle]}>
-      {renderScollView()}
-      {renderMask()}
-      {renderIndicator()}
+        {renderScollView()}
+        {renderMask()}
+        {renderIndicator()}
     </View>
   )
 })

package/lib/runtime/components/react/{mpx-picker-view-column-item.tsx → mpx-picker-view-column/pickerViewColumnItem.tsx}

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react'
 import { LayoutChangeEvent } from 'react-native'
 import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
-import { wrapChildren, extendObject } from './utils'
-import { createFaces } from './pickerFaces'
-import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from './pickerVIewContext'
+import { extendObject } from '../utils'
+import { createFaces } from './pickerViewFaces'
+import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext'
 
 interface PickerColumnItemProps {
   item: React.ReactElement
@@ -65,9 +65,12 @@ const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
   return (
     <Reanimated.View
       key={strKey}
-      style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}
+      style={[
+        { height: itemHeight, width: itemWidth, pointerEvents: 'none' },
+        animatedStyles
+      ]}
     >
-      {realItem}
+        {realItem}
     </Reanimated.View>
   )
 }

package/lib/runtime/components/react/{pickerFaces.ts → mpx-picker-view-column/pickerViewFaces.ts}

@@ -25,6 +25,13 @@ export const calcPickerHeight = (faces: Faces[], itemHeight: number) => {
   return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0)
 }
 
+export const calcHeightOffsets = (itemHeight: number) => {
+  const h1 = itemHeight / 2
+  const h2 = h1 + calcHeight(30, itemHeight)
+  const h3 = h2 + calcHeight(60, itemHeight)
+  return [h1, h2, h3]
+}
+
 export const createFaces = (
   itemHeight: number,
   visibleCount: number

package/lib/runtime/components/react/mpx-popup/index.tsx

@@ -0,0 +1,86 @@
+import { cloneElement, ReactElement } from 'react'
+import Portal from '../mpx-portal'
+import PopupBase, { PopupBaseProps } from './popupBase'
+
+export const enum PopupType {
+  PICKER = 'picker',
+}
+
+export interface IUsePopupOptions {
+  modal?: React.ComponentType<PopupBaseProps>
+  type?: PopupType
+}
+
+/**
+ * 根据 type 返回对应的弹窗壳子组件
+ */
+const getPopup = (type?: PopupType): React.ComponentType<PopupBaseProps> => {
+  switch (type) {
+    case PopupType.PICKER:
+    default:
+      return PopupBase
+  }
+}
+
+/**
+ * 基于 Portal 封装的 Popup 弹窗组件管理 Hooks
+ */
+const createPopupManager = (options: IUsePopupOptions = {}) => {
+  const { modal, type } = options
+  const Modal = modal || getPopup(type)
+
+  let popupKey: number | null = null
+  let isOpen = false
+  let child: ReactElement | null = null
+
+  const remove = () => {
+    if (popupKey !== null) {
+      Portal.remove(popupKey)
+      popupKey = null
+    }
+    isOpen = false
+  }
+
+  const open = (
+    childComponent: React.ReactNode,
+    pageId: number | undefined,
+    options?: { contentHeight?: number }
+  ) => {
+    if (!isOpen && pageId != null) {
+      isOpen = true
+      child = (
+        <Modal hide={hide} {...options} visible={false}>
+          {childComponent}
+        </Modal>
+      )
+      popupKey = Portal.add(child, pageId)
+    }
+  }
+
+  const update = (updatedChild: ReactElement | null) => {
+    if (popupKey !== null && child !== null && updatedChild !== null) {
+      child = cloneElement(child, { children: updatedChild })
+      Portal.update(popupKey, child)
+    }
+  }
+
+  const _updateVisible = (visible: boolean) => {
+    if (popupKey !== null && child !== null) {
+      child = cloneElement(child, { visible })
+      Portal.update(popupKey, child)
+    }
+  }
+
+  const show = () => _updateVisible(true)
+  const hide = () => _updateVisible(false)
+
+  return {
+    open,
+    show,
+    hide,
+    update,
+    remove
+  }
+}
+
+export { createPopupManager }

package/lib/runtime/components/react/mpx-popup/popupBase.tsx

@@ -0,0 +1,130 @@
+import { StyleSheet } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing
+} from 'react-native-reanimated'
+import { getWindowInfo } from '@mpxjs/api-proxy'
+import { useUpdateEffect } from '../utils'
+
+export interface PopupBaseProps {
+  children?: React.ReactNode
+  hide?: () => void
+  contentHeight?: number
+  visible?: boolean
+}
+
+const windowInfo = getWindowInfo()
+const bottom = windowInfo.screenHeight - windowInfo.safeArea.bottom
+const styles = StyleSheet.create({
+  mask: {
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    position: 'absolute',
+    zIndex: 1000
+  },
+  content: {
+    backgroundColor: '#ffffff',
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: bottom
+  },
+  buttonStyle: {
+    fontSize: 18,
+    paddingTop: 10,
+    paddingBottom: 10
+  }
+})
+
+const MASK_ON = 1 as const
+const MASK_OFF = 0 as const
+const MOVEOUT_HEIGHT = 330 as const
+
+/**
+ * 类似微信 picker 弹窗的动画效果都可以复用此类容器
+ * 其他特定类型的弹窗容器组件可以在此基础上封装，或者扩展实现
+ */
+const PopupBase = (props: PopupBaseProps = {}) => {
+  const {
+    children,
+    hide = () => null,
+    contentHeight = MOVEOUT_HEIGHT,
+    visible = false
+  } = props
+  const fade = useSharedValue<number>(MASK_OFF)
+  const slide = useSharedValue<number>(contentHeight)
+
+  const animatedStylesMask = useAnimatedStyle(() => ({
+    opacity: fade.value
+  }))
+
+  const animatedStylesContent = useAnimatedStyle(() => ({
+    transform: [{ translateY: slide.value }]
+  }))
+
+  const showAimation = () => {
+    fade.value = withTiming(MASK_ON, {
+      easing: Easing.inOut(Easing.poly(3)),
+      duration: 300
+    })
+    slide.value = withTiming(0, {
+      easing: Easing.out(Easing.poly(3)),
+      duration: 300
+    })
+  }
+
+  const hideAnimation = () => {
+    fade.value = withTiming(MASK_OFF, {
+      easing: Easing.inOut(Easing.poly(3)),
+      duration: 300
+    })
+    slide.value = withTiming(
+      contentHeight,
+      {
+        easing: Easing.inOut(Easing.poly(3)),
+        duration: 300
+      }
+    )
+  }
+
+  useUpdateEffect(() => {
+    if (visible) {
+      showAimation()
+    } else {
+      hideAnimation()
+    }
+  }, [visible])
+
+  const preventMaskClick = (e: any) => {
+    e.stopPropagation()
+  }
+
+  return (
+    <Animated.View
+      onTouchEnd={hide}
+      style={[
+        styles.mask,
+        animatedStylesMask,
+        { pointerEvents: visible ? 'auto' : 'none' }
+      ]}
+    >
+      <Animated.View
+        style={[styles.content, animatedStylesContent]}
+        onTouchEnd={preventMaskClick}
+      >
+        {children}
+      </Animated.View>
+    </Animated.View>
+  )
+}
+
+PopupBase.displayName = 'MpxPopupBase'
+export default PopupBase