@mpxjs/webpack-plugin 2.9.67 → 2.9.69-beta.1

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

@@ -0,0 +1,88 @@
+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 } from './pickerVIewContext'
+
+interface PickerColumnItemProps {
+  item: React.ReactElement
+  index: number
+  itemHeight: number
+  itemWidth: number | '100%'
+  textStyleFromParent: Record<string, any>
+  textStyle: Record<string, any>
+  hasVarDec: boolean
+  varContext: Record<string, any>
+  visibleCount: number
+  textProps?: any
+  onItemLayout?: (e: LayoutChangeEvent) => void
+}
+
+const _PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
+  item,
+  index,
+  itemHeight,
+  itemWidth,
+  textStyleFromParent,
+  textStyle,
+  hasVarDec,
+  varContext,
+  textProps,
+  visibleCount,
+  onItemLayout
+}) => {
+  const offsetYShared = usePickerViewColumnAnimationContext()
+  const facesShared = useSharedValue(createFaces(itemHeight, visibleCount))
+
+  useEffect(() => {
+    facesShared.value = createFaces(itemHeight, visibleCount)
+  }, [itemHeight])
+
+  const animatedStyles = useAnimatedStyle(() => {
+    const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index))
+    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) },
+        { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
+      ]
+    }
+  })
+
+  const strKey = `picker-column-item-${index}`
+  const restProps = index === 0 ? { onLayout: onItemLayout } : {}
+  const itemProps = extendObject(
+    {
+      style: extendObject(
+        { height: itemHeight, width: '100%' },
+        textStyleFromParent,
+        textStyle,
+        item.props.style
+      )
+    },
+    restProps
+  )
+  const realItem = React.cloneElement(item, itemProps)
+
+  return (
+    <Reanimated.View
+      key={strKey}
+      style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}
+    >
+      {wrapChildren(
+        { children: realItem },
+        {
+          hasVarDec,
+          varContext,
+          textStyle,
+          textProps
+        }
+      )}
+    </Reanimated.View>
+  )
+}
+
+_PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem'
+export default _PickerViewColumnItem

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

@@ -1,31 +1,50 @@
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
+import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
+import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid } from './utils'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import PickerOverlay from './pickerViewOverlay'
+import PickerMask from './pickerViewMask'
+import MpxPickerVIewColumnItem from './mpx-picker-view-column-item'
+import { PickerViewColumnAnimationContext } from './pickerVIewContext'
 
-import { View, Animated, SafeAreaView, NativeScrollEvent, NativeSyntheticEvent, LayoutChangeEvent, ScrollView } from 'react-native'
-import React, { forwardRef, useRef, useState, useEffect, ReactElement, ReactNode } from 'react'
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
-import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 interface ColumnProps {
-  children: React.ReactNode,
-  selectedIndex: number,
-  onColumnLayoutChange: Function,
-  getInnerLayout: Function,
-  onSelectChange: Function,
+  children?: React.ReactNode
+  columnData: React.ReactNode[]
+  columnStyle: Record<string, any>
+  initialIndex: number
+  onSelectChange: Function
   style: {
     [key: string]: any
-  },
+  }
   'enable-var': boolean
   'external-var-context'?: Record<string, any>
   wrapperStyle: {
-    height?: number,
-    itemHeight: string
-  },
-  prefix: number
+    height: number
+    itemHeight: number
+  }
+  pickerMaskStyle: Record<string, any>
+  pickerOverlayStyle: Record<string, any>
+  columnIndex: number
 }
-const defaultItemHeight = 36
-// 每个Column 都有个外层的高度, 内部的元素高度
-// 默认的高度
+
+const visibleCount = 5
+
 const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>, ColumnProps>((props: ColumnProps, ref) => {
-  const { children, selectedIndex, onColumnLayoutChange, onSelectChange, getInnerLayout, style, wrapperStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props
-  // PickerViewColumn
+  const {
+    columnData,
+    columnIndex,
+    columnStyle,
+    initialIndex,
+    onSelectChange,
+    style,
+    wrapperStyle,
+    pickerMaskStyle,
+    pickerOverlayStyle,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext
+  } = props
+
   const {
     normalStyle,
     hasVarDec,
@@ -34,124 +53,269 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext })
-  const { textStyle } = splitStyle(normalStyle)
+  const { textStyle: textStyleFromParent = {} } = splitStyle(columnStyle)
+  const { textStyle = {} } = splitStyle(normalStyle)
   const { textProps } = splitProps(props)
-  // const { innerStyle } = splitStyle(normalStyle)
-  // scrollView的ref
-  const scrollViewRef = useRef<ScrollView>(null)
-  useNodesRef(props, ref, scrollViewRef, {})
-  // 每个元素的高度
-  let [itemH, setItemH] = useState(0)
+  const scrollViewRef = useAnimatedRef<Reanimated.ScrollView>()
+  const offsetYShared = useScrollViewOffset(scrollViewRef as AnimatedRef<Reanimated.ScrollView>)
+
+  useNodesRef(props, ref, scrollViewRef as AnimatedRef<ScrollView>, {
+    style: normalStyle
+  })
+
+  const { height: pickerH, itemHeight } = wrapperStyle
+  const [scrollViewWidth, setScrollViewWidth] = useState<number | '100%'>('100%')
+  const [itemRawW, setItemRawW] = useState<number | '100%'>('100%')
+  const [itemRawH, setItemRawH] = useState(itemHeight)
+  const maxIndex = useMemo(() => columnData.length - 1, [columnData])
+  const maxScrollViewWidth = useRef(-1)
+  const prevScrollingInfo = useRef({ index: initialIndex, y: 0 })
+  const touching = useRef(false)
+  const scrolling = useRef(false)
+  const activeIndex = useRef(initialIndex)
+  const prevIndex = usePrevious(initialIndex)
+  const prevMaxIndex = usePrevious(maxIndex)
+
+  const {
+    layoutProps
+  } = useLayout({
+    props,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    nodeRef: scrollViewRef
+  })
+
+  // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length, 'pickerH=', pickerH, 'itemRawH=', itemRawH, 'itemHeight=', itemHeight)
+
+  // const initialOffset = useMemo(() => ({
+  //   x: 0,
+  //   y: itemRawH * initialIndex
+  // }), [itemRawH])
+
+  const paddingHeight = useMemo(
+    () => Math.round((pickerH - itemHeight) / 2),
+    [pickerH, itemHeight]
+  )
+
+  const snapToOffsets = useMemo(
+    () => columnData.map((_, i) => i * itemRawH),
+    [columnData, itemRawH]
+  )
+
+  const contentContainerStyle = useMemo(() => {
+    return [{ paddingVertical: paddingHeight }]
+  }, [paddingHeight])
+
+  const getIndex = useCallback((y: number) => {
+    const calc = Math.round(y / itemRawH)
+    return Math.max(0, Math.min(calc, maxIndex))
+  }, [itemRawH, maxIndex])
 
   useEffect(() => {
-    if (selectedIndex && itemH) {
-      const offsetY = selectedIndex * itemH
-      scrollViewRef.current?.scrollTo({ x: 0, y: offsetY, animated: true })
+    // console.log('[mpx-picker-view-column], useEffect000 --->', 'columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'prevIndex=', prevIndex, 'activeIndex=', activeIndex.current, 'maxIndex=', maxIndex, 'prevMaxIndex=', prevMaxIndex)
+    if (
+      !scrollViewRef.current ||
+      !itemRawH ||
+      touching.current ||
+      scrolling.current ||
+      prevIndex == null ||
+      initialIndex === prevIndex ||
+      initialIndex === activeIndex.current ||
+      maxIndex !== prevMaxIndex
+    ) {
+      return
     }
-  }, [selectedIndex, itemH])
+    // console.log('[mpx-picker-view-column], useEffect ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'y=', itemRawH * initialIndex, `${scrollViewRef.current?.scrollTo}`)
+    setTimeout(() => {
+      scrollViewRef.current?.scrollTo({
+        x: 0,
+        y: itemRawH * initialIndex,
+        animated: false
+      })
+    }, isAndroid ? 200 : 0)
+    activeIndex.current = initialIndex
+  }, [itemRawH, initialIndex])
 
-  const onScrollViewLayout = () => {
-    getInnerLayout && getInnerLayout(layoutRef)
+  const onContentSizeChange = (_w: number, h: number) => {
+    const y = itemRawH * initialIndex
+    // console.log('[mpx-picker-view-column], onContentSizeChange --->', 'columnIndex=', columnIndex, '_w=', _w, 'h=', h, 'y=', y, 'itemRawH=', itemRawH)
+    if (y <= h) {
+      setTimeout(() => {
+        scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
+      }, 0)
+    }
   }
 
-  const {
-    // 存储layout布局信息
-    layoutRef,
-    layoutProps
-  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onScrollViewLayout })
+  const onScrollViewLayout = (e: LayoutChangeEvent) => {
+    if (isAndroid) {
+      return
+    }
+    // RN iOS bug: https://github.com/facebook/react-native/issues/36135
+    const { width } = e.nativeEvent.layout
+    const widthInt = Math.ceil(width)
+    // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'width=', width, 'widthInt=', widthInt, 'scrollViewWidth=', scrollViewWidth)
+    if (widthInt !== scrollViewWidth) {
+      const maxW = maxScrollViewWidth.current
+      if (maxW !== -1 && widthInt > maxW) {
+        return
+      }
+      if (maxW === -1) {
+        maxScrollViewWidth.current = Math.ceil(widthInt * 1.5)
+      }
+      setScrollViewWidth(widthInt)
+    }
+    if (itemRawW === '100%') {
+      setItemRawW(widthInt)
+    }
+  }
 
   const onItemLayout = (e: LayoutChangeEvent) => {
-    const layout = e.nativeEvent.layout
-    if (layout.height && itemH !== layout.height) {
-      itemH = layout.height
-      setItemH(layout.height)
-      onColumnLayoutChange && onColumnLayoutChange({ height: layout.height * 5 })
+    const { height: rawH } = e.nativeEvent.layout
+    // console.log('[mpx-picker-view-column], onItemLayout --->', 'columnIndex=', columnIndex, 'width=', width)
+    if (rawH && itemRawH !== rawH) {
+      setItemRawH(rawH)
+    }
+  }
+
+  const onTouchStart = () => {
+    touching.current = true
+    prevScrollingInfo.current = {
+      index: activeIndex.current,
+      y: activeIndex.current * itemRawH
     }
   }
 
+  const onTouchEnd = () => {
+    touching.current = false
+  }
+
+  const onTouchCancel = () => {
+    touching.current = false
+  }
+
+  const onMomentumScrollBegin = () => {
+    scrolling.current = true
+  }
+
   const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (scrollViewRef && itemH) {
-      const { y: scrollY } = e.nativeEvent.contentOffset
-      const selIndex = Math.floor(scrollY / itemH)
-      onSelectChange(selIndex)
+    scrolling.current = false
+    if (!itemRawH) {
+      return
+    }
+    const { y: scrollY } = e.nativeEvent.contentOffset
+    let calcIndex = Math.round(scrollY / itemRawH)
+    activeIndex.current = calcIndex
+    if (calcIndex !== initialIndex) {
+      calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0
+      onSelectChange(calcIndex)
     }
   }
 
-  const renderInnerchild = () => {
-    // Fragment 节点
-    let realElement: Array<ReactNode> = []
-    const getRealChilds = () => {
-      if (Array.isArray(children)) {
-        realElement = children
-      } else {
-        const tempChild = children as ReactElement
-        if (tempChild.props.children && tempChild.props.children) {
-          realElement = tempChild.props.children
-        } else {
-          realElement = [children]
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (isAndroid) {
+      return
+    }
+    // 全局注册的震动触感 hook
+    const pickerVibrate = global.__mpx.config.rnConfig.pickerVibrate
+    if (typeof pickerVibrate !== 'function') {
+      return
+    }
+    const { y } = e.nativeEvent.contentOffset
+    const { index: prevIndex, y: _y } = prevScrollingInfo.current
+    if (touching.current || scrolling.current) {
+      if (Math.abs(y - _y) >= itemRawH) {
+        const currentId = getIndex(y)
+        if (currentId !== prevIndex) {
+          prevScrollingInfo.current = {
+            index: currentId,
+            y: currentId * itemRawH
+          }
+          // vibrateShort({ type: 'selection' })
+          pickerVibrate()
         }
       }
-      return realElement
     }
+  }
 
-    const realChilds = getRealChilds()
-    const arrChild = realChilds.map((item: React.ReactNode, index: number) => {
-      const InnerProps = index === 0 ? { onLayout: onItemLayout } : {}
-      const strKey = 'picker' + props.prefix + '-column' + index
-      const arrHeight = (wrapperStyle.itemHeight + '').match(/\d+/g) || []
-      const iHeight = (arrHeight[0] || defaultItemHeight) as number
-      return <View key={strKey} {...InnerProps} style={[{ height: iHeight, width: '100%' }]}>
-        {wrapChildren(
-          {
-            children: item
-          },
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )}
-      </View>
+  const renderInnerchild = () =>
+    columnData.map((item: React.ReactElement, index: number) => {
+      return (
+        <MpxPickerVIewColumnItem
+          key={index}
+          item={item}
+          index={index}
+          itemHeight={itemHeight}
+          itemWidth={itemRawW}
+          textStyleFromParent={textStyleFromParent}
+          textStyle={textStyle}
+          hasVarDec={hasVarDec}
+          varContext={varContextRef.current}
+          textProps={textProps}
+          visibleCount={visibleCount}
+          onItemLayout={onItemLayout}
+        />
+      )
     })
-    const totalHeight = itemH * 5
-    if (wrapperStyle.height && totalHeight !== wrapperStyle.height) {
-      const fix = Math.ceil((totalHeight - wrapperStyle.height) / 2)
-      arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH - fix }]}></View>)
-      arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>)
-      arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>)
-      arrChild.push(<View key="picker-column-3" style={[{ height: itemH - fix }]}></View>)
-    } else {
-      arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH }]}></View>)
-      arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>)
-      arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>)
-      arrChild.push(<View key="picker-column-3" style={[{ height: itemH }]}></View>)
-    }
-    return arrChild
-  }
 
   const renderScollView = () => {
-    return (<Animated.ScrollView
-      horizontal={false}
-      ref={scrollViewRef}
-      bounces={false}
-      scrollsToTop={false}
-      removeClippedSubviews={true}
-      showsHorizontalScrollIndicator={false}
-      showsVerticalScrollIndicator={false}
-      pagingEnabled={false}
-      snapToInterval={itemH}
-      automaticallyAdjustContentInsets={false}
-      {...layoutProps}
-      onMomentumScrollEnd={onMomentumScrollEnd}>
-        {renderInnerchild()}
-    </Animated.ScrollView>)
+    return (
+      <PickerViewColumnAnimationContext.Provider value={offsetYShared}>
+        <Reanimated.ScrollView
+          ref={scrollViewRef}
+          bounces={true}
+          horizontal={false}
+          nestedScrollEnabled={true}
+          removeClippedSubviews={false}
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={16}
+          {...layoutProps}
+          style={[{ width: scrollViewWidth }]}
+          decelerationRate="fast"
+          snapToOffsets={snapToOffsets}
+          onScroll={onScroll}
+          onLayout={onScrollViewLayout}
+          onTouchStart={onTouchStart}
+          onTouchEnd={onTouchEnd}
+          onTouchCancel={onTouchCancel}
+          onMomentumScrollBegin={onMomentumScrollBegin}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          onContentSizeChange={onContentSizeChange}
+          contentContainerStyle={contentContainerStyle}
+        >
+          {renderInnerchild()}
+        </Reanimated.ScrollView>
+      </PickerViewColumnAnimationContext.Provider>
+    )
   }
 
-  return (<SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
-    { renderScollView() }
-  </SafeAreaView>)
+  const renderOverlay = () => (
+    <PickerOverlay
+      itemHeight={itemHeight}
+      overlayItemStyle={pickerOverlayStyle}
+    />
+  )
+
+  const renderMask = () => (
+    <PickerMask
+      itemHeight={itemHeight}
+      maskContainerStyle={pickerMaskStyle}
+    />
+  )
+
+  return (
+    <SafeAreaView style={[styles.wrapper, normalStyle]}>
+      {renderScollView()}
+      {renderMask()}
+      {renderOverlay()}
+    </SafeAreaView>
+  )
+})
+
+const styles = StyleSheet.create({
+  wrapper: { display: 'flex', flex: 1 }
 })
 
-_PickerViewColumn.displayName = 'mpx-picker-view-column'
+_PickerViewColumn.displayName = 'MpxPickerViewColumn'
 export default _PickerViewColumn