@mpxjs/webpack-plugin 2.9.67 → 2.9.69

package/lib/runtime/components/react/mpx-canvas/utils.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef } from 'react'
+import { WebView } from 'react-native-webview'
+import Bus from './Bus'
+
+export const WEBVIEW_TARGET = '@@WEBVIEW_TARGET'
+
+export const constructors: Record<string, any> = {}
+
+export const ID = () => Math.random().toString(32).slice(2)
+
+const SPECIAL_CONSTRUCTOR: Record<string, { className: string, paramNum: number }> = {
+  ImageData: {
+    className: 'Uint8ClampedArray',
+    paramNum: 0
+  }
+}
+
+export interface Instance {
+  postMessage: (...args: any[]) => void;
+  [WEBVIEW_TARGET]?: string;
+  [key: string]: any;
+}
+
+export interface WebviewConstructor {
+  new (...args: any[]): Instance;
+  constructLocally?: (...args: unknown[]) => Instance;
+}
+
+export interface WebviewMessage {
+  type: 'set' | 'exec' | 'listen' | 'event' | 'construct'
+  payload: {
+    target?: string | { [key: string]: any }
+    key?: string
+    value?: any
+    method?: string
+    args?: any[]
+    types?: string[]
+    type?: string
+    constructor?: string | Function
+    id?: string
+  }
+}
+
+export interface CanvasInstance {
+  webview: WebView | null;
+  bus: Bus | null;
+  context2D: CanvasRenderingContext2D;
+  getContext: (contextType: string) => CanvasRenderingContext2D | null;
+  createImage: (width?: number, height?: number) => any;
+  postMessage: (message: WebviewMessage) => Promise<any>;
+  listeners: Array<(payload: any) => void>;
+  addMessageListener: (listener: (payload: any) => void) => () => void;
+  removeMessageListener: (listener: (payload: any) => void) => void;
+  createImageData: (dataArray: number[], width?: number, height?: number) => any;
+}
+
+export const registerWebviewTarget = (instance: Instance, targetName: string): void => {
+  instance[WEBVIEW_TARGET] = targetName
+}
+
+export const registerWebviewProperties = (instance: Instance, properties: Record<string, any>): void => {
+  Object.entries(properties).forEach(([key, initialValue]) => {
+    const privateKey = `__${key}__`
+    instance[privateKey] = initialValue
+    Object.defineProperty(instance, key, {
+      configurable: true,
+      enumerable: true,
+      get () {
+        return instance[privateKey]
+      },
+      set (value) {
+        instance.postMessage({
+          type: 'set',
+          payload: {
+            target: instance[WEBVIEW_TARGET],
+            key,
+            value
+          }
+        })
+
+        if (instance.forceUpdate) {
+          instance.forceUpdate()
+        }
+        return (instance[privateKey] = value)
+      }
+    })
+  })
+}
+
+export const registerWebviewMethods = (instance: Instance, methods: string[]): void => {
+  methods.forEach(method => {
+    instance[method] = (...args: any[]) => {
+      return instance.postMessage({
+        type: 'exec',
+        payload: {
+          target: instance[WEBVIEW_TARGET],
+          method,
+          args
+        }
+      })
+    }
+  })
+}
+
+export const registerWebviewConstructor = (constructor: WebviewConstructor, constructorName: string): void => {
+  constructors[constructorName] = constructor
+  constructor.constructLocally = function (...args: unknown[]): Instance {
+    return new (constructor as any)(...args, true)
+  }
+
+  constructor.prototype.onConstruction = function (...args: any[]): void {
+    if (SPECIAL_CONSTRUCTOR[constructorName] !== undefined) {
+      const { className, paramNum } = SPECIAL_CONSTRUCTOR[constructorName]
+      args[paramNum] = { className, classArgs: [args[paramNum]] }
+    }
+    this[WEBVIEW_TARGET] = ID()
+    this.postMessage({
+      type: 'construct',
+      payload: {
+        constructor: constructorName,
+        id: this[WEBVIEW_TARGET],
+        args
+      }
+    })
+  }
+  constructor.prototype.toJSON = function () {
+    return { __ref__: this[WEBVIEW_TARGET] }
+  }
+}
+export const useWebviewBinding = ({
+  targetName,
+  properties = {},
+  methods = []
+}: {
+  targetName: string;
+  properties?: Record<string, any>;
+  methods?: string[]
+}) => {
+  const instanceRef = useRef({})
+
+  useEffect(() => {
+    if (instanceRef.current) {
+      registerWebviewTarget(instanceRef.current as Instance, targetName)
+      registerWebviewProperties(instanceRef.current as Instance, properties)
+      registerWebviewMethods(instanceRef.current as Instance, methods)
+    }
+  }, [])
+
+  return instanceRef
+}

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

@@ -1,31 +1,51 @@
 
 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' // 引入辅助函数
+import React, { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react'
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, usePrevious } from './utils'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { createFaces } from './pickerFaces'
+import PickerOverlay from './pickerOverlay'
+
 interface ColumnProps {
-  children: React.ReactNode,
-  selectedIndex: number,
-  onColumnLayoutChange: Function,
-  getInnerLayout: Function,
-  onSelectChange: Function,
+  children?: React.ReactNode
+  columnData: React.ReactNode[]
+  initialIndex: number
+  onColumnItemRawHChange: Function
+  getInnerLayout: Function
+  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
+  }
+  pickerOverlayStyle: Record<string, any>
+  columnIndex: number
 }
-const defaultItemHeight = 36
-// 每个Column 都有个外层的高度, 内部的元素高度
-// 默认的高度
+
+// 默认的单个选项高度
+const DefaultPickerItemH = 36
+// 默认一屏可见选项个数
+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,
+    initialIndex,
+    onSelectChange,
+    onColumnItemRawHChange,
+    getInnerLayout,
+    style,
+    wrapperStyle,
+    pickerOverlayStyle,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext
+  } = props
+
   const {
     normalStyle,
     hasVarDec,
@@ -36,122 +56,231 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   } = useTransformStyle(style, { enableVar, externalVarContext })
   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 { height: pickerH, itemHeight = DefaultPickerItemH } = wrapperStyle
+  const [itemRawH, setItemRawH] = useState(0) // 单个选项真实渲染高度
+  const maxIndex = useMemo(() => columnData.length - 1, [columnData])
+  const touching = useRef(false)
+  const scrolling = useRef(false)
+  const activeIndex = useRef(initialIndex)
+  const prevIndex = usePrevious(initialIndex)
+  const prevMaxIndex = usePrevious(maxIndex)
+
+  const initialOffset = useMemo(() => ({
+    x: 0,
+    y: itemRawH * initialIndex
+  }), [itemRawH])
+
+  const snapToOffsets = useMemo(
+    () => columnData.map((_, i) => i * itemRawH),
+    [columnData, itemRawH]
+  )
+
+  const contentContainerStyle = useMemo(() => {
+    return [
+      {
+        paddingVertical: Math.round(pickerH - itemRawH) / 2
+      }
+    ]
+  }, [pickerH, itemRawH])
 
   useEffect(() => {
-    if (selectedIndex && itemH) {
-      const offsetY = selectedIndex * itemH
-      scrollViewRef.current?.scrollTo({ x: 0, y: offsetY, animated: true })
+    if (
+      !scrollViewRef.current ||
+      !itemRawH ||
+      touching.current ||
+      scrolling.current ||
+      prevIndex == null ||
+      initialIndex === prevIndex ||
+      initialIndex === activeIndex.current ||
+      maxIndex !== prevMaxIndex
+    ) {
+      return
     }
-  }, [selectedIndex, itemH])
+
+    activeIndex.current = initialIndex
+    scrollViewRef.current.scrollTo({
+      x: 0,
+      y: itemRawH * initialIndex,
+      animated: false
+    })
+  }, [itemRawH, initialIndex])
 
   const onScrollViewLayout = () => {
     getInnerLayout && getInnerLayout(layoutRef)
   }
 
   const {
-    // 存储layout布局信息
     layoutRef,
     layoutProps
-  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onScrollViewLayout })
+  } = useLayout({
+    props,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    nodeRef: scrollViewRef,
+    onLayout: onScrollViewLayout
+  })
+
+  const onContentSizeChange = (w: number, h: number) => {
+    scrollViewRef.current?.scrollTo({
+      x: 0,
+      y: itemRawH * initialIndex,
+      animated: false
+    })
+  }
 
   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
+    if (rawH && itemRawH !== rawH) {
+      setItemRawH(rawH)
+      onColumnItemRawHChange(rawH)
     }
   }
 
+  const onTouchStart = () => {
+    touching.current = true
+  }
+
+  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 offsetY = useRef(new Animated.Value(0)).current
+
+  const onScroll = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { contentOffset: { y: offsetY } } }], {
+        useNativeDriver: true
+      }),
+    [offsetY]
+  )
+
+  const faces = useMemo(() => createFaces(itemRawH, visibleCount), [itemRawH])
+
+  const getTransform = useCallback(
+    (index: number) => {
+      const inputRange = faces.map((f) => itemRawH * (index + f.index))
+      return {
+        opacity: offsetY.interpolate({
+          inputRange: inputRange,
+          outputRange: faces.map((x) => x.opacity),
+          extrapolate: 'clamp'
+        }),
+        rotateX: offsetY.interpolate({
+          inputRange: inputRange,
+          outputRange: faces.map((x) => `${x.deg}deg`),
+          extrapolate: 'extend'
+        }),
+        translateY: offsetY.interpolate({
+          inputRange: inputRange,
+          outputRange: faces.map((x) => x.offsetY),
+          extrapolate: 'extend'
+        })
       }
-      return realElement
-    }
+    },
+    [offsetY, faces, itemRawH]
+  )
 
-    const realChilds = getRealChilds()
-    const arrChild = realChilds.map((item: React.ReactNode, index: number) => {
+  const renderInnerchild = () =>
+    columnData.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 strKey = `picker-column-${columnIndex}-${index}`
+      const { opacity, rotateX, translateY } = getTransform(index)
+      return (
+        <Animated.View
+          key={strKey}
+          {...InnerProps}
+          style={[
+            {
+              height: itemHeight || DefaultPickerItemH,
+              width: '100%',
+              opacity,
+              transform: [
+                { translateY },
+                { rotateX },
+                { perspective: 1000 } // 适配 Android
+              ]
+            }
+          ]}
+        >
+          {wrapChildren(
+            { children: item },
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )}
+        </Animated.View>
+      )
     })
-    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}>
+    return (
+      <Animated.ScrollView
+        ref={scrollViewRef}
+        bounces={true}
+        horizontal={false}
+        pagingEnabled={false}
+        nestedScrollEnabled={true}
+        removeClippedSubviews={true}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        {...layoutProps}
+        scrollEventThrottle={16}
+        contentContainerStyle={contentContainerStyle}
+        contentOffset={initialOffset}
+        snapToOffsets={snapToOffsets}
+        onContentSizeChange={onContentSizeChange}
+        onScroll={onScroll}
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
+        onTouchCancel={onTouchCancel}
+        onMomentumScrollBegin={onMomentumScrollBegin}
+        onMomentumScrollEnd={onMomentumScrollEnd}
+      >
         {renderInnerchild()}
-    </Animated.ScrollView>)
+      </Animated.ScrollView>
+    )
   }
 
-  return (<SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
-    { renderScollView() }
-  </SafeAreaView>)
+  const renderOverlay = () => (
+    <PickerOverlay itemHeight={itemHeight} overlayItemStyle={pickerOverlayStyle} />
+  )
+
+  return (
+    <SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
+      {renderScollView()}
+      {renderOverlay()}
+    </SafeAreaView>
+  )
 })
 
-_PickerViewColumn.displayName = 'mpx-picker-view-column'
+_PickerViewColumn.displayName = 'MpxPickerViewColumn'
 export default _PickerViewColumn