@mpxjs/webpack-plugin 2.9.69 → 2.9.70

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

@@ -8,7 +8,8 @@ import {
   ReactNode,
   useContext,
   useMemo,
-  useEffect
+  useEffect,
+  createElement
 } from 'react'
 import {
   View,
@@ -20,7 +21,7 @@ import { warn } from '@mpxjs/utils'
 import { FormContext, FormFieldValue, RadioGroupContext, GroupValue } from './context'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { useLayout, useTransformStyle, wrapChildren } from './utils'
+import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 
 export interface RadioGroupProps {
   name: string
@@ -67,10 +68,7 @@ const radioGroup = forwardRef<
     flexWrap: 'wrap'
   }
 
-  const styleObj = {
-    ...defaultStyle,
-    ...style
-  }
+  const styleObj = extendObject({}, defaultStyle, style)
 
   const {
     hasSelfPercent,
@@ -82,7 +80,7 @@ const radioGroup = forwardRef<
   } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const nodeRef = useRef(null)
-  useNodesRef(props, ref, nodeRef, { defaultStyle })
+  useNodesRef(props, ref, nodeRef, { style: normalStyle })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
@@ -144,31 +142,30 @@ const radioGroup = forwardRef<
 
   const innerProps = useInnerProps(
     props,
-    {
-      ref: nodeRef,
-      style: { ...normalStyle, ...layoutStyle },
-      ...layoutProps
-    },
-    [],
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle)
+      },
+      layoutProps
+    ),
+    ['name'],
     {
       layoutRef
     }
   )
 
-  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,13 +4,13 @@
  * ✔ 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'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import Icon from './mpx-icon'
 
 export interface RadioProps {
@@ -27,7 +27,6 @@ export interface RadioProps {
   'parent-height'?: number;
   children: ReactNode
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  catchtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 const styles = StyleSheet.create({
@@ -79,8 +78,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       'parent-font-size': parentFontSize,
       'parent-width': parentWidth,
       'parent-height': parentHeight,
-      bindtap,
-      catchtap
+      bindtap
     } = props
 
     const [isChecked, setIsChecked] = useState<boolean>(!!checked)
@@ -91,16 +89,14 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
 
     const labelContext = useContext(LabelContext)
 
-    const defaultStyle = {
-      ...styles.wrapper,
-      ...(isChecked && styles.wrapperChecked),
-      ...(disabled && styles.wrapperDisabled)
-    }
+    const defaultStyle = extendObject(
+      {},
+      styles.wrapper,
+      isChecked ? styles.wrapperChecked : {},
+      disabled ? styles.wrapperDisabled : {}
+    )
 
-    const styleObj = {
-      ...styles.container,
-      ...style
-    }
+    const styleObj = extendObject({}, styles.container, style)
 
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
       if (disabled || isChecked) return
@@ -116,16 +112,10 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
     }
 
     const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
-      if (disabled) return
       bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
       onChange(evt)
     }
 
-    const catchTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
-      if (disabled) return
-      catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props))
-    }
-
     const {
       hasSelfPercent,
       normalStyle,
@@ -135,7 +125,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       setHeight
     } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
     if (backgroundStyle) {
       warn('Radio does not support background image-related styles!')
@@ -143,7 +133,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
 
     const nodeRef = useRef(null)
     useNodesRef(props, ref, nodeRef, {
-      defaultStyle,
+      style: extendObject({}, defaultStyle, normalStyle),
       change: onChange
     })
 
@@ -160,14 +150,21 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
 
     const innerProps = useInnerProps(
       props,
-      {
-        ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
-        bindtap: onTap,
-        catchtap: catchTap
-      },
-      [],
+      extendObject(
+        {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle)
+        },
+        layoutProps,
+        {
+          bindtap: !disabled && onTap
+        }
+      ),
+      [
+        'value',
+        'disabled',
+        'checked'
+      ],
       {
         layoutRef
       }
@@ -196,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,121 @@
+
+/**
+ * ✔ nodes
+ */
+import { View, ViewProps, ViewStyle } from 'react-native'
+import { useRef, forwardRef, JSX, useState } from 'react'
+import useInnerProps from '../getInnerListeners'
+import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import { useTransformStyle, useLayout } 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, {
+    ref: nodeRef,
+    style: { ...normalStyle, ...layoutStyle },
+    ...layoutProps
+  }, [], {
+    layoutRef
+  })
+
+  const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
+
+  return (
+    <View
+      {...innerProps}
+    >
+      <WebView
+        source={{ html: generateHTML(html) }}
+        onMessage={(event: WebViewMessageEvent) => {
+          setWebViewHeight(+event.nativeEvent.data)
+        }}
+      >
+      </WebView>
+    </View>
+  )
+})
+
+_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,12 +33,12 @@
  */
 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 } 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, flatGesture, GestureHandler } from './utils'
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
 import { IntersectionObserverContext } from './context'
 
 interface ScrollViewProps {
@@ -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,
@@ -176,10 +176,11 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { textStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   const scrollViewRef = useAnimatedRef<ScrollView>()
   useNodesRef(props, ref, scrollViewRef, {
+    style: normalStyle,
     scrollOffset: scrollOptions,
     node: {
       scrollEnabled: scrollX || scrollY,
@@ -219,23 +220,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
   }
@@ -298,14 +304,13 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     const visibleLength = selectLength(e.nativeEvent.layoutMeasurement)
     const contentLength = selectLength(e.nativeEvent.contentSize)
     const offset = selectOffset(e.nativeEvent.contentOffset)
-    scrollOptions.current = {
-      ...scrollOptions.current,
+    extendObject(scrollOptions.current, {
       contentLength,
       offset,
       scrollLeft: position.scrollLeft,
       scrollTop: position.scrollTop,
       visibleLength
-    }
+    })
   }
 
   function onScroll (e: NativeSyntheticEvent<NativeScrollEvent>) {
@@ -426,34 +431,36 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     updateScrollOptions(e, { scrollLeft, scrollTop })
   }
 
-  let scrollAdditionalProps: ScrollAdditionalProps = {
-    style: { ...innerStyle, ...layoutStyle },
-    pinchGestureEnabled: false,
-    horizontal: scrollX && !scrollY,
-    scrollEventThrottle: scrollEventThrottle,
-    scrollsToTop: enableBackToTop,
-    showsHorizontalScrollIndicator: scrollX && showScrollbar,
-    showsVerticalScrollIndicator: scrollY && showScrollbar,
-    scrollEnabled: scrollX || scrollY,
-    ref: scrollViewRef,
-    onScroll: onScroll,
-    onContentSizeChange: onContentSizeChange,
-    bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) ? onScrollTouchStart : undefined,
-    bindtouchmove: ((enhanced && binddragging) || bindtouchend) ? onScrollTouchMove : undefined,
-    bindtouchend: ((enhanced && binddragend) || bindtouchend) ? onScrollTouchEnd : undefined,
-    onScrollBeginDrag: onScrollDrag,
-    onScrollEndDrag: onScrollDrag,
-    onMomentumScrollEnd: onScrollEnd,
-    ...layoutProps,
-    ...(simultaneousHandlers ? { simultaneousHandlers } : {}),
-    ...(waitForHandlers ? { waitFor: waitForHandlers } : {})
-  }
+  const scrollAdditionalProps: ScrollAdditionalProps = extendObject(
+    {
+      style: extendObject({}, innerStyle, layoutStyle),
+      pinchGestureEnabled: false,
+      horizontal: scrollX && !scrollY,
+      scrollEventThrottle: scrollEventThrottle,
+      scrollsToTop: enableBackToTop,
+      showsHorizontalScrollIndicator: scrollX && showScrollbar,
+      showsVerticalScrollIndicator: scrollY && showScrollbar,
+      scrollEnabled: scrollX || scrollY,
+      ref: scrollViewRef,
+      onScroll: onScroll,
+      onContentSizeChange: onContentSizeChange,
+      bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
+      bindtouchmove: ((enhanced && binddragging) || bindtouchend) && onScrollTouchMove,
+      bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd,
+      onScrollBeginDrag: onScrollDrag,
+      onScrollEndDrag: onScrollDrag,
+      onMomentumScrollEnd: onScrollEnd
+    },
+    (simultaneousHandlers ? { simultaneousHandlers } : {}),
+    (waitForHandlers ? { waitFor: waitForHandlers } : {}),
+    layoutProps
+  )
+
   if (enhanced) {
-    scrollAdditionalProps = {
-      ...scrollAdditionalProps,
+    Object.assign(scrollAdditionalProps, {
       bounces,
       pagingEnabled
-    }
+    })
   }
 
   const innerProps = useInnerProps(props, scrollAdditionalProps, [
@@ -489,32 +496,26 @@ 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
-          }
-        )
+  return createElement(
+    ScrollView,
+    extendObject({}, innerProps, {
+      refreshControl: refresherEnabled
+        ? createElement(RefreshControl, extendObject({
+          progressBackgroundColor: refresherBackground,
+          refreshing: refreshing,
+          onRefresh: onRefresh
+        }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
+        : undefined
+    }),
+    wrapChildren(
+      props,
+      {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
       }
-    </ScrollView>
+    )
   )
 })
 

package/lib/runtime/components/react/mpx-simple-text.tsx

@@ -0,0 +1,18 @@
+import { Text, TextProps } from 'react-native'
+import { JSX, createElement } from 'react'
+
+import { extendObject } from './utils'
+
+const _Text2 = (props: TextProps): JSX.Element => {
+  const {
+    allowFontScaling = false
+  } = props
+
+  return createElement(Text, extendObject({}, props, {
+    allowFontScaling
+  }))
+}
+
+_Text2.displayName = 'MpxSimpleText'
+
+export default _Text2