@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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,21 @@
  * ✘ 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,
+  NativeSyntheticEvent
 } from 'react-native'
-import { extractTextStyle, isText, every } 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'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -74,16 +68,21 @@ 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>
+  '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
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  catchtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchstart?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchend?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
@@ -94,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({
@@ -114,50 +113,47 @@ 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) {
-    console.warn('Environment not supported')
+  if (!global.__mpx?.config?.rnConfig) {
+    warn('Environment not supported')
     return
   }
-
   const eventName = OpenTypeEventsMap.get(openType)
   if (!eventName) {
-    console.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) {
-    console.warn(`Unregistered ${eventName} event`)
+    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({
     inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
+    outputRange: ['0deg', '360deg']
   })
 
   useEffect(() => {
@@ -167,7 +163,7 @@ const Loading = ({ alone = false }: { alone: boolean }): React.JSX.Element => {
         duration: 1000,
         easing: Easing.linear,
         useNativeDriver: true,
-        isInteraction: false,
+        isInteraction: false
       })
     )
 
@@ -176,19 +172,20 @@ const Loading = ({ alone = false }: { alone: boolean }): React.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): React.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,40 +193,48 @@ 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,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+    style = {},
     children,
     bindgetuserinfo,
     bindtap,
-    catchtap,
     bindtouchstart,
-    bindtouchend,
+    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
   }>({
     hoverStartTimer: undefined,
-    hoverStayTimer: undefined,
+    hoverStayTimer: undefined
   })
 
-  const layoutRef = useRef({})
-
   const [isHover, setIsHover] = useState(false)
 
   const isMiniSize = size === 'mini'
 
   const applyHoverEffect = isHover && hoverClass !== 'none'
 
-  const inheritTextStyle = extractTextStyle(style)
-
-  const textHoverStyle = extractTextStyle(hoverStyle)
-
   const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]
 
   const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color
@@ -237,16 +242,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'
@@ -257,23 +262,50 @@ const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, r
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: plain ? plainBorderColor : normalBorderColor,
-    backgroundColor: plain ? 'transparent' : normalBackgroundColor,
+    backgroundColor: plain ? 'transparent' : normalBackgroundColor
+  }
+
+  const defaultViewStyle = {
+    ...styles.button,
+    ...(isMiniSize && styles.buttonMini),
+    ...viewStyle
+  }
+
+  const defaultTextStyle = {
+    ...styles.text,
+    ...(isMiniSize && styles.textMini),
+    color: plain ? plainTextColor : normalTextColor
   }
 
-  const textStyle = {
-    color: plain ? plainTextColor : normalTextColor,
-    ...inheritTextStyle
+  const defaultStyle = {
+    ...defaultViewStyle,
+    ...defaultTextStyle
   }
 
-  const defaultViewStyle = [
-    styles.button,
-    isMiniSize && styles.buttonMini || {},
-    viewStyle,
-  ]
+  const styleObj = {
+    ...defaultStyle,
+    ...style,
+    ...(applyHoverEffect && hoverStyle)
+  }
+
+  const {
+    hasSelfPercent,
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
 
-  const defaultTextStyle = [
-    styles.text, isMiniSize && styles.textMini, textStyle
-  ]
+  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>) => {
     if (!openType) return
@@ -282,15 +314,17 @@ const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, r
     if (openType === 'share') {
       handleEvent && handleEvent({
         from: 'button',
-        target: getCustomEvent('tap', evt, { layoutRef }, props).target,
+        target: getCustomEvent('tap', evt, { layoutRef }, props).target
       })
     }
 
-    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,74 +356,50 @@ 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)
-  }
-
-  const catchTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    if (disabled) return
-    catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props))
-  }
-
-  function wrapChildren(children: ReactNode, textStyle?: StyleProp<TextStyle>) {
-    if (every(children, (child)=>isText(child))) {
-      children = [<Text key='buttonTextWrap' style={textStyle}>{children}</Text>]
-    } else {
-      if(textStyle) console.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([
-      ...defaultViewStyle,
-      ...defaultTextStyle,
-    ])
-  })
-
-  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 }
-    })
+    handleFormTypeFn()
   }
 
   const innerProps = useInnerProps(
     props,
     {
       ref: nodeRef,
+      style: { ...innerStyle, ...layoutStyle },
+      ...layoutProps,
       bindtouchstart: onTouchStart,
       bindtouchend: onTouchEnd,
-      bindtap: onTap,
-      catchtap: catchTap,
-      ...(enableOffset ? { onLayout } : {}),
+      bindtap: onTap
     },
-    [
-      'enable-offset'
-    ],
-    { 
-      layoutRef
+    [],
+    {
+      layoutRef,
+      disableTap: disabled
     }
-  );
+  )
 
   return (
-    <View
-      {...innerProps}
-      style={[
-        ...defaultViewStyle,
-        style,
-        applyHoverEffect && hoverStyle,
-      ]}>
+    <View {...innerProps}>
       {loading && <Loading alone={!children} />}
       {
         wrapChildren(
-          children, 
-          [
-            ...defaultTextStyle,
-            applyHoverEffect && textHoverStyle,
-          ]
+          props,
+          {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+          }
         )
       }
     </View>

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

@@ -0,0 +1,152 @@
+/**
+ * ✔ bindchange
+ */
+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 { 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
+}
+
+const CheckboxGroup = forwardRef<
+  HandlerRef<View, CheckboxGroupProps>,
+  CheckboxGroupProps
+>((props, ref): JSX.Element => {
+  const {
+    style = {},
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+    bindchange
+  } = props
+
+  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'
+  }
+
+  const styleObj = {
+    ...defaultStyle,
+    ...style
+  }
+
+  const {
+    hasSelfPercent,
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
+  const getSelectionValue = (): string[] => {
+    const arr: string[] = []
+    for (const 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) {
+      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: { ...normalStyle, ...layoutStyle },
+      ...layoutProps
+    },
+    [],
+    {
+      layoutRef
+    }
+  )
+
+  return (
+    <View {...innerProps}>
+      <CheckboxGroupContext.Provider value={{ groupValue, notifyChange }}>
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current
+            }
+          )
+        }
+      </CheckboxGroupContext.Provider>
+    </View>
+  )
+})
+
+CheckboxGroup.displayName = 'mpx-checkbox-group'
+
+export default CheckboxGroup