Merge pull request #1696 from didi/refactor-rn-components-spread

chore: 修改组件扩展运算符
didi · Dec 9, 2024 · 4c30330 · 4c30330
2 parents ed5a794 + c3ef69f
commit 4c30330
Show file tree

Hide file tree

Showing 37 changed files with 879 additions and 800 deletions.
diff --git a/packages/api-proxy/src/platform/api/create-selector-query/rnNodesRef.js b/packages/api-proxy/src/platform/api/create-selector-query/rnNodesRef.js
@@ -84,12 +84,7 @@ const getComputedStyle = (config = []) => {
   return wrapFn((nodeInstance, resolve) => {
     config = new Set(config)
     const res = {}
-    const styles = nodeInstance.props.current.style || {}
-    const defaultStyle = nodeInstance.instance.defaultStyle || {}
-    const computedStyle = {
-      ...defaultStyle,
-      ...styles
-    }
+    const computedStyle = nodeInstance.instance.style || {}
     config.forEach((key) => {
       const humpKey = dash2hump(key)
       // 取 style 的 key 是根据传入的 key 来设置，传什么设置什么 key，只不过取值需要做兼容

diff --git a/packages/api-proxy/src/platform/api/system/rnSystem.js b/packages/api-proxy/src/platform/api/system/rnSystem.js
@@ -5,18 +5,17 @@ import { getWindowInfo } from './rnWindowInfo'
 
 const getSystemInfoSync = function () {
   const windowInfo = getWindowInfo()
-  const { screenWidth, screenHeight, safeArea } = windowInfo
+  const { screenWidth, screenHeight } = windowInfo
 
   const result = {
     brand: DeviceInfo.getBrand(),
     model: DeviceInfo.getModel(),
     system: `${DeviceInfo.getSystemName()} ${DeviceInfo.getSystemVersion()}`,
     platform: DeviceInfo.isEmulatorSync() ? 'emulator' : DeviceInfo.getSystemName(),
     deviceOrientation: screenWidth > screenHeight ? 'portrait' : 'landscape',
-    statusBarHeight: safeArea.top,
-    fontSizeSetting: PixelRatio.getFontScale(),
-    ...windowInfo
+    fontSizeSetting: PixelRatio.getFontScale()
   }
+  Object.assign(result, windowInfo)
   defineUnsupportedProps(result, [
     'language',
     'version',

diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts
@@ -1,6 +1,6 @@
 import { useRef } from 'react'
-import { collectDataset } from '@mpxjs/utils'
-import { omit } from './utils'
+import { hasOwn, collectDataset } from '@mpxjs/utils'
+import { omit, extendObject } from './utils'
 import eventConfigMap from './event.config'
 import {
   Props,
@@ -29,17 +29,22 @@ const getTouchEvent = (
   } = nativeEvent
   const { id } = props
   const { layoutRef } = config
-  return {
-    ...event,
-    type,
-    timeStamp: timestamp,
-    currentTarget: {
-      ...(event.currentTarget || {}),
+
+  const currentTarget = extendObject(
+    {},
+    event.currentTarget,
+    {
       id: id || '',
       dataset: collectDataset(props),
       offsetLeft: layoutRef?.current?.offsetLeft || 0,
       offsetTop: layoutRef?.current?.offsetTop || 0
-    },
+    }
+  )
+
+  return extendObject({}, event, {
+    type,
+    timeStamp: timestamp,
+    currentTarget,
     detail: {
       x: pageX,
       y: pageY
@@ -65,7 +70,7 @@ const getTouchEvent = (
     persist: event.persist,
     stopPropagation: event.stopPropagation,
     preventDefault: event.preventDefault
-  }
+  })
 }
 
 export const getCustomEvent = (
@@ -74,21 +79,20 @@ export const getCustomEvent = (
   { detail = {}, layoutRef }: { detail?: Record<string, unknown>; layoutRef: LayoutRef },
   props: Props = {}
 ) => {
-  return {
-    ...oe,
+  const targetInfo = extendObject({}, oe.target, {
+    id: props.id || '',
+    dataset: collectDataset(props),
+    offsetLeft: layoutRef?.current?.offsetLeft || 0,
+    offsetTop: layoutRef?.current?.offsetTop || 0
+  })
+  return extendObject({}, oe, {
     type,
     detail,
-    target: {
-      ...(oe.target || {}),
-      id: props.id || '',
-      dataset: collectDataset(props),
-      offsetLeft: layoutRef?.current?.offsetLeft || 0,
-      offsetTop: layoutRef?.current?.offsetTop || 0
-    },
+    target: targetInfo,
     persist: oe.persist,
     stopPropagation: oe.stopPropagation,
     preventDefault: oe.preventDefault
-  }
+  })
 }
 
 const useInnerProps = (
@@ -129,10 +133,10 @@ const useInnerProps = (
     ...userRemoveProps
   ]
 
-  propsRef.current = { ...props, ...additionalProps }
+  propsRef.current = extendObject({}, props, additionalProps)
 
   for (const key in eventConfigMap) {
-    if (propsRef.current[key]) {
+    if (hasOwn(propsRef.current, key)) {
       eventConfig[key] = eventConfigMap[key]
     }
   }
@@ -275,9 +279,11 @@ const useInnerProps = (
 
   const events: Record<string, (e: NativeTouchEvent) => void> = {}
 
-  const transformedEventKeys: string[] = []
+  let transformedEventKeys: string[] = []
   for (const key in eventConfig) {
-    transformedEventKeys.push(...eventConfig[key])
+    if (propsRef.current[key]) {
+      transformedEventKeys = transformedEventKeys.concat(eventConfig[key])
+    }
   }
 
   const finalEventKeys = [...new Set(transformedEventKeys)]
@@ -290,9 +296,10 @@ const useInnerProps = (
 
   const rawEventKeys = Object.keys(eventConfig)
 
-  return {
-    ...events,
-    ...omit(propsRef.current, [...rawEventKeys, ...removeProps])
-  }
+  return extendObject(
+    {},
+    events,
+    omit(propsRef.current, [...rawEventKeys, ...removeProps])
+  )
 }
 export default useInnerProps
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
@@ -45,7 +45,7 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
@@ -181,11 +181,14 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
     }
   }, [])
 
-  const loadingStyle = {
-    ...styles.loading,
-    transform: [{ rotate }],
-    marginRight: alone ? 0 : 5
-  }
+  const loadingStyle = extendObject(
+    {},
+    styles.loading,
+    {
+      transform: [{ rotate }],
+      marginRight: alone ? 0 : 5
+    }
+  )
 
   return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }} />
 }
@@ -274,28 +277,28 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     backgroundColor: plain ? 'transparent' : normalBackgroundColor
   }
 
-  const defaultViewStyle = {
-    ...styles.button,
-    ...(isMiniSize && styles.buttonMini),
-    ...viewStyle
-  }
+  const defaultViewStyle = extendObject(
+    {},
+    styles.button,
+    isMiniSize ? styles.buttonMini : null,
+    viewStyle
+  )
 
-  const defaultTextStyle = {
-    ...styles.text,
-    ...(isMiniSize && styles.textMini),
-    color: plain ? plainTextColor : normalTextColor
-  }
+  const defaultTextStyle = extendObject(
+    {},
+    styles.text,
+    isMiniSize ? styles.textMini : {},
+    { color: plain ? plainTextColor : normalTextColor }
+  )
 
-  const defaultStyle = {
-    ...defaultViewStyle,
-    ...defaultTextStyle
-  }
+  const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle)
 
-  const styleObj = {
-    ...defaultStyle,
-    ...style,
-    ...(applyHoverEffect && hoverStyle)
-  }
+  const styleObj = extendObject(
+    {},
+    defaultStyle,
+    style,
+    applyHoverEffect ? hoverStyle : {}
+  )
 
   const {
     hasSelfPercent,
@@ -308,11 +311,11 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   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 { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   if (backgroundStyle) {
     warn('Button does not support background image-related styles!')
@@ -408,15 +411,31 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const innerProps = useInnerProps(
     props,
-    {
-      ref: nodeRef,
-      style: { ...innerStyle, ...layoutStyle },
-      ...layoutProps,
-      bindtouchstart: onTouchStart,
-      bindtouchend: onTouchEnd,
-      bindtap: onTap
-    },
-    [],
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle)
+      },
+      layoutProps,
+      {
+        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
+        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
+        bindtap: !disabled && onTap
+      }
+    ),
+    [
+      'disabled',
+      'size',
+      'type',
+      'plain',
+      'loading',
+      'hover-class',
+      'hover-style',
+      'hover-start-time',
+      'hover-stay-time',
+      'open-type',
+      'form-type'
+    ],
     {
       layoutRef,
       disableTap: disabled

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx
@@ -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

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx
@@ -19,7 +19,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 +64,7 @@ const CheckboxGroup = forwardRef<
     flexWrap: 'wrap'
   }
 
-  const styleObj = {
-    ...defaultStyle,
-    ...style
-  }
+  const styleObj = extendObject({}, defaultStyle, style)
 
   const {
     hasSelfPercent,
@@ -80,7 +77,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 +116,16 @@ const CheckboxGroup = forwardRef<
 
   const innerProps = useInnerProps(
     props,
-    {
-      ref: nodeRef,
-      style: { ...normalStyle, ...layoutStyle },
-      ...layoutProps
-    },
-    [],
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle)
+      },
+      layoutProps
+    ),
+    [
+      'name'
+    ],
     {
       layoutRef
     }