@mpxjs/webpack-plugin 2.9.69-beta.2 → 2.9.69-beta.3

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

@@ -1,5 +1,5 @@
 import { View } from 'react-native'
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef, useState, useRef } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import {
@@ -9,6 +9,8 @@ import {
   wrapChildren,
   parseInlineStyle,
   useTransformStyle,
+  useDebounceCallback,
+  useStableCallback,
   extendObject
 } from './utils'
 import type { AnyFunc } from './types/common'
@@ -19,21 +21,21 @@ import type { AnyFunc } from './types/common'
  * ✘ bindpickend
  * ✘ mask-class
  * ✔ indicator-style: 优先级indicator-style.height > pick-view-column中的子元素设置的height
- * WebView Only:
  * ✘ indicator-class
- * ✔ mask-style
+ * ✘ mask-style
  * ✘ immediate-change
  */
 
 interface PickerViewProps {
   children: React.ReactNode
+  // 初始的defaultValue数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），
+  // 数字大于 picker-view-column 可选项长度时，选择最后一项。
   value?: Array<number>
   bindchange?: AnyFunc
   style: {
     [key: string]: any
   }
   'indicator-style'?: string
-  'mask-style'?: string
   'enable-var': boolean
   'external-var-context'?: Record<string, any>,
   'enable-offset': boolean
@@ -60,8 +62,6 @@ const styles: { [key: string]: Object } = {
   }
 }
 
-const DefaultPickerItemH = 36
-
 const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProps>((props: PickerViewProps, ref) => {
   const {
     children,
@@ -71,16 +71,16 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     'enable-var': enableVar,
     'external-var-context': externalVarContext
   } = props
+
+  // indicatorStyle 需要转换为rn的style
+  // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
   const indicatorStyle = parseInlineStyle(props['indicator-style'])
-  const pickerMaskStyle = parseInlineStyle(props['mask-style'])
   const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle
+  const [pickMaxH, setPickMaxH] = useState(0)
   const nodeRef = useRef(null)
   const cloneRef = useRef(null)
   const activeValueRef = useRef(value)
   activeValueRef.current = value.slice()
-  const snapActiveValueRef = useRef<number[] | null>(null)
-
-  console.log('[mpx-picker-view] value=', value, Date.now())
 
   const {
     normalStyle,
@@ -96,6 +96,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   })
 
   const {
+    // 存储layout布局信息
     layoutRef,
     layoutProps,
     layoutStyle
@@ -103,34 +104,33 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   const { textProps } = splitProps(props)
   const { textStyle } = splitStyle(normalStyle)
 
+  const onColumnItemRawHChange = (height: number) => {
+    if (height > pickMaxH) {
+      setPickMaxH(height)
+    }
+  }
+
+  const bindchangeDebounce = useDebounceCallback(useStableCallback(bindchange), 300)
+
   const onSelectChange = (columnIndex: number, selectedIndex: number) => {
+    bindchangeDebounce.clear()
     const activeValue = activeValueRef.current
     activeValue[columnIndex] = selectedIndex
-    console.log('[mpx-picker-view], onSelectChange ---> columnIndex=', columnIndex, 'selectedIndex=', selectedIndex, 'activeValue=', activeValue)
     const eventData = getCustomEvent(
       'change',
       {},
       { detail: { value: activeValue, source: 'change' }, layoutRef }
     )
-    bindchange?.(eventData)
-    snapActiveValueRef.current = activeValueRef.current
-  }
-
-  const hasDiff = (a: number[] = [], b: number[]) => {
-    return a.some((v, i) => v !== b[i])
+    bindchangeDebounce(eventData)
   }
 
-  const onInitialChange = (isInvalid: boolean, value: number[]) => {
-    if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
-      console.log('[mpx-picker-view], onInitialChange ===> value=', value)
-      const eventData = getCustomEvent(
-        'change',
-        {},
-        { detail: { value, source: 'change' }, layoutRef }
-      )
-      bindchange?.(eventData)
-      snapActiveValueRef.current = value.slice()
-    }
+  const onInitialChange = (value: number[]) => {
+    const eventData = getCustomEvent(
+      'change',
+      {},
+      { detail: { value, source: 'change' }, layoutRef }
+    )
+    bindchange?.(eventData) // immediate
   }
 
   const innerProps = useInnerProps(
@@ -153,6 +153,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   )
 
   const renderColumn = (child: React.ReactElement, index: number, columnData: React.ReactNode[], initialIndex: number) => {
+    const extraProps = {}
     const childProps = child?.props || {}
     const wrappedProps = extendObject(
       {},
@@ -163,15 +164,15 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         columnIndex: index,
         key: `pick-view-${index}`,
         wrapperStyle: {
-          height: normalStyle?.height || DefaultPickerItemH,
-          itemHeight: indicatorH || DefaultPickerItemH
+          height: normalStyle?.height || 0,
+          itemHeight: indicatorH || 0
         },
-        columnStyle: normalStyle,
+        onColumnItemRawHChange,
         onSelectChange: onSelectChange.bind(null, index),
         initialIndex,
-        pickerOverlayStyle,
-        pickerMaskStyle
-      }
+        pickerOverlayStyle
+      },
+      extraProps
     )
     const realElement = React.cloneElement(child, wrappedProps)
     return wrapChildren(
@@ -214,7 +215,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
       validValue.push(validIndex)
       renderColumns.push(renderColumn(item, index, columnData, validIndex))
     })
-    onInitialChange(isInvalid, validValue)
+    isInvalid && onInitialChange(validValue)
     return renderColumns
   }
 
@@ -226,4 +227,5 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
 })
 
 _PickerView.displayName = 'MpxPickerView'
+
 export default _PickerView

package/lib/runtime/components/react/mpx-rich-text/index.tsx

@@ -3,10 +3,10 @@
  * ✔ nodes
  */
 import { View, ViewProps, ViewStyle } from 'react-native'
-import { useRef, forwardRef, JSX, useState, createElement } from 'react'
+import { useRef, forwardRef, JSX, useState } from 'react'
 import useInnerProps from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import { useTransformStyle, useLayout, extendObject } from '../utils'
+import { useTransformStyle, useLayout } from '../utils'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { generateHTML } from './html'
 
@@ -91,22 +91,28 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
     layoutRef
   })
 
-  const innerProps = useInnerProps(props, extendObject({
+  const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    style: extendObject(normalStyle, layoutStyle)
-  }, layoutProps), [], {
+    style: { ...normalStyle, ...layoutStyle },
+    ...layoutProps
+  }, [], {
     layoutRef
   })
 
   const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
 
-  return createElement(View, innerProps,
-    createElement(WebView, {
-      source: { html: generateHTML(html) },
-      onMessage: (event: WebViewMessageEvent) => {
-        setWebViewHeight(+event.nativeEvent.data)
-      }
-    })
+  return (
+    <View
+      {...innerProps}
+    >
+      <WebView
+        source={{ html: generateHTML(html) }}
+        onMessage={(event: WebViewMessageEvent) => {
+          setWebViewHeight(+event.nativeEvent.data)
+        }}
+      >
+      </WebView>
+    </View>
   )
 })
 

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

@@ -32,14 +32,15 @@
  * ✔ bindscroll
  */
 import { ScrollView } from 'react-native-gesture-handler'
-import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle, Platform } from 'react-native'
-import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react'
+import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
+import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement } from 'react'
 import { useAnimatedRef } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
-import { IntersectionObserverContext, ScrollViewContext } from './context'
+import { IntersectionObserverContext } from './context'
+
 interface ScrollViewProps {
   children?: ReactNode;
   enhanced?: boolean;
@@ -193,12 +194,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     gestureRef: scrollViewRef
   })
 
-  const contextValue = useMemo(() => {
-    return {
-      gestureRef: scrollViewRef
-    }
-  }, [])
-
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
 
   if (scrollX && scrollY) {
@@ -318,7 +313,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     })
   }
 
-  const observerTimers: {[key: string]: any} = {}
   function onScroll (e: NativeSyntheticEvent<NativeScrollEvent>) {
     const { bindscroll } = props
     const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
@@ -340,15 +334,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     updateScrollOptions(e, { scrollLeft, scrollTop })
     if (enableTriggerIntersectionObserver && intersectionObservers) {
       for (const key in intersectionObservers) {
-        if (Platform.OS === 'android') {
-          intersectionObservers[key].throttleMeasure();
-        } else {
-          // TODO: 由于iOS在onScroll滚动的过程中view的计算measureInWindow计算的值不发生变化，所以暂时在ios上加一个延时计算
-          observerTimers[key] && clearTimeout(observerTimers[key])
-          observerTimers[key] = setTimeout(() => {
-              intersectionObservers[key].throttleMeasure();
-          }, 300)
-        }
+        intersectionObservers[key].throttleMeasure()
       }
     }
   }
@@ -521,17 +507,14 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
         : undefined
     }),
-    createElement(ScrollViewContext.Provider,
-      { value: contextValue },
-      wrapChildren(
-        props,
-        {
-          hasVarDec,
-          varContext: varContextRef.current,
-          textStyle,
-          textProps
-        }
-      )
+    wrapChildren(
+      props,
+      {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+      }
     )
   )
 })