@mpxjs/webpack-plugin 2.9.62 → 2.9.65

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

@@ -35,22 +35,20 @@
  * ✔ bindtap
  */
 import { useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
-
 import {
   View,
-  Text,
   StyleSheet,
   ViewStyle,
   TextStyle,
   Animated,
   Easing,
-  NativeSyntheticEvent,
+  NativeSyntheticEvent
 } from 'react-native'
-import { splitStyle, isText, every, splitProps, throwReactWarning, transformTextStyle } from './utils'
+import { warn } from '@mpxjs/utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } 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'
 
@@ -76,6 +74,11 @@ export interface ButtonProps {
   'open-type'?: OpenType
   'form-type'?: 'submit' | 'reset'
   'enable-offset'?: boolean,
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   style?: ViewStyle & TextStyle & Record<string, any>
   children: ReactNode
   bindgetuserinfo?: (userInfo: any) => void
@@ -90,12 +93,12 @@ const LOADING_IMAGE_URI =
 const TypeColorMap: Record<Type, TypeColor> = {
   default: ['#F8F8F8', '#DEDEDE', '35,35,35', '#F7F7F7'],
   primary: ['#1AAD19', '#179B16', '26,173,25', '#9ED99D'],
-  warn: ['#E64340', '#CE3C39', '230,67,64', '#EC8B89'],
+  warn: ['#E64340', '#CE3C39', '230,67,64', '#EC8B89']
 }
 
 const OpenTypeEventsMap = new Map<OpenType, OpenTypeEvent>([
   ['share', 'onShareAppMessage'],
-  ['getUserInfo', 'onUserInfo'],
+  ['getUserInfo', 'onUserInfo']
 ])
 
 const styles = StyleSheet.create({
@@ -110,38 +113,35 @@ const styles = StyleSheet.create({
     marginHorizontal: 'auto' // 按钮默认居中
   },
   buttonMini: {
-    height: 30,
+    height: 30
   },
   text: {
     fontSize: 18,
-    color: '#000000',
+    color: '#000000'
   },
   textMini: {
-    fontSize: 13,
+    fontSize: 13
   },
   loading: {
     width: 20,
-    height: 20,
-  },
+    height: 20
+  }
 })
 
 const getOpenTypeEvent = (openType: OpenType) => {
-  // @ts-ignore
-  if (!global?.__mpx?.config?.rnConfig) {
-    throwReactWarning('[Mpx runtime warn]: Environment not supported')
+  if (!global.__mpx?.config?.rnConfig) {
+    warn('Environment not supported')
     return
   }
-
   const eventName = OpenTypeEventsMap.get(openType)
   if (!eventName) {
-    throwReactWarning(`[Mpx runtime warn]: open-type not support ${openType}`)
+    warn(`open-type not support ${openType}`)
     return
   }
 
-  // @ts-ignore
-  const event = global.__mpx.config.rnConfig?.openTypeHandler?.[eventName]
+  const event = global.__mpx.config.rnConfig.openTypeHandler?.[eventName]
   if (!event) {
-    throwReactWarning(`[Mpx runtime warn]: Unregistered ${eventName} event`)
+    warn(`Unregistered ${eventName} event`)
     return
   }
 
@@ -153,7 +153,7 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
 
   const rotate = image.interpolate({
     inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
+    outputRange: ['0deg', '360deg']
   })
 
   useEffect(() => {
@@ -163,7 +163,7 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
         duration: 1000,
         easing: Easing.linear,
         useNativeDriver: true,
-        isInteraction: false,
+        isInteraction: false
       })
     )
 
@@ -172,19 +172,20 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
     return () => {
       animation.stop()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const loadingStyle = {
     ...styles.loading,
     transform: [{ rotate }],
-    marginRight: alone ? 0 : 5,
+    marginRight: alone ? 0 : 5
   }
 
   return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }} />
 }
 
-const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, ref): JSX.Element => {
+const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonProps, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(buttonProps)
+
   const {
     size = 'default',
     type = 'default',
@@ -196,21 +197,24 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
     'hover-start-time': hoverStartTime = 20,
     'hover-stay-time': hoverStayTime = 70,
     'open-type': openType,
-    'enable-offset': enableOffset,
     'form-type': formType,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
     style = {},
     children,
     bindgetuserinfo,
     bindtap,
     bindtouchstart,
-    bindtouchend,
+    bindtouchend
   } = props
 
-
   const formContext = useContext(FormContext)
 
-  let submitFn: () => void | undefined;
-  let resetFn: () => void | undefined;
+  let submitFn: () => void | undefined
+  let resetFn: () => void | undefined
 
   if (formContext) {
     submitFn = formContext.submit
@@ -222,25 +226,15 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
     hoverStayTimer: ReturnType<typeof setTimeout> | undefined
   }>({
     hoverStartTimer: undefined,
-    hoverStayTimer: undefined,
+    hoverStayTimer: undefined
   })
 
-  const layoutRef = useRef({})
-
   const [isHover, setIsHover] = useState(false)
 
   const isMiniSize = size === 'mini'
 
   const applyHoverEffect = isHover && hoverClass !== 'none'
 
-  const { textStyle, imageStyle, innerStyle } = splitStyle(style)
-
-  const { textStyle: hoverTextStyle, imageStyle: hoverImageStyle, innerStyle: hoverInnerStyle } = splitStyle(hoverStyle)
-
-  if (imageStyle || hoverImageStyle) {
-    throwReactWarning('[Mpx runtime warn]: Button does not support background image-related styles!')
-  }
-
   const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]
 
   const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color
@@ -268,19 +262,51 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: plain ? plainBorderColor : normalBorderColor,
-    backgroundColor: plain ? 'transparent' : normalBackgroundColor,
+    backgroundColor: plain ? 'transparent' : normalBackgroundColor
   }
 
   const defaultViewStyle = {
     ...styles.button,
     ...(isMiniSize && styles.buttonMini),
-    ...viewStyle,
+    ...viewStyle
   }
 
   const defaultTextStyle = {
     ...styles.text,
     ...(isMiniSize && styles.textMini),
-    color: plain ? plainTextColor : normalTextColor,
+    color: plain ? plainTextColor : normalTextColor
+  }
+
+  const defaultStyle = {
+    ...defaultViewStyle,
+    ...defaultTextStyle
+  }
+
+  const styleObj = {
+    ...defaultStyle,
+    ...style,
+    ...(applyHoverEffect && hoverStyle)
+  }
+
+  const {
+    hasSelfPercent,
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const nodeRef = useRef(null)
+
+  useNodesRef(props, ref, nodeRef, { defaultStyle })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
+  const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+
+  if (backgroundStyle) {
+    warn('Button does not support background image-related styles!')
   }
 
   const handleOpenTypeEvent = (evt: NativeSyntheticEvent<TouchEvent>) => {
@@ -290,7 +316,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
     if (openType === 'share') {
       handleEvent && handleEvent({
         from: 'button',
-        target: getCustomEvent('tap', evt, { layoutRef }, props).target,
+        target: getCustomEvent('tap', evt, { layoutRef }, props).target
       })
     }
 
@@ -339,6 +365,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
       resetFn && resetFn()
     }
   }
+
   const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
     if (disabled) return
     bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
@@ -346,69 +373,34 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((props, re
     handleFormTypeFn()
   }
 
-  function wrapChildren(children: ReactNode, defaultTextStyle: Record<string, any>, textStyle: Record<string, any>) {
-    if (!children) return children
-    const hasTextStyle = !isEmptyObject(textStyle)
-    const { textProps } = splitProps(props)
-
-    if (every(children, (child) => isText(child))) {
-      transformTextStyle(textStyle as TextStyle)
-      children = <Text key='buttonTextWrap' style={{ ...defaultTextStyle, ...textStyle }} {...(textProps || {})}>{children}</Text>
-    } else {
-      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: {
-      ...defaultViewStyle,
-      ...defaultTextStyle,
-      ...textStyle
-    }
-  })
-
-  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 innerProps = useInnerProps(
     props,
     {
       ref: nodeRef,
+      style: { ...innerStyle, ...layoutStyle },
+      ...layoutProps,
       bindtouchstart: onTouchStart,
       bindtouchend: onTouchEnd,
-      bindtap: onTap,
-      ...(enableOffset ? { onLayout } : {}),
+      bindtap: onTap
     },
-    [
-      'enable-offset'
-    ],
+    [],
     {
       layoutRef,
       disableTap: disabled
     }
-  );
+  )
 
   return (
-    <View
-      {...innerProps}
-      style={{
-        ...defaultViewStyle,
-        ...innerStyle,
-        ...(applyHoverEffect && hoverInnerStyle),
-      } as ViewStyle}>
+    <View {...innerProps}>
       {loading && <Loading alone={!children} />}
       {
         wrapChildren(
-          children,
-          defaultTextStyle,
+          props,
           {
-            ...textStyle,
-            ...(applyHoverEffect && hoverTextStyle),
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
           }
         )
       }

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

@@ -1,27 +1,23 @@
 /**
  * ✔ bindchange
  */
-import {
-  JSX,
-  useRef,
-  forwardRef,
-  ReactNode,
-  useContext
-} from 'react'
-import {
-  View,
-  NativeSyntheticEvent,
-  ViewStyle
-} from 'react-native'
+import { JSX, useRef, forwardRef, ReactNode, useContext } from 'react'
+import { View, NativeSyntheticEvent, ViewStyle } from 'react-native'
+import { warn } from '@mpxjs/utils'
 import { FormContext, FormFieldValue, CheckboxGroupContext, GroupValue } from './context'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { throwReactWarning } from './utils'
+import { useLayout, useTransformStyle, wrapChildren } from './utils'
 
 export interface CheckboxGroupProps {
   name: string
   style?: ViewStyle & Record<string, any>
   'enable-offset'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   children: ReactNode
   bindchange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
@@ -32,15 +28,17 @@ const CheckboxGroup = forwardRef<
 >((props, ref): JSX.Element => {
   const {
     style = {},
-    'enable-offset': enableOffset,
-    children,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
     bindchange
   } = props
 
-  const layoutRef = useRef({})
   const formContext = useContext(FormContext)
 
-  let formValuesMap: Map<string, FormFieldValue> | undefined;
+  let formValuesMap: Map<string, FormFieldValue> | undefined
 
   if (formContext) {
     formValuesMap = formContext.formValuesMap
@@ -50,31 +48,32 @@ const CheckboxGroup = forwardRef<
 
   const defaultStyle = {
     flexDirection: 'row',
-    flexWrap: 'wrap',
-    ...style
+    flexWrap: 'wrap'
   }
-  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 styleObj = {
+    ...defaultStyle,
+    ...style
   }
 
+  const {
+    hasSelfPercent,
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const nodeRef = useRef(null)
+
+  useNodesRef(props, ref, nodeRef, { defaultStyle })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
   const getSelectionValue = (): string[] => {
     const arr: string[] = []
-    for (let key in groupValue) {
+    for (const key in groupValue) {
       if (groupValue[key].checked) {
         arr.push(key)
       }
@@ -95,7 +94,7 @@ const CheckboxGroup = forwardRef<
 
   if (formValuesMap) {
     if (!props.name) {
-      throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.')
+      warn('If a form component is used, the name attribute is required.')
     } else {
       formValuesMap.set(props.name, { getValue, resetValue })
     }
@@ -124,10 +123,10 @@ const CheckboxGroup = forwardRef<
     props,
     {
       ref: nodeRef,
-      style: defaultStyle,
-      ...(enableOffset ? { onLayout } : {})
+      style: { ...normalStyle, ...layoutStyle },
+      ...layoutProps
     },
-    ['enable-offset'],
+    [],
     {
       layoutRef
     }
@@ -136,7 +135,15 @@ const CheckboxGroup = forwardRef<
   return (
     <View {...innerProps}>
       <CheckboxGroupContext.Provider value={{ groupValue, notifyChange }}>
-        {children}
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current
+            }
+          )
+        }
       </CheckboxGroupContext.Provider>
     </View>
   )
@@ -144,4 +151,4 @@ const CheckboxGroup = forwardRef<
 
 CheckboxGroup.displayName = 'mpx-checkbox-group'
 
-export default CheckboxGroup
+export default CheckboxGroup