@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.71

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

@@ -1,5 +1,5 @@
 import { View } from 'react-native'
-import React, { forwardRef, useState, useRef } from 'react'
+import React, { forwardRef, useRef } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import {
@@ -7,35 +7,33 @@ import {
   splitProps,
   splitStyle,
   wrapChildren,
-  parseInlineStyle,
   useTransformStyle,
-  useDebounceCallback,
-  useStableCallback,
   extendObject
 } from './utils'
+import { PickerViewStyleContext } from './pickerVIewContext'
 import type { AnyFunc } from './types/common'
 /**
  * ✔ value
  * ✔ bindchange
  * ✘ bindpickstart
  * ✘ bindpickend
- * ✘ mask-class
+ * ✔ mask-class
  * ✔ indicator-style: 优先级indicator-style.height > pick-view-column中的子元素设置的height
- * ✘ indicator-class
- * ✘ mask-style
+ * WebView Only:
+ * ✔ indicator-class
+ * ✔ 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
+  'indicator-style'?: Record<string, any>,
+  'mask-style'?: Record<string, any>,
   'enable-var': boolean
   'external-var-context'?: Record<string, any>,
   'enable-offset': boolean
@@ -62,25 +60,25 @@ const styles: { [key: string]: Object } = {
   }
 }
 
+const DefaultPickerItemH = 36
+
 const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProps>((props: PickerViewProps, ref) => {
   const {
     children,
     value = [],
     bindchange,
     style,
+    'indicator-style': indicatorStyle = {},
+    'mask-style': pickerMaskStyle = {},
     'enable-var': enableVar,
     'external-var-context': externalVarContext
   } = props
-
-  // indicatorStyle 需要转换为rn的style
-  // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
-  const indicatorStyle = parseInlineStyle(props['indicator-style'])
-  const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle
-  const [pickMaxH, setPickMaxH] = useState(0)
+  const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle
   const nodeRef = useRef(null)
   const cloneRef = useRef(null)
   const activeValueRef = useRef(value)
   activeValueRef.current = value.slice()
+  const snapActiveValueRef = useRef<number[] | null>(null)
 
   const {
     normalStyle,
@@ -96,7 +94,6 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   })
 
   const {
-    // 存储layout布局信息
     layoutRef,
     layoutProps,
     layoutStyle
@@ -104,33 +101,32 @@ 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
     const eventData = getCustomEvent(
       'change',
       {},
-      { detail: { value: activeValue, source: 'change' }, layoutRef }
+      { detail: { value: activeValue.slice(), source: 'change' }, layoutRef }
     )
-    bindchangeDebounce(eventData)
+    bindchange?.(eventData)
+    snapActiveValueRef.current = activeValueRef.current
   }
 
-  const onInitialChange = (value: number[]) => {
-    const eventData = getCustomEvent(
-      'change',
-      {},
-      { detail: { value, source: 'change' }, layoutRef }
-    )
-    bindchange?.(eventData) // immediate
+  const hasDiff = (a: number[] = [], b: number[]) => {
+    return a.some((v, i) => v !== b[i])
+  }
+
+  const onInitialChange = (isInvalid: boolean, value: number[]) => {
+    if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
+      const eventData = getCustomEvent(
+        'change',
+        {},
+        { detail: { value: value.slice(), source: 'change' }, layoutRef }
+      )
+      bindchange?.(eventData)
+      snapActiveValueRef.current = value.slice()
+    }
   }
 
   const innerProps = useInnerProps(
@@ -148,12 +144,17 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
       ),
       layoutProps
     }),
-    ['enable-offset'],
+    [
+      'enable-offset',
+      'indicator-style',
+      'indicator-class',
+      'mask-style',
+      'mask-class'
+    ],
     { layoutRef }
   )
 
   const renderColumn = (child: React.ReactElement, index: number, columnData: React.ReactNode[], initialIndex: number) => {
-    const extraProps = {}
     const childProps = child?.props || {}
     const wrappedProps = extendObject(
       {},
@@ -164,15 +165,14 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         columnIndex: index,
         key: `pick-view-${index}`,
         wrapperStyle: {
-          height: normalStyle?.height || 0,
-          itemHeight: indicatorH || 0
+          height: normalStyle?.height || DefaultPickerItemH,
+          itemHeight: indicatorH || DefaultPickerItemH
         },
-        onColumnItemRawHChange,
         onSelectChange: onSelectChange.bind(null, index),
         initialIndex,
-        pickerOverlayStyle
-      },
-      extraProps
+        pickerIndicatorStyle,
+        pickerMaskStyle
+      }
     )
     const realElement = React.cloneElement(child, wrappedProps)
     return wrapChildren(
@@ -215,17 +215,18 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
       validValue.push(validIndex)
       renderColumns.push(renderColumn(item, index, columnData, validIndex))
     })
-    isInvalid && onInitialChange(validValue)
+    onInitialChange(isInvalid, validValue)
     return renderColumns
   }
 
   return (
-    <View {...innerProps}>
-      <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
-    </View>
+    <PickerViewStyleContext.Provider value={textStyle}>
+      <View {...innerProps}>
+        <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
+      </View>
+    </PickerViewStyleContext.Provider>
   )
 })
 
 _PickerView.displayName = 'MpxPickerView'
-
 export default _PickerView

package/lib/runtime/components/react/mpx-radio-group.tsx

@@ -8,7 +8,8 @@ import {
   ReactNode,
   useContext,
   useMemo,
-  useEffect
+  useEffect,
+  createElement
 } from 'react'
 import {
   View,
@@ -154,20 +155,17 @@ const radioGroup = forwardRef<
     }
   )
 
-  return (
-    <View {...innerProps}>
-      <RadioGroupContext.Provider value={contextValue}>
-        {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current
-            }
-          )
-        }
-      </RadioGroupContext.Provider>
-    </View>
+  return createElement(View, innerProps, createElement(
+    RadioGroupContext.Provider,
+    { value: contextValue },
+    wrapChildren(
+      props,
+      {
+        hasVarDec,
+        varContext: varContextRef.current
+      }
+    )
+  )
   )
 })
 

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

@@ -4,7 +4,7 @@
  * ✔ checked
  * ✔ color
  */
-import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react'
+import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction, createElement } from 'react'
 import { View, StyleSheet, ViewStyle, NativeSyntheticEvent } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { LabelContext, RadioGroupContext } from './context'
@@ -193,32 +193,26 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       }
     }, [checked])
 
-    return (
-      <View {...innerProps}>
-        <View style={defaultStyle}>
-          <Icon
-            type='success'
-            size={24}
-            color={disabled ? '#E1E1E1' : color}
-            style={{
-              ...styles.icon,
-              ...(isChecked && styles.iconChecked),
-              ...(disabled && styles.iconDisabled)
-            }}
-          />
-        </View>
+    return createElement(View, innerProps,
+      createElement(
+        View,
+        { style: defaultStyle },
+        createElement(Icon, {
+          type: 'success',
+          size: 24,
+          color: disabled ? '#E1E1E1' : color,
+          style: extendObject({}, styles.icon, isChecked && styles.iconChecked, disabled && styles.iconDisabled)
+        })
+      ),
+      wrapChildren(
+        props,
         {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
         }
-      </View>
+      )
     )
   }
 )

package/lib/runtime/components/react/mpx-rich-text/html.ts

@@ -0,0 +1,40 @@
+
+export const generateHTML = (html: string) => {
+  return `<html><head>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" name="viewport">
+    <style>
+      html {
+        -ms-content-zooming: none;
+        -ms-touch-action: pan-x pan-y;
+      }
+      body {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: hidden;
+      }
+      html,body {
+        margin: 0;
+        padding: 0;
+      }
+      * {
+        user-select: none;
+        -ms-user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+      }
+    </style>
+  </head>
+  <body><div id="rich-text">${html}</div>
+  <script>
+    function sendHeight() {
+      const dom = document.getElementById('rich-text')
+      window.ReactNativeWebView.postMessage(dom.scrollHeight);
+    }
+    window.onload = sendHeight;
+</script>
+</body
+></html>`
+}

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

@@ -0,0 +1,115 @@
+
+/**
+ * ✔ nodes
+ */
+import { View, ViewProps, ViewStyle } from 'react-native'
+import { useRef, forwardRef, JSX, useState, createElement } from 'react'
+import useInnerProps from '../getInnerListeners'
+import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import { useTransformStyle, useLayout, extendObject } from '../utils'
+import { WebView, WebViewMessageEvent } from 'react-native-webview'
+import { generateHTML } from './html'
+
+type Node = {
+  type: 'node' | 'text'
+  name?: string
+  attrs?: any
+  children?: Array<Node>
+  text: string
+}
+
+interface _RichTextProps extends ViewProps {
+  style?: ViewStyle
+  nodes: string | Array<Node>
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+}
+
+function jsonToHtmlStr (elements: Array<Node>) {
+  let htmlStr = ''
+
+  for (const element of elements) {
+    if (element.type === 'text') {
+      htmlStr += element.text
+      return htmlStr
+    }
+
+    const { name, attrs = {}, children = [] } = element
+
+    let attrStr = ''
+    for (const [key, value] of Object.entries(attrs)) attrStr += ` ${key}="${value}"`
+
+    let childrenStr = ''
+    for (const child of children) childrenStr += jsonToHtmlStr([child])
+
+    htmlStr += `<${name}${attrStr}>${childrenStr}</${name}>`
+  }
+
+  return htmlStr
+}
+
+const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((props, ref): JSX.Element => {
+  const {
+    style = {},
+    nodes,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+
+  const nodeRef = useRef(null)
+  const [webViewHeight, setWebViewHeight] = useState(0)
+
+  const {
+    normalStyle,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(Object.assign({
+    width: '100%',
+    height: webViewHeight
+  }, style), {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+
+  const {
+    layoutRef,
+    layoutStyle,
+    layoutProps
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
+  useNodesRef<View, _RichTextProps>(props, ref, nodeRef, {
+    layoutRef
+  })
+
+  const innerProps = useInnerProps(props, extendObject({
+    ref: nodeRef,
+    style: extendObject(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)
+      }
+    })
+  )
+})
+
+_RichText.displayName = 'mpx-rich-text'
+
+export default _RichText

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

@@ -1,7 +1,7 @@
 /**
  * ✔ enable
  */
-import { ReactNode } from 'react'
+import { ReactNode, createElement, Fragment } from 'react'
 import { Portal } from '@ant-design/react-native'
 import { warn } from '@mpxjs/utils'
 interface RootPortalProps {
@@ -16,10 +16,8 @@ const _RootPortal = (props: RootPortalProps) => {
     warn('The root-portal component does not support the style prop.')
   }
   return enable
-    ? <Portal>
-      {children}
-    </Portal>
-    : <>{children}</>
+    ? createElement(Portal, null, children)
+    : createElement(Fragment, null, children)
 }
 
 _RootPortal.displayName = 'MpxRootPortal'

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

@@ -33,13 +33,13 @@
  */
 import { ScrollView } from 'react-native-gesture-handler'
 import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
-import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext } from 'react'
+import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } 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 } from './context'
+import { IntersectionObserverContext, ScrollViewContext } from './context'
 
 interface ScrollViewProps {
   children?: ReactNode;
@@ -165,7 +165,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const initialTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
   const intersectionObservers = useContext(IntersectionObserverContext)
 
-  const snapScrollIntoView = useRef<string>('')
+  const firstScrollIntoViewChange = useRef<boolean>(false)
 
   const {
     normalStyle,
@@ -194,6 +194,12 @@ 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) {
@@ -220,23 +226,28 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   }, [refresherTriggered])
 
   useEffect(() => {
-    if (scrollIntoView && __selectRef && snapScrollIntoView.current !== scrollIntoView) {
-      snapScrollIntoView.current = scrollIntoView || ''
-      setTimeout(() => {
-        const refs = __selectRef(`#${scrollIntoView}`, 'node')
-        if (refs) {
-          const { nodeRef } = refs.getNodeInstance()
-          nodeRef.current?.measureLayout(
-            scrollViewRef.current,
-            (left: number, top:number) => {
-              scrollToOffset(left, top)
-            }
-          )
-        }
-      })
+    if (scrollIntoView && __selectRef) {
+      if (!firstScrollIntoViewChange.current) {
+        setTimeout(handleScrollIntoView)
+      } else {
+        handleScrollIntoView()
+      }
     }
+    firstScrollIntoViewChange.current = true
   }, [scrollIntoView])
 
+  function handleScrollIntoView () {
+    const refs = __selectRef!(`#${scrollIntoView}`, 'node')
+    if (!refs) return
+    const { nodeRef } = refs.getNodeInstance()
+    nodeRef.current?.measureLayout(
+      scrollViewRef.current,
+      (left: number, top:number) => {
+        scrollToOffset(left, top)
+      }
+    )
+  }
+
   function selectLength (size: { height: number; width: number }) {
     return !scrollX ? size.height : size.width
   }
@@ -327,6 +338,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         }, props)
       )
     updateScrollOptions(e, { scrollLeft, scrollTop })
+    onStartReached(e)
+    onEndReached(e)
     if (enableTriggerIntersectionObserver && intersectionObservers) {
       for (const key in intersectionObservers) {
         intersectionObservers[key].throttleMeasure()
@@ -491,32 +504,29 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     white: ['#fff']
   }
 
-  return (
-    <ScrollView
-      {...innerProps}
-      refreshControl={refresherEnabled
-        ? (
-          <RefreshControl
-            progressBackgroundColor={refresherBackground}
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}
-          />
-          )
-        : undefined}
-    >
-       {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )
-      }
-    </ScrollView>
+  return createElement(
+    ScrollView,
+    extendObject({}, innerProps, {
+      refreshControl: refresherEnabled
+        ? createElement(RefreshControl, extendObject({
+          progressBackgroundColor: refresherBackground,
+          refreshing: refreshing,
+          onRefresh: onRefresh
+        }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
+        : undefined
+    }),
+    createElement(ScrollViewContext.Provider,
+      { value: contextValue },
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
+        }
+      )
+    )
   )
 })