@mpxjs/webpack-plugin 2.9.59 → 2.9.62

package/lib/runtime/components/react/dist/useNodesRef.js

@@ -1,13 +1,8 @@
-import { useRef, useEffect, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
 export default function useNodesRef(props, ref, instance = {}) {
     const nodeRef = useRef(null);
-    const _props = useRef(props);
-    useEffect(() => {
-        _props.current = props;
-        return () => {
-            _props.current = null; // 组件销毁，清空 _props 依赖数据
-        };
-    }, [props]);
+    const _props = useRef(null);
+    _props.current = props;
     useImperativeHandle(ref, () => {
         return {
             getNodeInstance() {

package/lib/runtime/components/react/dist/utils.js

@@ -1,7 +1,11 @@
-import { useEffect, useRef, Children, isValidElement } from 'react';
-import { StyleSheet } from 'react-native';
+import { useEffect, useRef, isValidElement } from 'react';
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
+export const IMAGE_STYLE_REGEX = /^background(Image|Size|Repeat|Position)$/;
+export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/;
+export const DEFAULT_STYLE = {
+    fontSize: 16
+};
 const URL_REGEX = /url\(["']?(.*?)["']?\)/;
 export function omit(obj, fields) {
     const shallowCopy = Object.assign({}, obj);
@@ -11,17 +15,6 @@ export function omit(obj, fields) {
     }
     return shallowCopy;
 }
-/**
- * 从 style 中提取 TextStyle
- * @param style
- * @returns
- */
-export const extractTextStyle = (style) => {
-    return Object.entries(StyleSheet.flatten(style)).reduce((textStyle, [key, value]) => {
-        TEXT_STYLE_REGEX.test(key) && Object.assign(textStyle, { [key]: value });
-        return textStyle;
-    }, {});
-};
 /**
  * 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
  */
@@ -75,6 +68,81 @@ export const isText = (ele) => {
     }
     return false;
 };
+export const isEmbedded = (ele) => {
+    if (isValidElement(ele)) {
+        const displayName = ele.type?.displayName;
+        return displayName && ['mpx-checkbox', 'mpx-radio', 'mpx-switch'].includes(displayName);
+    }
+    return false;
+};
 export function every(children, callback) {
-    return Children.toArray(children).every((child) => callback(child));
+    const childrenArray = Array.isArray(children) ? children : [children];
+    return childrenArray.every((child) => callback(child));
+}
+export function groupBy(obj, callback, group = {}) {
+    let groupKey = '';
+    for (let key in obj) {
+        if (obj.hasOwnProperty(key)) { // 确保处理对象自身的属性
+            let val = obj[key];
+            groupKey = callback(key, val);
+            if (!group[groupKey]) {
+                group[groupKey] = {};
+            }
+            group[groupKey][key] = val;
+        }
+    }
+    return group;
 }
+export const normalizeStyle = (style = {}) => {
+    const { borderRadius } = style;
+    if (borderRadius && PERCENT_REGEX.test(borderRadius)) {
+        style.borderTopLeftRadius = borderRadius;
+        style.borderBottomLeftRadius = borderRadius;
+        style.borderBottomRightRadius = borderRadius;
+        style.borderTopRightRadius = borderRadius;
+        delete style.borderRadius;
+    }
+    ['backgroundSize', 'backgroundPosition'].forEach(name => {
+        if (style[name] && typeof style[name] === 'string') {
+            if (style[name].trim()) {
+                style[name] = style[name].split(' ');
+            }
+        }
+    });
+    return style;
+};
+export function splitStyle(styles) {
+    return groupBy(styles, (key) => {
+        if (TEXT_STYLE_REGEX.test(key)) {
+            return 'textStyle';
+        }
+        else if (IMAGE_STYLE_REGEX.test(key)) {
+            return 'imageStyle';
+        }
+        else {
+            return 'innerStyle';
+        }
+    }, {});
+}
+export function splitProps(props) {
+    return groupBy(props, (key) => {
+        if (TEXT_PROPS_REGEX.test(key)) {
+            return 'textProps';
+        }
+        else {
+            return 'innerProps';
+        }
+    }, {});
+}
+export const throwReactWarning = (message) => {
+    setTimeout(() => {
+        console.warn(message);
+    }, 0);
+};
+export const transformTextStyle = (styleObj) => {
+    let { lineHeight } = styleObj;
+    if (typeof lineHeight === 'string' && PERCENT_REGEX.test(lineHeight)) {
+        lineHeight = (parseFloat(lineHeight) / 100) * (styleObj.fontSize || DEFAULT_STYLE.fontSize);
+        styleObj.lineHeight = lineHeight;
+    }
+};

package/lib/runtime/components/react/getInnerListeners.ts

@@ -97,8 +97,10 @@ export const getCustomEvent = (
       dataset: getDataSet(props),
       offsetLeft: layoutRef?.current?.offsetLeft || 0,
       offsetTop: layoutRef?.current?.offsetTop || 0
-    }
-
+    },
+    persist: oe.persist,
+    stopPropagation: oe.stopPropagation,
+    preventDefault: oe.preventDefault
   }
 }
 
@@ -106,7 +108,7 @@ const useInnerProps = (
   props: Props = {},
   additionalProps: AdditionalProps = {},
   removeProps: RemoveProps = [],
-  rawConfig: UseInnerPropsConfig
+  rawConfig?: UseInnerPropsConfig
 ) => {
   const ref = useRef<InnerRef>({
     startTimer: {
@@ -127,7 +129,7 @@ const useInnerProps = (
 
   const propsRef = useRef<Record<string, any>>({})
   const eventConfig: { [key: string]: string[] } = {}
-  const config = rawConfig || {}
+  const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false }
 
   propsRef.current = { ...props, ...additionalProps }
 
@@ -156,6 +158,19 @@ const useInnerProps = (
       }
     })
   }
+
+  function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture') {
+    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 }
+    const nativeEvent = e.nativeEvent
+    const currentPageX = nativeEvent.changedTouches[0].pageX
+    const currentPageY = nativeEvent.changedTouches[0].pageY
+    if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
+      ref.current.needPress[type] = false
+      ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
+      ref.current.startTimer[type] = null
+    }
+  }
+
   function handleTouchstart(e: NativeTouchEvent, type: 'bubble' | 'capture') {
     e.persist()
     const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
@@ -184,20 +199,14 @@ const useInnerProps = (
   function handleTouchmove(e: NativeTouchEvent, type: 'bubble' | 'capture') {
     const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
     const captureTouchEvent = ['capture-catchtouchmove', 'capture-bindtouchmove']
-    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 }
-    const nativeEvent = e.nativeEvent
-    const currentPageX = nativeEvent.changedTouches[0].pageX
-    const currentPageY = nativeEvent.changedTouches[0].pageY
     const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
-      ref.current.needPress[type] = false
-      ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-      ref.current.startTimer[type] = null
-    }
     handleEmitEvent(currentTouchEvent, 'touchmove', e)
+    checkIsNeedPress(e, type)
   }
 
   function handleTouchend(e: NativeTouchEvent, type: 'bubble' | 'capture') {
+    // move event may not be triggered
+    checkIsNeedPress(e, type)
     const bubbleTouchEvent = ['catchtouchend', 'bindtouchend']
     const bubbleTapEvent = ['catchtap', 'bindtap']
     const captureTouchEvent = ['capture-catchtouchend', 'capture-bindtouchend']
@@ -208,6 +217,9 @@ const useInnerProps = (
     ref.current.startTimer[type] = null
     handleEmitEvent(currentTouchEvent, 'touchend', e)
     if (ref.current.needPress[type]) {
+      if (type === 'bubble' && config.disableTap) {
+        return
+      }
       handleEmitEvent(currentTapEvent, 'tap', e)
     }
   }

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

@@ -4,7 +4,7 @@
  * ✔ plain
  * ✔ disabled
  * ✔ loading
- * ✘ form-type
+ * ✔ form-type
  * - open-type: Partially. Only support `share`、`getUserInfo`
  * ✔ hover-class: Convert hoverClass to hoverStyle.
  * ✔ hover-style
@@ -34,27 +34,23 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  ReactNode,
-  forwardRef,
-} from 'react'
+import { useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
+
 import {
   View,
   Text,
   StyleSheet,
-  StyleProp,
   ViewStyle,
   TextStyle,
   Animated,
   Easing,
   NativeSyntheticEvent,
 } from 'react-native'
-import { extractTextStyle, isText, every } from './utils'
+import { splitStyle, isText, every, splitProps, throwReactWarning, transformTextStyle } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
+import { FormContext } from './context'
+import { isEmptyObject } from '@mpxjs/utils'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -74,16 +70,16 @@ export interface ButtonProps {
   disabled?: boolean
   loading?: boolean
   'hover-class'?: string
-  'hover-style'?: StyleProp<ViewStyle & TextStyle>
+  'hover-style'?: ViewStyle & TextStyle & Record<string, any>
   'hover-start-time'?: number
   'hover-stay-time'?: number
   'open-type'?: OpenType
+  'form-type'?: 'submit' | 'reset'
   'enable-offset'?: boolean,
-  style?: StyleProp<ViewStyle & TextStyle>
+  style?: ViewStyle & TextStyle & Record<string, any>
   children: ReactNode
   bindgetuserinfo?: (userInfo: any) => void
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  catchtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchstart?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchend?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
@@ -132,27 +128,27 @@ const styles = StyleSheet.create({
 const getOpenTypeEvent = (openType: OpenType) => {
   // @ts-ignore
   if (!global?.__mpx?.config?.rnConfig) {
-    console.warn('Environment not supported')
+    throwReactWarning('[Mpx runtime warn]: Environment not supported')
     return
   }
 
   const eventName = OpenTypeEventsMap.get(openType)
   if (!eventName) {
-    console.warn(`open-type not support ${openType}`)
+    throwReactWarning(`[Mpx runtime warn]: open-type not support ${openType}`)
     return
   }
 
   // @ts-ignore
   const event = global.__mpx.config.rnConfig?.openTypeHandler?.[eventName]
   if (!event) {
-    console.warn(`Unregistered ${eventName} event`)
+    throwReactWarning(`[Mpx runtime warn]: Unregistered ${eventName} event`)
     return
   }
 
   return event
 }
 
-const Loading = ({ alone = false }: { alone: boolean }): React.JSX.Element => {
+const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
   const image = useRef(new Animated.Value(0)).current
 
   const rotate = image.interpolate({
@@ -188,7 +184,7 @@ const Loading = ({ alone = false }: { alone: boolean }): React.JSX.Element => {
   return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }} />
 }
 
-const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, ref): React.JSX.Element => {
+const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, ref): JSX.Element => {
   const {
     size = 'default',
     type = 'default',
@@ -196,20 +192,31 @@ const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, r
     disabled = false,
     loading = false,
     'hover-class': hoverClass,
-    'hover-style': hoverStyle = [],
+    'hover-style': hoverStyle = {},
     'hover-start-time': hoverStartTime = 20,
     'hover-stay-time': hoverStayTime = 70,
     'open-type': openType,
     'enable-offset': enableOffset,
-    style = [],
+    'form-type': formType,
+    style = {},
     children,
     bindgetuserinfo,
     bindtap,
-    catchtap,
     bindtouchstart,
     bindtouchend,
   } = props
 
+
+  const formContext = useContext(FormContext)
+
+  let submitFn: () => void | undefined;
+  let resetFn: () => void | undefined;
+
+  if (formContext) {
+    submitFn = formContext.submit
+    resetFn = formContext.reset
+  }
+
   const refs = useRef<{
     hoverStartTimer: ReturnType<typeof setTimeout> | undefined
     hoverStayTimer: ReturnType<typeof setTimeout> | undefined
@@ -226,9 +233,13 @@ const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, r
 
   const applyHoverEffect = isHover && hoverClass !== 'none'
 
-  const inheritTextStyle = extractTextStyle(style)
+  const { textStyle, imageStyle, innerStyle } = splitStyle(style)
+
+  const { textStyle: hoverTextStyle, imageStyle: hoverImageStyle, innerStyle: hoverInnerStyle } = splitStyle(hoverStyle)
 
-  const textHoverStyle = extractTextStyle(hoverStyle)
+  if (imageStyle || hoverImageStyle) {
+    throwReactWarning('[Mpx runtime warn]: Button does not support background image-related styles!')
+  }
 
   const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]
 
@@ -237,16 +248,16 @@ const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, r
   const plainBorderColor = disabled
     ? 'rgba(0, 0, 0, .2)'
     : applyHoverEffect
-    ? `rgba(${plainColor},.6)`
-    : `rgb(${plainColor})`
+      ? `rgba(${plainColor},.6)`
+      : `rgb(${plainColor})`
 
   const normalBorderColor = type === 'default' ? 'rgba(0, 0, 0, .2)' : normalBackgroundColor
 
   const plainTextColor = disabled
     ? 'rgba(0, 0, 0, .2)'
     : applyHoverEffect
-    ? `rgba(${plainColor}, .6)`
-    : `rgb(${plainColor})`
+      ? `rgba(${plainColor}, .6)`
+      : `rgb(${plainColor})`
 
   const normalTextColor =
     type === 'default'
@@ -260,20 +271,17 @@ const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, r
     backgroundColor: plain ? 'transparent' : normalBackgroundColor,
   }
 
-  const textStyle = {
-    color: plain ? plainTextColor : normalTextColor,
-    ...inheritTextStyle
+  const defaultViewStyle = {
+    ...styles.button,
+    ...(isMiniSize && styles.buttonMini),
+    ...viewStyle,
   }
 
-  const defaultViewStyle = [
-    styles.button,
-    isMiniSize && styles.buttonMini || {},
-    viewStyle,
-  ]
-
-  const defaultTextStyle = [
-    styles.text, isMiniSize && styles.textMini, textStyle
-  ]
+  const defaultTextStyle = {
+    ...styles.text,
+    ...(isMiniSize && styles.textMini),
+    color: plain ? plainTextColor : normalTextColor,
+  }
 
   const handleOpenTypeEvent = (evt: NativeSyntheticEvent<TouchEvent>) => {
     if (!openType) return
@@ -286,11 +294,13 @@ const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, r
       })
     }
 
-    if (openType === 'getUserInfo') {
-      const userInfo = handleEvent && handleEvent()
-      if (typeof userInfo === 'object') {
-        bindgetuserinfo && bindgetuserinfo(userInfo)
-      }
+    if (openType === 'getUserInfo' && handleEvent && bindgetuserinfo) {
+      Promise.resolve(handleEvent)
+        .then((userInfo) => {
+          if (typeof userInfo === 'object') {
+            bindgetuserinfo(userInfo)
+          }
+        })
     }
   }
 
@@ -322,32 +332,41 @@ const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, r
     setStayTimer()
   }
 
+  const handleFormTypeFn = () => {
+    if (formType === 'submit') {
+      submitFn && submitFn()
+    } else if (formType === 'reset') {
+      resetFn && resetFn()
+    }
+  }
   const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
     if (disabled) return
     bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
     handleOpenTypeEvent(evt)
+    handleFormTypeFn()
   }
 
-  const catchTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    if (disabled) return
-    catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props))
-  }
+  function wrapChildren(children: ReactNode, defaultTextStyle: Record<string, any>, textStyle: Record<string, any>) {
+    if (!children) return children
+    const hasTextStyle = !isEmptyObject(textStyle)
+    const { textProps } = splitProps(props)
 
-  function wrapChildren(children: ReactNode, textStyle?: StyleProp<TextStyle>) {
-    if (every(children, (child)=>isText(child))) {
-      children = [<Text key='buttonTextWrap' style={textStyle}>{children}</Text>]
+    if (every(children, (child) => isText(child))) {
+      transformTextStyle(textStyle as TextStyle)
+      children = <Text key='buttonTextWrap' style={{ ...defaultTextStyle, ...textStyle }} {...(textProps || {})}>{children}</Text>
     } else {
-      if(textStyle) console.warn('Text style will be ignored unless every child of the Button is Text node!')
+      if (hasTextStyle) throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the Button is Text node!')
     }
-  
+
     return children
   }
 
   const { nodeRef } = useNodesRef(props, ref, {
-    defaultStyle: StyleSheet.flatten([
+    defaultStyle: {
       ...defaultViewStyle,
       ...defaultTextStyle,
-    ])
+      ...textStyle
+    }
   })
 
   const onLayout = () => {
@@ -363,33 +382,34 @@ const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, r
       bindtouchstart: onTouchStart,
       bindtouchend: onTouchEnd,
       bindtap: onTap,
-      catchtap: catchTap,
       ...(enableOffset ? { onLayout } : {}),
     },
     [
       'enable-offset'
     ],
-    { 
-      layoutRef
+    {
+      layoutRef,
+      disableTap: disabled
     }
   );
 
   return (
     <View
       {...innerProps}
-      style={[
+      style={{
         ...defaultViewStyle,
-        style,
-        applyHoverEffect && hoverStyle,
-      ]}>
+        ...innerStyle,
+        ...(applyHoverEffect && hoverInnerStyle),
+      } as ViewStyle}>
       {loading && <Loading alone={!children} />}
       {
         wrapChildren(
-          children, 
-          [
-            ...defaultTextStyle,
-            applyHoverEffect && textHoverStyle,
-          ]
+          children,
+          defaultTextStyle,
+          {
+            ...textStyle,
+            ...(applyHoverEffect && hoverTextStyle),
+          }
         )
       }
     </View>

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

@@ -0,0 +1,147 @@
+/**
+ * ✔ bindchange
+ */
+import {
+  JSX,
+  useRef,
+  forwardRef,
+  ReactNode,
+  useContext
+} from 'react'
+import {
+  View,
+  NativeSyntheticEvent,
+  ViewStyle
+} from 'react-native'
+import { FormContext, FormFieldValue, CheckboxGroupContext, GroupValue } from './context'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { throwReactWarning } from './utils'
+
+export interface CheckboxGroupProps {
+  name: string
+  style?: ViewStyle & Record<string, any>
+  'enable-offset'?: boolean
+  children: ReactNode
+  bindchange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
+}
+
+const CheckboxGroup = forwardRef<
+  HandlerRef<View, CheckboxGroupProps>,
+  CheckboxGroupProps
+>((props, ref): JSX.Element => {
+  const {
+    style = {},
+    'enable-offset': enableOffset,
+    children,
+    bindchange
+  } = props
+
+  const layoutRef = useRef({})
+  const formContext = useContext(FormContext)
+
+  let formValuesMap: Map<string, FormFieldValue> | undefined;
+
+  if (formContext) {
+    formValuesMap = formContext.formValuesMap
+  }
+
+  const groupValue: GroupValue = useRef({}).current
+
+  const defaultStyle = {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    ...style
+  }
+  const { nodeRef } = useNodesRef(props, ref, {
+    defaultStyle
+  })
+
+  const onLayout = () => {
+    nodeRef.current?.measure(
+      (
+        x: number,
+        y: number,
+        width: number,
+        height: number,
+        offsetLeft: number,
+        offsetTop: number
+      ) => {
+        layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+      }
+    )
+  }
+
+  const getSelectionValue = (): string[] => {
+    const arr: string[] = []
+    for (let key in groupValue) {
+      if (groupValue[key].checked) {
+        arr.push(key)
+      }
+    }
+    return arr
+  }
+
+  const getValue = () => {
+    return getSelectionValue()
+  }
+
+  const resetValue = () => {
+    Object.keys(groupValue).forEach((key) => {
+      groupValue[key].checked = false
+      groupValue[key].setValue(false)
+    })
+  }
+
+  if (formValuesMap) {
+    if (!props.name) {
+      throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.')
+    } else {
+      formValuesMap.set(props.name, { getValue, resetValue })
+    }
+  }
+
+  const notifyChange = (
+    evt: NativeSyntheticEvent<TouchEvent>
+  ) => {
+    bindchange &&
+      bindchange(
+        getCustomEvent(
+          'tap',
+          evt,
+          {
+            layoutRef,
+            detail: {
+              value: getSelectionValue()
+            }
+          },
+          props
+        )
+      )
+  }
+
+  const innerProps = useInnerProps(
+    props,
+    {
+      ref: nodeRef,
+      style: defaultStyle,
+      ...(enableOffset ? { onLayout } : {})
+    },
+    ['enable-offset'],
+    {
+      layoutRef
+    }
+  )
+
+  return (
+    <View {...innerProps}>
+      <CheckboxGroupContext.Provider value={{ groupValue, notifyChange }}>
+        {children}
+      </CheckboxGroupContext.Provider>
+    </View>
+  )
+})
+
+CheckboxGroup.displayName = 'mpx-checkbox-group'
+
+export default CheckboxGroup