@mpxjs/webpack-plugin 2.9.69 → 2.9.70

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

@@ -9,7 +9,7 @@
  * ✔ bindlongtap
  * ✔ binderror
  */
-import React, { useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
+import React, { createElement, useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
 import { View, Platform, StyleSheet, NativeSyntheticEvent } from 'react-native'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
@@ -73,7 +73,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     hasSelfPercent,
     setWidth,
     setHeight
-  } = useTransformStyle(extendObject(style, stylesheet.container), {
+  } = useTransformStyle(extendObject({}, style, stylesheet.container), {
     enableVar,
     externalVarContext,
     parentFontSize,
@@ -93,7 +93,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    style: extendObject(normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
+    style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
     ...layoutProps
   }, [], {
     layoutRef
@@ -106,7 +106,11 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   useEffect(() => {
     const webviewPostMessage = (message: WebviewMessage) => {
       if (canvasRef.current.webview) {
-        canvasRef.current.webview.postMessage(JSON.stringify(message))
+        const jsCode = `
+        window.mpxWebviewMessageCallback(${JSON.stringify(message)});
+        true;
+      `
+        canvasRef.current.webview.injectJavaScript(jsCode)
       }
     }
 
@@ -249,54 +253,48 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
 
   if (Platform.OS === 'android') {
     const isAndroid9 = Platform.Version >= 28
-    return (
-      <View {...innerProps}>
-        <WebView
-         ref={(element) => {
-           if (canvasRef.current) {
-             canvasRef.current.webview = element
-           }
-         }}
-          style={[
-            isAndroid9 ? stylesheet.webviewAndroid9 : stylesheet.webview,
-            { height, width }
-          ]}
-          source={{ html }}
-          originWhitelist={originWhitelist}
-          onMessage={onMessage}
-          onLoad={onLoad}
-          overScrollMode="never"
-          mixedContentMode="always"
-          scalesPageToFit={false}
-          javaScriptEnabled
-          domStorageEnabled
-          thirdPartyCookiesEnabled
-          allowUniversalAccessFromFileURLs
-        />
-      </View>
-    )
-  }
-
-  return (
-    <View
-      {...innerProps}
-    >
-      <WebView
-        ref={(element) => {
+    return createElement(View, innerProps, createElement(
+      WebView,
+      {
+        ref: (element) => {
           if (canvasRef.current) {
             canvasRef.current.webview = element
           }
-        }}
-        style={[stylesheet.webview, { height, width }]}
-        source={{ html }}
-        originWhitelist={originWhitelist}
-        onMessage={onMessage}
-        onLoad={onLoad}
-        scrollEnabled={false}
-      />
-    </View>
-  )
+        },
+        style: [
+          isAndroid9 ? stylesheet.webviewAndroid9 : stylesheet.webview,
+          { height, width }
+        ],
+        source: { html },
+        originWhitelist: originWhitelist,
+        onMessage: onMessage,
+        onLoad: onLoad,
+        overScrollMode: 'never',
+        mixedContentMode: 'always',
+        scalesPageToFit: false,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        thirdPartyCookiesEnabled: true,
+        allowUniversalAccessFromFileURLs: true
+      })
+    )
+  }
+
+  return createElement(View, innerProps, createElement(WebView, {
+    ref: (element) => {
+      if (canvasRef.current) {
+        canvasRef.current.webview = element
+      }
+    },
+    style: [stylesheet.webview, { height, width }],
+    source: { html },
+    originWhitelist: originWhitelist,
+    onMessage: onMessage,
+    onLoad: onLoad,
+    scrollEnabled: false
+  }))
 })
+
 _Canvas.displayName = 'mpxCanvas'
 
 export default _Canvas

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

@@ -8,7 +8,8 @@ import {
   ReactNode,
   useContext,
   useMemo,
-  useEffect
+  useEffect,
+  createElement
 } from 'react'
 import {
   View,
@@ -19,7 +20,7 @@ import { warn } from '@mpxjs/utils'
 import { FormContext, FormFieldValue, CheckboxGroupContext, 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 CheckboxGroupProps {
   name: string
@@ -64,10 +65,7 @@ const CheckboxGroup = forwardRef<
     flexWrap: 'wrap'
   }
 
-  const styleObj = {
-    ...defaultStyle,
-    ...style
-  }
+  const styleObj = extendObject({}, defaultStyle, style)
 
   const {
     hasSelfPercent,
@@ -80,7 +78,7 @@ const CheckboxGroup = forwardRef<
 
   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 })
 
@@ -119,12 +117,16 @@ const CheckboxGroup = forwardRef<
 
   const innerProps = useInnerProps(
     props,
-    {
-      ref: nodeRef,
-      style: { ...normalStyle, ...layoutStyle },
-      ...layoutProps
-    },
-    [],
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle)
+      },
+      layoutProps
+    ),
+    [
+      'name'
+    ],
     {
       layoutRef
     }
@@ -155,20 +157,21 @@ const CheckboxGroup = forwardRef<
       notifyChange
     }
   }, [])
-  return (
-    <View {...innerProps}>
-      <CheckboxGroupContext.Provider value={contextValue}>
+
+  return createElement(
+    View,
+    innerProps,
+    createElement(
+      CheckboxGroupContext.Provider,
+      { value: contextValue },
+      wrapChildren(
+        props,
         {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current
-            }
-          )
+          hasVarDec,
+          varContext: varContextRef.current
         }
-      </CheckboxGroupContext.Provider>
-    </View>
+      )
+    )
   )
 })
 

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

@@ -13,7 +13,8 @@ import {
   ReactNode,
   useContext,
   Dispatch,
-  SetStateAction
+  SetStateAction,
+  createElement
 } from 'react'
 import {
   View,
@@ -25,7 +26,7 @@ import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import Icon from './mpx-icon'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import { CheckboxGroupContext, LabelContext } from './context'
 
 interface Selection {
@@ -46,7 +47,7 @@ export interface CheckboxProps extends Selection {
   'parent-height'?: number;
   children?: ReactNode
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  catchtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  _onChange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown, { checked }: { checked: boolean }) => void
 }
 
 const styles = StyleSheet.create({
@@ -92,7 +93,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       'parent-width': parentWidth,
       'parent-height': parentHeight,
       bindtap,
-      catchtap
+      _onChange
     } = props
 
     const [isChecked, setIsChecked] = useState<boolean>(!!checked)
@@ -101,15 +102,13 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined
     let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
-    const defaultStyle = {
-      ...styles.wrapper,
-      ...(disabled && styles.wrapperDisabled)
-    }
+    const defaultStyle = extendObject(
+      {},
+      styles.wrapper,
+      disabled ? styles.wrapperDisabled : null
+    )
 
-    const styleObj = {
-      ...styles.container,
-      ...style
-    }
+    const styleObj = extendObject({}, styles.container, style)
 
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
       if (disabled) return
@@ -119,20 +118,15 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
         groupValue[value].checked = checked
       }
       notifyChange && notifyChange(evt)
+      // Called when the switch type attribute is checkbox
+      _onChange && _onChange(evt, { checked })
     }
 
     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))
-      onChange(evt)
-    }
-
     const {
       hasSelfPercent,
       normalStyle,
@@ -145,13 +139,13 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     const nodeRef = useRef(null)
 
     useNodesRef(props, ref, nodeRef, {
-      defaultStyle,
+      style: extendObject({}, defaultStyle, normalStyle),
       change: onChange
     })
 
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
     if (backgroundStyle) {
       warn('Checkbox does not support background image-related styles!')
@@ -170,14 +164,21 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
 
     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
       }
@@ -206,28 +207,26 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       }
     }, [checked])
 
-    return (
-      <View {...innerProps}>
-        <View style={defaultStyle}>
-          <Icon
-            type='success_no_circle'
-            size={18}
-            color={disabled ? '#ADADAD' : color}
-            style={isChecked ? styles.iconChecked : styles.icon}
-          />
-        </View>
+    return createElement(View, innerProps,
+      createElement(
+        View,
+        { style: defaultStyle },
+        createElement(Icon, {
+          type: 'success_no_circle',
+          size: 18,
+          color: disabled ? '#ADADAD' : color,
+          style: isChecked ? styles.iconChecked : styles.icon
+        })
+      ),
+      wrapChildren(
+        props,
         {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
         }
-      </View>
+      )
     )
   }
 )

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

@@ -5,11 +5,11 @@
  * ✔ bindreset
  */
 import { View } from 'react-native'
-import { JSX, useRef, forwardRef, ReactNode, useMemo, useCallback } from 'react'
+import { JSX, useRef, forwardRef, ReactNode, useMemo, createElement } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils'
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject } from './utils'
 interface FormProps {
   style?: Record<string, any>;
   children?: ReactNode;
@@ -47,21 +47,23 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { textStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   const formRef = useRef(null)
-  useNodesRef(props, ref, formRef)
+  useNodesRef(props, ref, formRef, {
+    style: normalStyle
+  })
 
   const propsRef = useRef<FormProps>({})
   propsRef.current = props
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
 
-  const innerProps = useInnerProps(props, {
-    style: { ...innerStyle, ...layoutStyle },
-    ref: formRef,
-    ...layoutProps
-  }, [
+  const innerProps = useInnerProps(props, extendObject({
+    style: extendObject({}, innerStyle, layoutStyle),
+    ref: formRef
+  }, layoutProps)
+  , [
     'bindsubmit',
     'bindreset'
   ], { layoutRef })
@@ -100,25 +102,20 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
       reset
     }
   }, [])
-  return (
-    <View
-      {...innerProps}
-    >
-      <FormContext.Provider value={contextValue}>
-        {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )
-        }
-      </FormContext.Provider>
-    </View>
-  )
+
+  return createElement(View, innerProps, createElement(
+    FormContext.Provider,
+    { value: contextValue },
+    wrapChildren(
+      props,
+      {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+      }
+    )
+  ))
 })
 
 _Form.displayName = 'MpxForm'

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

@@ -3,11 +3,11 @@
  * ✔ size
  * ✔ color
  */
-import { JSX, forwardRef, useRef } from 'react'
+import { JSX, forwardRef, useRef, createElement } from 'react'
 import { Text, TextStyle, Image } from 'react-native'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { useLayout, useTransformStyle } from './utils'
+import { useLayout, useTransformStyle, extendObject } from './utils'
 
 export type IconType =
   | 'success'
@@ -63,10 +63,7 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
 
     const defaultStyle = { width: ~~size, height: ~~size }
 
-    const styleObj = {
-      ...defaultStyle,
-      ...style
-    }
+    const styleObj = extendObject({}, defaultStyle, style)
 
     const {
       hasSelfPercent,
@@ -76,29 +73,27 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
     } = 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 })
 
     const innerProps = useInnerProps(
       props,
-      {
-        ref: nodeRef,
-        style: {
-          ...normalStyle,
-          ...layoutStyle,
-          tintColor: color
+      extendObject(
+        {
+          ref: nodeRef,
+          source: { uri },
+          style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
         },
-        source: { uri },
-        ...layoutProps
-      },
+        layoutProps
+      ),
       [],
       {
         layoutRef
       }
     )
 
-    return <Image {...innerProps} />
+    return createElement(Image, innerProps)
   }
 )