From 07c6c285bd67ff0dfd2f2a234e51793eff8cd1ed Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Thu, 31 Oct 2024 15:49:10 +0800 Subject: [PATCH 01/34] feat: optimize image events mounting & remove useless --- .../components/react/mpx-image/index.tsx | 179 +++++------------- 1 file changed, 48 insertions(+), 131 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image/index.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image/index.tsx index b52115b454..e7bb8587f9 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-image/index.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-image/index.tsx @@ -11,12 +11,10 @@ * ✔ DEFAULT_SIZE */ import { useEffect, useMemo, useState, useRef, forwardRef } from 'react' - import { Image as RNImage, View, ImageStyle, - ImageSourcePropType, ImageResizeMode, StyleSheet, NativeSyntheticEvent, @@ -27,7 +25,7 @@ import { } from 'react-native' import useInnerProps, { getCustomEvent } from '../getInnerListeners' import useNodesRef, { HandlerRef } from '../useNodesRef' -import { useLayout, useTransformStyle } from '../utils' +import { SVG_REGEXP, useLayout, useTransformStyle } from '../utils' export type Mode = | 'scaleToFill' @@ -45,8 +43,6 @@ export type Mode = | 'bottom left' | 'bottom right' -export type SvgNumberProp = string | number | undefined - export interface ImageProps { src?: string mode?: Mode @@ -64,17 +60,6 @@ export interface ImageProps { const DEFAULT_IMAGE_WIDTH = 320 const DEFAULT_IMAGE_HEIGHT = 240 -// const REMOTE_SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i - -// const styls = StyleSheet.create({ -// suspense: { -// display: 'flex', -// justifyContent: 'center', -// alignItems: 'center', -// width: '100%', -// height: '100%', -// }, -// }) const cropMode: Mode[] = [ 'top', @@ -101,14 +86,6 @@ const isNumber = (value: DimensionValue) => typeof value === 'number' const relativeCenteredSize = (viewSize: number, imageSize: number) => (viewSize - imageSize) / 2 -// const Svg = lazy(() => import('./svg')) - -// const Fallback = ( -// -// loading ... -// -// ) - const Image = forwardRef, ImageProps>((props, ref): JSX.Element => { const { src = '', @@ -151,21 +128,18 @@ const Image = forwardRef, ImageProps>((props, re const { width, height } = normalStyle - const preSrc = useRef() - - const resizeMode: ImageResizeMode = ModeMap.get(mode) || 'stretch' + const isSvg = SVG_REGEXP.test(src) + // const isFillMode = mode === 'aspectFill' const isWidthFixMode = mode === 'widthFix' const isHeightFixMode = mode === 'heightFix' const isCropMode = cropMode.includes(mode) - - const source: ImageSourcePropType = typeof src === 'string' ? { uri: src } : src + const resizeMode: ImageResizeMode = ModeMap.get(mode) || 'stretch' const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0) const [viewHeight, setViewHeight] = useState(isNumber(height) ? height : 0) const [imageWidth, setImageWidth] = useState(0) const [imageHeight, setImageHeight] = useState(0) const [ratio, setRatio] = useState(0) - const [loaded, setLoaded] = useState(false) const fixedHeight = useMemo(() => { const fixed = viewWidth * ratio @@ -204,25 +178,9 @@ const Image = forwardRef, ImageProps>((props, re }, [mode, viewWidth, viewHeight, imageWidth, imageHeight]) const onImageLoad = (evt: NativeSyntheticEvent) => { - if (!bindload) return - if (typeof src === 'string') { - evt.persist() - RNImage.getSize(src, (width: number, height: number) => { - bindload( - getCustomEvent( - 'load', - evt, - { - detail: { width, height }, - layoutRef - }, - props - ) - ) - }) - } else { - const { width = 0, height = 0 } = RNImage.resolveAssetSource(src) || {} - bindload( + evt.persist() + RNImage.getSize(src, (width: number, height: number) => { + bindload!( getCustomEvent( 'load', evt, @@ -233,35 +191,25 @@ const Image = forwardRef, ImageProps>((props, re props ) ) - } + }) } const onImageError = (evt: NativeSyntheticEvent) => { - binderror && - binderror( - getCustomEvent( - 'error', - evt, - { - detail: { errMsg: evt.nativeEvent.error }, - layoutRef - }, - props - ) + binderror!( + getCustomEvent( + 'error', + evt, + { + detail: { errMsg: evt.nativeEvent.error }, + layoutRef + }, + props ) + ) } useEffect(() => { - if (!isWidthFixMode && !isHeightFixMode && !isCropMode) { - setLoaded(true) - return - } - - const changed = preSrc.current !== src - preSrc.current = src - changed && setLoaded(false) - - if (typeof src === 'string') { + if (!isSvg && (isWidthFixMode || isHeightFixMode || isCropMode)) { RNImage.getSize(src, (width: number, height: number) => { if (isWidthFixMode || isHeightFixMode) { setRatio(width === 0 ? 0 : height / width) @@ -270,73 +218,42 @@ const Image = forwardRef, ImageProps>((props, re setImageWidth(width) setImageHeight(height) } - changed && setLoaded(true) }) - } else { - const { width = 0, height = 0 } = RNImage.resolveAssetSource(src) || {} - if (isWidthFixMode || isHeightFixMode) { - setRatio(width === 0 ? 0 : height / width) - } - if (isCropMode) { - setImageWidth(width) - setImageHeight(height) - } - changed && setLoaded(true) } - }, [isWidthFixMode, isHeightFixMode, isCropMode, src]) - - const innerProps = useInnerProps(props, { - ref: nodeRef, - style: { - ...normalStyle, - ...layoutStyle, - ...(isHeightFixMode && { width: fixedWidth }), - ...(isWidthFixMode && { height: fixedHeight }) + }, [src, isSvg, isWidthFixMode, isHeightFixMode, isCropMode]) + + const innerProps = useInnerProps( + props, + { + ref: nodeRef, + style: { + ...normalStyle, + ...layoutStyle, + ...(isHeightFixMode && { width: fixedWidth }), + ...(isWidthFixMode && { height: fixedHeight }) + }, + ...layoutProps }, - ...layoutProps - }, - [], - { - layoutRef - } + [], + { + layoutRef + } ) - // if (typeof src === 'string' && REMOTE_SVG_REGEXP.test(src)) { - // return ( - // - // - // - // - // - // ) - // } - - // if (svg) { - // return ( - // - // - // - // - // - // ) - // } - return ( - { - loaded && - } + ) }) From 006cd4d0664d88f8c8f97ed284f005740c18d864 Mon Sep 17 00:00:00 2001 From: wangcuijuan Date: Fri, 1 Nov 2024 10:44:45 +0800 Subject: [PATCH 02/34] =?UTF-8?q?=E4=BF=AE=E6=AD=A3webview?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/api-proxy/src/platform/api/system/rnSystem.js | 2 +- .../lib/runtime/components/react/mpx-web-view.tsx | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/api-proxy/src/platform/api/system/rnSystem.js b/packages/api-proxy/src/platform/api/system/rnSystem.js index 4932eca51a..c3fcdc135c 100644 --- a/packages/api-proxy/src/platform/api/system/rnSystem.js +++ b/packages/api-proxy/src/platform/api/system/rnSystem.js @@ -39,6 +39,7 @@ const getWindowInfo = function () { screenWidth: screenWidth, screenHeight: screenHeight, screenTop: screenHeight - windowHeight, + statusBarHeight: top, safeArea } return result @@ -54,7 +55,6 @@ const getSystemInfoSync = function () { system: `${DeviceInfo.getSystemName()} ${DeviceInfo.getSystemVersion()}`, platform: DeviceInfo.isEmulatorSync() ? 'emulator' : DeviceInfo.getSystemName(), deviceOrientation: screenWidth > screenHeight ? 'portrait' : 'landscape', - statusBarHeight: safeArea.top, fontSizeSetting: PixelRatio.getFontScale(), ...windowInfo } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx index fae56a20ab..21ae52e5ef 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx @@ -149,14 +149,17 @@ const _WebView = forwardRef, WebViewProps>((pr } }) } + const events = { + ...(bindload && { onLoad: _load }), + ...(binderror && { onError: _error }), + ...(bindmessage && { onMessage: _message }) + } return ( ) From 1908f548b3d4ea2d9fc43423b2ca0bf7e11d1d90 Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Fri, 1 Nov 2024 18:27:11 +0800 Subject: [PATCH 03/34] feat: optimize and support svg image --- .../{mpx-image/index.tsx => mpx-image.tsx} | 200 ++++++++++++++---- .../components/react/mpx-image/svg.tsx | 22 -- .../components/react/types/global.d.ts | 16 -- .../lib/runtime/components/react/utils.tsx | 1 + packages/webpack-plugin/package.json | 1 + 5 files changed, 163 insertions(+), 77 deletions(-) rename packages/webpack-plugin/lib/runtime/components/react/{mpx-image/index.tsx => mpx-image.tsx} (50%) delete mode 100644 packages/webpack-plugin/lib/runtime/components/react/mpx-image/svg.tsx diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image/index.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx similarity index 50% rename from packages/webpack-plugin/lib/runtime/components/react/mpx-image/index.tsx rename to packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx index e7bb8587f9..1089d50b96 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-image/index.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx @@ -1,6 +1,6 @@ /** * ✔ src - * - mode: Partially, Only SVG format do not support + * ✔ mode * ✘ show-menu-by-longpress * ✔ binderror * ✔ bindload @@ -16,16 +16,16 @@ import { View, ImageStyle, ImageResizeMode, - StyleSheet, NativeSyntheticEvent, ImageErrorEventData, LayoutChangeEvent, DimensionValue, ImageLoadEventData } from 'react-native' -import useInnerProps, { getCustomEvent } from '../getInnerListeners' -import useNodesRef, { HandlerRef } from '../useNodesRef' -import { SVG_REGEXP, useLayout, useTransformStyle } from '../utils' +import { SvgCssUri } from 'react-native-svg/css' +import useInnerProps, { getCustomEvent } from './getInnerListeners' +import useNodesRef, { HandlerRef } from './useNodesRef' +import { SVG_REGEXP, useLayout, useTransformStyle } from './utils' export type Mode = | 'scaleToFill' @@ -86,11 +86,17 @@ const isNumber = (value: DimensionValue) => typeof value === 'number' const relativeCenteredSize = (viewSize: number, imageSize: number) => (viewSize - imageSize) / 2 +function noMeetCalcRule (isSvg: boolean, mode: Mode, viewWidth: number, viewHeight: number, ratio: number) { + const isMeetSize = viewWidth && viewHeight && ratio + if (isSvg && !isMeetSize) return true + if (!isSvg && !['scaleToFill', 'aspectFit', 'aspectFill'].includes(mode) && !isMeetSize) return true + return false +} + const Image = forwardRef, ImageProps>((props, ref): JSX.Element => { const { src = '', mode = 'scaleToFill', - // svg = false, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, @@ -129,10 +135,10 @@ const Image = forwardRef, ImageProps>((props, re const { width, height } = normalStyle const isSvg = SVG_REGEXP.test(src) - // const isFillMode = mode === 'aspectFill' const isWidthFixMode = mode === 'widthFix' const isHeightFixMode = mode === 'heightFix' const isCropMode = cropMode.includes(mode) + const isLayoutMode = isWidthFixMode || isHeightFixMode || isCropMode const resizeMode: ImageResizeMode = ModeMap.get(mode) || 'stretch' const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0) @@ -152,30 +158,138 @@ const Image = forwardRef, ImageProps>((props, re return !fixed ? viewWidth : fixed }, [ratio, viewWidth, viewHeight]) - const cropModeStyle: ImageStyle = useMemo(() => { + const modeStyle: ImageStyle = useMemo(() => { + if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio)) return {} switch (mode) { + case 'scaleToFill': + case 'aspectFit': + if (isSvg) { + const scale = ratio <= 1 + ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth + : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight + return { + transform: [ + { scale }, + ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale } + ] + } + } + return {} + case 'aspectFill': + if (isSvg) { + const scale = ratio >= 1 + ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth + : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight + return { + transform: [ + { scale }, + ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale } + ] + } + } + return {} + case 'widthFix': + case 'heightFix': + if (isSvg) { + const scale = ratio >= 1 + ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth + : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight + return { + transform: [{ scale }] + } + } + return {} case 'top': - return { top: 0, left: relativeCenteredSize(viewWidth, imageWidth) } + return { + transform: [ + { translateX: relativeCenteredSize(viewWidth, imageWidth) } + ] + } case 'bottom': - return { top: 'auto', bottom: 0, left: relativeCenteredSize(viewWidth, imageWidth) } + return { + transform: [ + { translateY: viewHeight - imageHeight }, + { translateX: relativeCenteredSize(viewWidth, imageWidth) } + ] + } case 'center': - return { top: relativeCenteredSize(viewHeight, imageHeight), left: relativeCenteredSize(viewWidth, imageWidth) } + return { + transform: [ + { translateY: relativeCenteredSize(viewHeight, imageHeight) }, + { translateX: relativeCenteredSize(viewWidth, imageWidth) } + ] + } case 'left': - return { top: relativeCenteredSize(viewHeight, imageHeight), left: 0 } + return { + transform: [ + { translateY: relativeCenteredSize(viewHeight, imageHeight) } + ] + } case 'right': - return { top: relativeCenteredSize(viewHeight, imageHeight), left: 'auto', right: 0 } + return { + transform: [ + { translateY: relativeCenteredSize(viewHeight, imageHeight) }, + { translateX: viewWidth - imageWidth } + ] + } case 'top left': - return { top: 0, left: 0 } + return {} case 'top right': - return { top: 0, left: 'auto', right: 0 } + return { + transform: [ + { translateX: viewWidth - imageWidth } + ] + } case 'bottom left': - return { top: 'auto', bottom: 0, left: 0 } + return { + transform: [ + { translateY: viewHeight - imageHeight } + ] + } case 'bottom right': - return { top: 'auto', bottom: 0, left: 'auto', right: 0 } + return { + transform: [ + { translateY: viewHeight - imageHeight }, + { translateX: viewWidth - imageWidth } + ] + } default: return {} } - }, [mode, viewWidth, viewHeight, imageWidth, imageHeight]) + }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight]) + + const onSvgLoad = (evt: LayoutChangeEvent) => { + const { width, height } = evt.nativeEvent.layout + setRatio(!width ? 0 : height / width) + setImageWidth(width) + setImageHeight(height) + + bindload && bindload( + getCustomEvent( + 'load', + evt, + { + detail: { width, height }, + layoutRef + }, + props + ) + ) + } + + const onSvgError = (evt: Error) => { + binderror!( + getCustomEvent( + 'error', + evt, + { + detail: { errMsg: evt?.message }, + layoutRef + }, + props + ) + ) + } const onImageLoad = (evt: NativeSyntheticEvent) => { evt.persist() @@ -209,18 +323,14 @@ const Image = forwardRef, ImageProps>((props, re } useEffect(() => { - if (!isSvg && (isWidthFixMode || isHeightFixMode || isCropMode)) { + if (!isSvg && isLayoutMode) { RNImage.getSize(src, (width: number, height: number) => { - if (isWidthFixMode || isHeightFixMode) { - setRatio(width === 0 ? 0 : height / width) - } - if (isCropMode) { - setImageWidth(width) - setImageHeight(height) - } + setRatio(!width ? 0 : height / width) + setImageWidth(width) + setImageHeight(height) }) } - }, [src, isSvg, isWidthFixMode, isHeightFixMode, isCropMode]) + }, [src, isSvg, isLayoutMode]) const innerProps = useInnerProps( props, @@ -242,18 +352,30 @@ const Image = forwardRef, ImageProps>((props, re return ( - + { + isSvg + ? + : + } ) }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image/svg.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image/svg.tsx deleted file mode 100644 index 205c941fc1..0000000000 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-image/svg.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { JSX } from 'react' -import type { ImageSourcePropType, ImageStyle, StyleProp } from 'react-native' -import { SvgCssUri, WithLocalSvg } from 'react-native-svg/css' -interface SvgProps { - local?: boolean - src: string | ImageSourcePropType - style?: StyleProp - width?: string | number - height?: string | number -} - -const Svg = ({ local = false, src, style, width, height }: SvgProps): JSX.Element => { - return local - ? ( - - ) - : ( - - ) -} - -export default Svg diff --git a/packages/webpack-plugin/lib/runtime/components/react/types/global.d.ts b/packages/webpack-plugin/lib/runtime/components/react/types/global.d.ts index ca33b048a2..9d444763c2 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/types/global.d.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/types/global.d.ts @@ -1,19 +1,3 @@ -declare module 'react-native-svg/css' { - import type { ImageSourcePropType, StyleProp, ImageStyle } from 'react-native' - import type { SvgProps as SvgCssUriProps } from 'react-native-svg' - - export const SvgCssUri: React.ComponentType - - export interface WithLocalSvgProps { - asset: ImageSourcePropType - style?: StyleProp - width?: string | number - height?: string | number - } - - export const WithLocalSvg: React.ComponentType -} - declare module '@mpxjs/utils' { export function isEmptyObject (obj: Object): boolean export function hasOwn (obj: Object, key: string): boolean diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index 720722c2e6..be080ae2c4 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -7,6 +7,7 @@ import { ExpressionParser, parseFunc, ReplaceSource } from './parser' export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/ export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/ export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/ +export const SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/ export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/ export const DEFAULT_FONT_SIZE = 16 diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index 6e4fb9e2f6..3bdf54c083 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -89,6 +89,7 @@ "react-native": "^0.74.5", "react-native-gesture-handler": "^2.18.1", "react-native-linear-gradient": "^2.8.3", + "react-native-svg": "^15.8.0", "react-native-webview": "^13.12.2", "rimraf": "^6.0.1" }, From 7f73cbf97a2184953aa6b83c9552017500dad77c Mon Sep 17 00:00:00 2001 From: shangqunfeng Date: Fri, 1 Nov 2024 19:05:08 +0800 Subject: [PATCH 04/34] fix(*): fix code. --- .../webpack-plugin/lib/runtime/components/react/mpx-switch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx index 3e906114db..ba51c3394d 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx @@ -115,7 +115,7 @@ const _Switch = forwardRef, _SwitchProps>((prop ref: nodeRef, style: { ...normalStyle, ...layoutStyle }, ...layoutProps, - ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {} + ...(!disabled && changeHandler) ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {} }, [ 'checked', 'disabled', From 9b43609e187d69aa3da6e68005af35974673b2f1 Mon Sep 17 00:00:00 2001 From: wangcuijuan Date: Fri, 1 Nov 2024 19:08:13 +0800 Subject: [PATCH 05/34] =?UTF-8?q?fix=20lint=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/api-proxy/src/platform/api/system/rnSystem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/api-proxy/src/platform/api/system/rnSystem.js b/packages/api-proxy/src/platform/api/system/rnSystem.js index c3fcdc135c..0bdd615da4 100644 --- a/packages/api-proxy/src/platform/api/system/rnSystem.js +++ b/packages/api-proxy/src/platform/api/system/rnSystem.js @@ -47,7 +47,7 @@ const getWindowInfo = function () { const getSystemInfoSync = function () { const windowInfo = getWindowInfo() - const { screenWidth, screenHeight, safeArea } = windowInfo + const { screenWidth, screenHeight } = windowInfo const result = { brand: DeviceInfo.getBrand(), From 47caa0d1e1a4862aabfc8d7f01c97834417c85c7 Mon Sep 17 00:00:00 2001 From: shangqunfeng Date: Fri, 1 Nov 2024 19:13:56 +0800 Subject: [PATCH 06/34] fix(switch): fix switch. --- .../webpack-plugin/lib/runtime/components/react/mpx-switch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx index ba51c3394d..6393db5084 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx @@ -115,7 +115,7 @@ const _Switch = forwardRef, _SwitchProps>((prop ref: nodeRef, style: { ...normalStyle, ...layoutStyle }, ...layoutProps, - ...(!disabled && changeHandler) ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {} + ...(!disabled && !!changeHandler) ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {} }, [ 'checked', 'disabled', From d569d4c6abb5f58be34c137a8d9df36b32f9591d Mon Sep 17 00:00:00 2001 From: shangqunfeng Date: Fri, 1 Nov 2024 19:37:44 +0800 Subject: [PATCH 07/34] fix(*): fix code. --- .../webpack-plugin/lib/runtime/components/react/mpx-switch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx index 6393db5084..3e906114db 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx @@ -115,7 +115,7 @@ const _Switch = forwardRef, _SwitchProps>((prop ref: nodeRef, style: { ...normalStyle, ...layoutStyle }, ...layoutProps, - ...(!disabled && !!changeHandler) ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {} + ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {} }, [ 'checked', 'disabled', From cca150c99dcbb71d4b3db4dec3bec43a44c3ce82 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Mon, 4 Nov 2024 16:02:18 +0800 Subject: [PATCH 08/34] =?UTF-8?q?feat:=20getInnerListener=E8=BF=87?= =?UTF-8?q?=E6=BB=A4undefined?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/getInnerListeners.ts | 8 ++++++-- .../runtime/components/react/mpx-scroll-view.tsx | 8 +++----- .../lib/runtime/components/react/utils.tsx | 13 +++++++++++-- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index 8f2f148ee1..4ecd6fb957 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -151,7 +151,9 @@ const useInnerProps = ( } if (!(Object.keys(eventConfig).length) || config.disableTouch) { - return omit(propsRef.current, removeProps) + return omit(propsRef.current, removeProps, { + filterUndefined: true + }) } function handleEmitEvent ( @@ -305,7 +307,9 @@ const useInnerProps = ( return { ...events, - ...omit(propsRef.current, [...rawEventKeys, ...removeProps]) + ...omit(propsRef.current, [...rawEventKeys, ...removeProps], { + filterUndefined: true + }) } } export default useInnerProps diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx index edce27294c..07d9636ff3 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx @@ -401,11 +401,9 @@ const _ScrollView = forwardRef, S ref: scrollViewRef, onScroll: onScroll, onContentSizeChange: onContentSizeChange, - ...(enhanced && { - ...(binddragstart && { bindtouchstart: onScrollTouchStart }), - ...(binddragging && { bindtouchmove: onScrollTouchMove }), - ...(binddragend && { bindtouchend: onScrollTouchEnd }) - }), + bindtouchstart: enhanced && binddragstart ? onScrollTouchStart : undefined, + bindtouchmove: enhanced && binddragging ? onScrollTouchMove : undefined, + bindtouchend: enhanced && binddragend ? onScrollTouchEnd : undefined, onScrollBeginDrag: onScrollDrag, onScrollEndDrag: onScrollDrag, onMomentumScrollEnd: onScrollEnd, diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index 720722c2e6..58de0dfa70 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -27,13 +27,22 @@ const hairlineRegExp = /^\s*hairlineWidth\s*$/ const varDecRegExp = /^--.*/ const varUseRegExp = /var\(/ const calcUseRegExp = /calc\(/ - -export function omit (obj: T, fields: K[]): Omit { +interface OmitConfig { + filterUndefined?: boolean; +} +export function omit (obj: T, fields: K[], config: OmitConfig = {}): Omit { const shallowCopy: any = Object.assign({}, obj) for (let i = 0; i < fields.length; i += 1) { const key = fields[i] delete shallowCopy[key] } + if (config.filterUndefined) { + for (const key in shallowCopy) { + if (shallowCopy[key] === undefined) { + delete shallowCopy[key] + } + } + } return shallowCopy } From 557c35f6c6143a4e6d40bedfe3489dc014b21470 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Mon, 4 Nov 2024 19:23:02 +0800 Subject: [PATCH 09/34] =?UTF-8?q?chore:=20=E5=AE=89=E8=A3=85=E4=BE=9D?= =?UTF-8?q?=E8=B5=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/webpack-plugin/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index 3bdf54c083..20322b5b66 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -89,6 +89,7 @@ "react-native": "^0.74.5", "react-native-gesture-handler": "^2.18.1", "react-native-linear-gradient": "^2.8.3", + "react-native-reanimated": "^3.15.4", "react-native-svg": "^15.8.0", "react-native-webview": "^13.12.2", "rimraf": "^6.0.1" From c39bdd2a4af04e0841edc7ee6a93e98a36b8be18 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Mon, 4 Nov 2024 20:41:19 +0800 Subject: [PATCH 10/34] =?UTF-8?q?chore:=20=E4=B8=8B=E7=BA=BFundefined?= =?UTF-8?q?=E8=BF=87=E6=BB=A4=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/getInnerListeners.ts | 8 ++------ .../lib/runtime/components/react/utils.tsx | 12 +----------- 2 files changed, 3 insertions(+), 17 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index 4ecd6fb957..8f2f148ee1 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -151,9 +151,7 @@ const useInnerProps = ( } if (!(Object.keys(eventConfig).length) || config.disableTouch) { - return omit(propsRef.current, removeProps, { - filterUndefined: true - }) + return omit(propsRef.current, removeProps) } function handleEmitEvent ( @@ -307,9 +305,7 @@ const useInnerProps = ( return { ...events, - ...omit(propsRef.current, [...rawEventKeys, ...removeProps], { - filterUndefined: true - }) + ...omit(propsRef.current, [...rawEventKeys, ...removeProps]) } } export default useInnerProps diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index bfd64a369b..665685d3aa 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -37,22 +37,12 @@ function getSafeAreaInset (name: string) { return insets[safeAreaInsetMap[name]] } -interface OmitConfig { - filterUndefined?: boolean; -} -export function omit (obj: T, fields: K[], config: OmitConfig = {}): Omit { +export function omit (obj: T, fields: K[]): Omit { const shallowCopy: any = Object.assign({}, obj) for (let i = 0; i < fields.length; i += 1) { const key = fields[i] delete shallowCopy[key] } - if (config.filterUndefined) { - for (const key in shallowCopy) { - if (shallowCopy[key] === undefined) { - delete shallowCopy[key] - } - } - } return shallowCopy } From 4ca06f22c1b7ff1989ff49abd6a54ede1f2ebeb3 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Mon, 4 Nov 2024 21:05:37 +0800 Subject: [PATCH 11/34] =?UTF-8?q?chore:=20=E6=96=B0=E5=A2=9EextendObject?= =?UTF-8?q?=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/react/getInnerListeners.ts | 41 ++++++++++--------- .../lib/runtime/components/react/utils.tsx | 4 ++ 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index 8f2f148ee1..163ccbb0e2 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -1,5 +1,5 @@ import { useRef } from 'react' -import { omit } from './utils' +import { omit, extendObject } from './utils' import eventConfigMap from './event.config' import { Props, @@ -29,17 +29,21 @@ 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: getDataSet(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 +69,7 @@ const getTouchEvent = ( persist: event.persist, stopPropagation: event.stopPropagation, preventDefault: event.preventDefault - } + }) } export const getDataSet = (props: Record) => { @@ -87,21 +91,20 @@ export const getCustomEvent = ( { detail = {}, layoutRef }: { detail?: Record; layoutRef: LayoutRef }, props: Props = {} ) => { - return { - ...oe, + const targetInfo = extendObject(oe.target || {}, { + id: props.id || '', + dataset: getDataSet(props), + offsetLeft: layoutRef?.current?.offsetLeft || 0, + offsetTop: layoutRef?.current?.offsetTop || 0 + }) + return extendObject(oe, { type, detail, - target: { - ...(oe.target || {}), - id: props.id || '', - dataset: getDataSet(props), - offsetLeft: layoutRef?.current?.offsetLeft || 0, - offsetTop: layoutRef?.current?.offsetTop || 0 - }, + target: targetInfo, persist: oe.persist, stopPropagation: oe.stopPropagation, preventDefault: oe.preventDefault - } + }) } const useInnerProps = ( diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index 665685d3aa..b7049098bc 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -523,3 +523,7 @@ export function wrapChildren (props: Record = {}, { hasVarDec, varC } return children } + +export function extendObject (...args: Record[]) { + return Object.assign({}, ...args) +} From 3ec706d1043bc58a2daeab1c2b297467e7fb08b2 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Mon, 4 Nov 2024 21:15:17 +0800 Subject: [PATCH 12/34] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9getInnerListen?= =?UTF-8?q?er?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/getInnerListeners.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index 163ccbb0e2..27ef64219f 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -145,7 +145,7 @@ const useInnerProps = ( ...userRemoveProps ] - propsRef.current = { ...props, ...additionalProps } + propsRef.current = extendObject(props, additionalProps) for (const key in eventConfigMap) { if (propsRef.current[key]) { @@ -293,7 +293,7 @@ const useInnerProps = ( const transformedEventKeys: string[] = [] for (const key in eventConfig) { - transformedEventKeys.push(...eventConfig[key]) + transformedEventKeys.concat(eventConfig[key]) } const finalEventKeys = [...new Set(transformedEventKeys)] @@ -306,9 +306,9 @@ 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 From 082df1bd11a4c486734cad4ade103b399fe07546 Mon Sep 17 00:00:00 2001 From: wangcuijuan Date: Mon, 4 Nov 2024 21:19:44 +0800 Subject: [PATCH 13/34] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=89=A9=E5=B1=95?= =?UTF-8?q?=E8=BF=90=E7=AE=97=E7=AC=A6=E5=86=99=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/platform/api/system/rnSystem.js | 10 ++++---- .../runtime/components/react/mpx-web-view.tsx | 24 +++++++++++++++---- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/api-proxy/src/platform/api/system/rnSystem.js b/packages/api-proxy/src/platform/api/system/rnSystem.js index 723917e903..bee61e0aab 100644 --- a/packages/api-proxy/src/platform/api/system/rnSystem.js +++ b/packages/api-proxy/src/platform/api/system/rnSystem.js @@ -6,10 +6,8 @@ import { successHandle, failHandle, defineUnsupportedProps, getFocusedNavigation const getWindowInfo = function () { const dimensionsScreen = Dimensions.get('screen') const navigation = getFocusedNavigation() - const insets = { - ...initialWindowMetrics?.insets, - ...navigation?.insets - } + const insets = {} + Object.assign(insets, initialWindowMetrics?.insets, navigation?.insets) let safeArea = {} let { top = 0, bottom = 0, left = 0, right = 0 } = insets if (Platform.OS === 'android') { @@ -55,9 +53,9 @@ const getSystemInfoSync = function () { system: `${DeviceInfo.getSystemName()} ${DeviceInfo.getSystemVersion()}`, platform: DeviceInfo.isEmulatorSync() ? 'emulator' : DeviceInfo.getSystemName(), deviceOrientation: screenWidth > screenHeight ? 'portrait' : 'landscape', - 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/mpx-web-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx index 21ae52e5ef..8dcae5589e 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx @@ -1,5 +1,6 @@ import { forwardRef, JSX, useEffect, useRef } from 'react' import { noop, warn } from '@mpxjs/utils' +import { View } from 'react-native' import { Portal } from '@ant-design/react-native' import { getCustomEvent } from './getInnerListeners' import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy' @@ -48,6 +49,9 @@ interface FormRef { const _WebView = forwardRef, WebViewProps>((props, ref): JSX.Element => { const { src, bindmessage = noop, bindload = noop, binderror = noop } = props + if (!src) { + return () + } if (props.style) { warn('The web-view component does not support the style prop.') } @@ -149,10 +153,22 @@ const _WebView = forwardRef, WebViewProps>((pr } }) } - const events = { - ...(bindload && { onLoad: _load }), - ...(binderror && { onError: _error }), - ...(bindmessage && { onMessage: _message }) + const events = {} + + if (bindload) { + Object.assign(events, { + onLoad: _load + }) + } + if (binderror) { + Object.assign(events, { + onError: _error + }) + } + if (bindmessage) { + Object.assign(events, { + onMessage: _message + }) } return ( Date: Tue, 5 Nov 2024 10:38:34 +0800 Subject: [PATCH 14/34] =?UTF-8?q?chore:=20scroll-view=E3=80=81form?= =?UTF-8?q?=E3=80=81utils=E4=BF=AE=E6=94=B9=E6=89=A9=E5=B1=95=E8=BF=90?= =?UTF-8?q?=E7=AE=97=E7=AC=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-form.tsx | 14 +++--- .../components/react/mpx-scroll-view.tsx | 43 ++++++++++--------- .../lib/runtime/components/react/utils.tsx | 15 +++---- 3 files changed, 35 insertions(+), 37 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx index 30ae1238c8..49691156c7 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx @@ -10,7 +10,7 @@ import { JSX, useRef, forwardRef, ReactNode } 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; children: ReactNode; @@ -49,7 +49,7 @@ const _Form = forwardRef, 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) @@ -83,11 +83,11 @@ const _Form = forwardRef, FormProps>((fromProps: For formValuesMap.forEach(item => item.resetValue()) } - 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 }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx index 04c5034e33..301eb7ff4c 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx @@ -38,7 +38,7 @@ import { useAnimatedRef } from 'react-native-reanimated' import { warn } from '@mpxjs/utils' import useInnerProps, { getCustomEvent } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' -import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils' +import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject } from './utils' import { IntersectionObserverContext } from './context' interface ScrollViewProps { @@ -157,7 +157,7 @@ const _ScrollView = forwardRef, S setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) - const { textStyle, innerStyle } = splitStyle(normalStyle) + const { textStyle, innerStyle = {} } = splitStyle(normalStyle) const scrollViewRef = useAnimatedRef() useNodesRef(props, ref, scrollViewRef, { @@ -252,32 +252,35 @@ const _ScrollView = forwardRef, S } function onContentSizeChange (width: number, height: number) { - scrollOptions.current = { - ...scrollOptions.current, - contentLength: selectLength({ height, width }) - } + scrollOptions.current = extendObject( + scrollOptions.current, + { + contentLength: selectLength({ height, width }) + } + ) } function onLayout (e: LayoutChangeEvent) { const layout = e.nativeEvent.layout || {} - scrollOptions.current = { - ...scrollOptions.current, - visibleLength: selectLength(layout) - } + scrollOptions.current = extendObject( + scrollOptions.current, + { + visibleLength: selectLength(layout) + } + ) } function updateScrollOptions (e: NativeSyntheticEvent, position: Record) { const visibleLength = selectLength(e.nativeEvent.layoutMeasurement) const contentLength = selectLength(e.nativeEvent.contentSize) const offset = selectOffset(e.nativeEvent.contentOffset) - scrollOptions.current = { - ...scrollOptions.current, + scrollOptions.current = extendObject(scrollOptions.current, { contentLength, offset, scrollLeft: position.scrollLeft, scrollTop: position.scrollTop, visibleLength - } + }) } function onScroll (e: NativeSyntheticEvent) { @@ -398,8 +401,8 @@ const _ScrollView = forwardRef, S updateScrollOptions(e, { scrollLeft, scrollTop }) } - let scrollAdditionalProps: ScrollAdditionalProps = { - style: { ...innerStyle, ...layoutStyle }, + const scrollAdditionalProps: ScrollAdditionalProps = extendObject({ + style: extendObject(innerStyle, layoutStyle), pinchGestureEnabled: false, horizontal: scrollX && !scrollY, scrollEventThrottle: scrollEventThrottle, @@ -415,15 +418,13 @@ const _ScrollView = forwardRef, S bindtouchend: enhanced && binddragend ? onScrollTouchEnd : undefined, onScrollBeginDrag: onScrollDrag, onScrollEndDrag: onScrollDrag, - onMomentumScrollEnd: onScrollEnd, - ...layoutProps - } + onMomentumScrollEnd: onScrollEnd + }, layoutProps) if (enhanced) { - scrollAdditionalProps = { - ...scrollAdditionalProps, + Object.assign(scrollAdditionalProps, { bounces, pagingEnabled - } + }) } const innerProps = useInnerProps(props, scrollAdditionalProps, [ 'scroll-x', diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index b7049098bc..3c86df9d66 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -30,10 +30,7 @@ const safeAreaInsetMap: Record = { function getSafeAreaInset (name: string) { const navigation = getFocusedNavigation() - const insets = { - ...initialWindowMetrics?.insets, - ...navigation?.insets - } + const insets = extendObject(initialWindowMetrics?.insets, navigation?.insets || {}) return insets[safeAreaInsetMap[name]] } @@ -89,10 +86,10 @@ export const parseUrl = (cssUrl = '') => { } export const getRestProps = (transferProps: any = {}, originProps: any = {}, deletePropsKey: any = []) => { - return { - ...transferProps, - ...omit(originProps, deletePropsKey) - } + return extendObject( + transferProps, + omit(originProps, deletePropsKey) + ) } export function isText (ele: ReactNode): ele is ReactElement { @@ -512,7 +509,7 @@ export function wrapChildren (props: Record = {}, { hasVarDec, varC if (textStyle || textProps) { children = Children.map(children, (child) => { if (isText(child)) { - const style = { ...textStyle, ...child.props.style } + const style = extendObject(textStyle || {}, child.props.style) return cloneElement(child, { ...textProps, style }) } return child From ce3814173801fc2c5d10d761b3e9f9f0aa80023d Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Tue, 5 Nov 2024 10:47:12 +0800 Subject: [PATCH 15/34] =?UTF-8?q?chore:=20movable-area=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E6=89=A9=E5=B1=95=E8=BF=90=E7=AE=97=E7=AC=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-movable-area.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx index 6201ec1f10..f323ccc221 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx @@ -7,7 +7,7 @@ import { JSX, useState, useEffect, forwardRef, ReactNode, useRef } from 'react' import useNodesRef, { HandlerRef } from './useNodesRef' import useInnerProps from './getInnerListeners' import { MovableAreaContext } from './context' -import { useTransformStyle, wrapChildren, useLayout } from './utils' +import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils' interface MovableAreaProps { style?: Record; @@ -52,11 +52,10 @@ const _MovableArea = forwardRef, MovableAreaP const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef, onLayout }) - const innerProps = useInnerProps(props, { - style: { height: areaHeight, width: areaWidth, overflow: 'hidden', ...normalStyle, ...layoutStyle }, - ref: movableViewRef, - ...layoutProps - }, [], { layoutRef }) + const innerProps = useInnerProps(props, extendObject({ + style: extendObject({ height: areaHeight, width: areaWidth, overflow: 'hidden' }, normalStyle, layoutStyle), + ref: movableViewRef + }, layoutProps), [], { layoutRef }) return ( From 2c56aa997cc4939828645f7b2264f46a08da6753 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Tue, 5 Nov 2024 10:50:35 +0800 Subject: [PATCH 16/34] fix: ts error --- packages/webpack-plugin/lib/runtime/components/react/utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index 3c86df9d66..b9a628cfc1 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -30,7 +30,7 @@ const safeAreaInsetMap: Record = { function getSafeAreaInset (name: string) { const navigation = getFocusedNavigation() - const insets = extendObject(initialWindowMetrics?.insets, navigation?.insets || {}) + const insets = extendObject(initialWindowMetrics?.insets || {}, navigation?.insets || {}) return insets[safeAreaInsetMap[name]] } From 88ceef0b9d62c26e050614045d29bfd2e2380c37 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Tue, 5 Nov 2024 11:48:10 +0800 Subject: [PATCH 17/34] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E9=80=9A?= =?UTF-8?q?=E7=94=A8=E4=BA=8B=E4=BB=B6handler=E4=B8=BAundefined=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E9=80=8F=E4=BC=A0=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/getInnerListeners.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index 27ef64219f..f4952c8d28 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -1,4 +1,5 @@ import { useRef } from 'react' +import { hasOwn } from '@mpxjs/utils' import { omit, extendObject } from './utils' import eventConfigMap from './event.config' import { @@ -148,7 +149,7 @@ const useInnerProps = ( propsRef.current = extendObject(props, additionalProps) for (const key in eventConfigMap) { - if (propsRef.current[key]) { + if (hasOwn(propsRef.current, key)) { eventConfig[key] = eventConfigMap[key] } } @@ -291,9 +292,11 @@ const useInnerProps = ( const events: Record void> = {} - const transformedEventKeys: string[] = [] + let transformedEventKeys: string[] = [] for (const key in eventConfig) { - transformedEventKeys.concat(eventConfig[key]) + if (propsRef.current[key]) { + transformedEventKeys = transformedEventKeys.concat(eventConfig[key]) + } } const finalEventKeys = [...new Set(transformedEventKeys)] From b2dd08b1d67b089cea6e87338c67dfee263833b8 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Tue, 5 Nov 2024 19:09:00 +0800 Subject: [PATCH 18/34] =?UTF-8?q?chore:=20=E5=A4=8D=E5=8E=9Fscroll-view?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-scroll-view.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx index 301eb7ff4c..3f7afe7849 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx @@ -252,22 +252,12 @@ const _ScrollView = forwardRef, S } function onContentSizeChange (width: number, height: number) { - scrollOptions.current = extendObject( - scrollOptions.current, - { - contentLength: selectLength({ height, width }) - } - ) + scrollOptions.current.contentLength = selectLength({ height, width }) } function onLayout (e: LayoutChangeEvent) { const layout = e.nativeEvent.layout || {} - scrollOptions.current = extendObject( - scrollOptions.current, - { - visibleLength: selectLength(layout) - } - ) + scrollOptions.current.visibleLength = selectLength(layout) } function updateScrollOptions (e: NativeSyntheticEvent, position: Record) { From c66dba10ef9dbc02c92c9c485f5e1f53a3bb3bba Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Wed, 6 Nov 2024 22:24:52 +0800 Subject: [PATCH 19/34] feat: optimize spread object --- .../runtime/components/react/mpx-button.tsx | 59 ++++++++++--------- .../components/react/mpx-checkbox-group.tsx | 19 +++--- .../runtime/components/react/mpx-checkbox.tsx | 35 +++++------ .../lib/runtime/components/react/mpx-icon.tsx | 23 +++----- .../runtime/components/react/mpx-image.tsx | 54 +++++++++-------- .../runtime/components/react/mpx-input.tsx | 59 ++++++++++--------- .../runtime/components/react/mpx-label.tsx | 25 ++++---- .../components/react/mpx-radio-group.tsx | 19 +++--- .../runtime/components/react/mpx-radio.tsx | 37 ++++++------ 9 files changed, 166 insertions(+), 164 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx index bead09f7e3..3d6b05ad53 100644 --- 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 { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils' +import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils' import useInnerProps, { getCustomEvent } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' import { FormContext } from './context' @@ -265,28 +265,25 @@ const Button = forwardRef, ButtonProps>((buttonPro backgroundColor: plain ? 'transparent' : normalBackgroundColor } - const defaultViewStyle = { - ...styles.button, - ...(isMiniSize && styles.buttonMini), - ...viewStyle - } + const defaultViewStyle = extendObject( + styles.button, + isMiniSize ? styles.buttonMini : {}, + 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, @@ -303,7 +300,7 @@ const Button = forwardRef, ButtonProps>((buttonPro 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!') @@ -375,14 +372,18 @@ const Button = forwardRef, 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: onTouchStart, + bindtouchend: onTouchEnd, + bindtap: onTap + } + ), [], { 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 index 2473e0aacd..ebe572f4c3 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx @@ -7,7 +7,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 @@ -51,10 +51,7 @@ const CheckboxGroup = forwardRef< flexWrap: 'wrap' } - const styleObj = { - ...defaultStyle, - ...style - } + const styleObj = extendObject(defaultStyle, style) const { hasSelfPercent, @@ -121,11 +118,13 @@ const CheckboxGroup = forwardRef< const innerProps = useInnerProps( props, - { - ref: nodeRef, - style: { ...normalStyle, ...layoutStyle }, - ...layoutProps - }, + extendObject( + { + ref: nodeRef, + style: extendObject(normalStyle, layoutStyle) + }, + layoutProps + ), [], { layoutRef diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx index 600e4308fe..130dfcd3ca 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx @@ -25,7 +25,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 { @@ -101,15 +101,12 @@ const Checkbox = forwardRef, CheckboxProps>( let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch>; } } | undefined let notifyChange: (evt: NativeSyntheticEvent) => void | undefined - const defaultStyle = { - ...styles.wrapper, - ...(disabled && styles.wrapperDisabled) - } + const defaultStyle = extendObject( + styles.wrapper, + disabled ? styles.wrapperDisabled : {} + ) - const styleObj = { - ...styles.container, - ...style - } + const styleObj = extendObject(styles.container, style) const onChange = (evt: NativeSyntheticEvent) => { if (disabled) return @@ -151,7 +148,7 @@ const Checkbox = forwardRef, CheckboxProps>( 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,13 +167,17 @@ const Checkbox = forwardRef, CheckboxProps>( const innerProps = useInnerProps( props, - { - ref: nodeRef, - style: { ...innerStyle, ...layoutStyle }, - ...layoutProps, - bindtap: onTap, - catchtap: catchTap - }, + extendObject( + { + ref: nodeRef, + style: extendObject(innerStyle, layoutStyle) + }, + layoutProps, + { + bindtap: onTap, + catchtap: catchTap + } + ), [], { layoutRef diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx index b51a7259f5..7b84fb07c7 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx @@ -7,7 +7,7 @@ import { JSX, forwardRef, useRef } 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, IconProps>( const defaultStyle = { width: ~~size, height: ~~size } - const styleObj = { - ...defaultStyle, - ...style - } + const styleObj = extendObject(defaultStyle, style) const { hasSelfPercent, @@ -82,16 +79,14 @@ const Icon = forwardRef, IconProps>( 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 diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx index 1089d50b96..64161a035f 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx @@ -25,7 +25,7 @@ import { import { SvgCssUri } from 'react-native-svg/css' import useInnerProps, { getCustomEvent } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' -import { SVG_REGEXP, useLayout, useTransformStyle } from './utils' +import { SVG_REGEXP, useLayout, useTransformStyle, extendObject } from './utils' export type Mode = | 'scaleToFill' @@ -112,11 +112,11 @@ const Image = forwardRef, ImageProps>((props, re height: DEFAULT_IMAGE_HEIGHT } - const styleObj = { - ...defaultStyle, - ...style, - overflow: 'hidden' - } + const styleObj = extendObject( + defaultStyle, + style, + { overflow: 'hidden' } + ) const nodeRef = useRef(null) useNodesRef(props, ref, nodeRef, { @@ -334,16 +334,18 @@ const Image = forwardRef, ImageProps>((props, re const innerProps = useInnerProps( props, - { - ref: nodeRef, - style: { - ...normalStyle, - ...layoutStyle, - ...(isHeightFixMode && { width: fixedWidth }), - ...(isWidthFixMode && { height: fixedHeight }) + extendObject( + { + ref: nodeRef, + style: extendObject( + normalStyle, + layoutStyle, + isHeightFixMode ? { width: fixedWidth } : {}, + isWidthFixMode ? { height: fixedHeight } : {} + ) }, - ...layoutProps - }, + layoutProps + ), [], { layoutRef @@ -358,22 +360,24 @@ const Image = forwardRef, ImageProps>((props, re uri={src} onLayout={onSvgLoad} onError={binderror && onSvgError} - style={{ - transformOrigin: 'top left', - ...modeStyle - }} + style={extendObject( + { transformOrigin: 'top left' }, + modeStyle + )} /> : } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx index 107859f859..dd2fe4448d 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx @@ -55,7 +55,7 @@ import { TextInputSubmitEditingEventData } from 'react-native' import { warn } from '@mpxjs/utils' -import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout } from './utils' +import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils' import useInnerProps, { getCustomEvent } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' import { FormContext, FormFieldValue } from './context' @@ -177,13 +177,15 @@ const Input = forwardRef, FinalInputProps const [inputValue, setInputValue] = useState(defaultValue) const [contentHeight, setContentHeight] = useState(0) - const styleObj = { - padding: 0, - ...style, - ...multiline && autoHeight && { - height: Math.max((style as any)?.minHeight || 35, contentHeight) - } - } + const styleObj = extendObject( + { padding: 0 }, + style, + multiline && autoHeight + ? { + height: Math.max((style as any)?.minHeight || 35, contentHeight) + } + : {} + ) const { hasSelfPercent, @@ -379,28 +381,27 @@ const Input = forwardRef, FinalInputProps : (nodeRef.current as TextInput)?.blur() }, [focus]) - const composeStyle = { ...normalStyle, ...layoutStyle } - - const innerProps = useInnerProps(props, { - ref: nodeRef, - style: { - padding: 0, - ...composeStyle, - ...multiline && autoHeight && { - height: Math.max((composeStyle as any)?.minHeight || 35, contentHeight) + const innerProps = useInnerProps( + props, + extendObject( + { + ref: nodeRef, + style: extendObject(normalStyle, layoutStyle) + }, + layoutProps, + { + onFocus: bindfocus && onInputFocus, + onBlur: bindblur && onInputBlur, + onKeyPress: bindconfirm && onKeyPress, + onSubmitEditing: bindconfirm && multiline && onSubmitEditing, + onSelectionChange: bindselectionchange && onSelectionChange } - }, - ...layoutProps, - onFocus: bindfocus && onInputFocus, - onBlur: bindblur && onInputBlur, - onKeyPress: bindconfirm && onKeyPress, - onSubmitEditing: bindconfirm && multiline && onSubmitEditing, - onSelectionChange: bindselectionchange && onSelectionChange - }, - [], - { - layoutRef - }) + ), + [], + { + layoutRef + } + ) return ( , LabelProps>( flexDirection: 'row' } - const styleObj = { - ...defaultStyle, - ...style - } + const styleObj = extendObject(defaultStyle, style) const { hasSelfPercent, @@ -59,7 +56,7 @@ const Label = forwardRef, LabelProps>( 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('Label does not support background image-related styles!') @@ -76,12 +73,16 @@ const Label = forwardRef, LabelProps>( const innerProps = useInnerProps( props, - { - ref: nodeRef, - style: { ...innerStyle, ...layoutStyle }, - ...layoutProps, - bindtap: onTap - }, + extendObject( + { + ref: nodeRef, + style: extendObject(innerStyle, layoutStyle) + }, + layoutProps, + { + bindtap: onTap + } + ), [], { layoutRef diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx index f3d15621d4..14cf036063 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx @@ -7,7 +7,7 @@ import { warn } from '@mpxjs/utils' import { FormContext, FormFieldValue, RadioGroupContext, 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 RadioGroupProps { name: string @@ -51,10 +51,7 @@ const radioGroup = forwardRef< flexWrap: 'wrap' } - const styleObj = { - ...defaultStyle, - ...style - } + const styleObj = extendObject(defaultStyle, style) const { hasSelfPercent, @@ -118,11 +115,13 @@ const radioGroup = forwardRef< const innerProps = useInnerProps( props, - { - ref: nodeRef, - style: { ...normalStyle, ...layoutStyle }, - ...layoutProps - }, + extendObject( + { + ref: nodeRef, + style: extendObject(normalStyle, layoutStyle) + }, + layoutProps + ), [], { layoutRef diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx index 3369ca9203..4bd17388a2 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx @@ -10,7 +10,7 @@ import { warn } from '@mpxjs/utils' import { LabelContext, RadioGroupContext } from './context' import useInnerProps, { getCustomEvent } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' -import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils' +import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils' import Icon from './mpx-icon' export interface RadioProps { @@ -91,16 +91,13 @@ const Radio = forwardRef, RadioProps>( const labelContext = useContext(LabelContext) - const defaultStyle = { - ...styles.wrapper, - ...(isChecked && styles.wrapperChecked), - ...(disabled && styles.wrapperDisabled) - } + const defaultStyle = extendObject( + styles.wrapper, + isChecked ? styles.wrapperChecked : {}, + disabled ? styles.wrapperDisabled : {} + ) - const styleObj = { - ...styles.container, - ...style - } + const styleObj = extendObject(styles.container, style) const onChange = (evt: NativeSyntheticEvent) => { if (disabled || isChecked) return @@ -135,7 +132,7 @@ const Radio = forwardRef, RadioProps>( setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) - const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle) + const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle) if (backgroundStyle) { warn('Radio does not support background image-related styles!') @@ -160,13 +157,17 @@ const Radio = forwardRef, RadioProps>( const innerProps = useInnerProps( props, - { - ref: nodeRef, - style: { ...innerStyle, ...layoutStyle }, - ...layoutProps, - bindtap: onTap, - catchtap: catchTap - }, + extendObject( + { + ref: nodeRef, + style: extendObject(innerStyle, layoutStyle) + }, + layoutProps, + { + bindtap: onTap, + catchtap: catchTap + } + ), [], { layoutRef From 4b4766abaa91e34171e7cead6552c7eb14a3428e Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Thu, 7 Nov 2024 14:55:22 +0800 Subject: [PATCH 20/34] feat: remove useless events and spread object --- .../lib/runtime/components/react/mpx-button.tsx | 12 +++++++----- .../runtime/components/react/mpx-checkbox.tsx | 16 +++------------- .../lib/runtime/components/react/mpx-radio.tsx | 15 +++------------ 3 files changed, 13 insertions(+), 30 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx index 3d6b05ad53..14428f0b70 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -174,11 +174,13 @@ 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 } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx index 130dfcd3ca..6f3329f50a 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx @@ -46,7 +46,6 @@ export interface CheckboxProps extends Selection { 'parent-height'?: number; children?: ReactNode bindtap?: (evt: NativeSyntheticEvent | unknown) => void - catchtap?: (evt: NativeSyntheticEvent | unknown) => void } const styles = StyleSheet.create({ @@ -91,8 +90,7 @@ const Checkbox = forwardRef, CheckboxProps>( 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, - bindtap, - catchtap + bindtap } = props const [isChecked, setIsChecked] = useState(!!checked) @@ -119,14 +117,7 @@ const Checkbox = forwardRef, CheckboxProps>( } const onTap = (evt: NativeSyntheticEvent) => { - if (disabled) return - bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props)) - onChange(evt) - } - - const catchTap = (evt: NativeSyntheticEvent) => { - if (disabled) return - catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props)) + bindtap!(getCustomEvent('tap', evt, { layoutRef }, props)) onChange(evt) } @@ -174,8 +165,7 @@ const Checkbox = forwardRef, CheckboxProps>( }, layoutProps, { - bindtap: onTap, - catchtap: catchTap + bindtap: !disabled && onTap } ), [], diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx index 4bd17388a2..392da3ee59 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx @@ -27,7 +27,6 @@ export interface RadioProps { 'parent-height'?: number; children: ReactNode bindtap?: (evt: NativeSyntheticEvent | unknown) => void - catchtap?: (evt: NativeSyntheticEvent | unknown) => void } const styles = StyleSheet.create({ @@ -79,8 +78,7 @@ const Radio = forwardRef, RadioProps>( 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, - bindtap, - catchtap + bindtap } = props const [isChecked, setIsChecked] = useState(!!checked) @@ -113,16 +111,10 @@ const Radio = forwardRef, RadioProps>( } const onTap = (evt: NativeSyntheticEvent) => { - if (disabled) return - bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props)) + bindtap!(getCustomEvent('tap', evt, { layoutRef }, props)) onChange(evt) } - const catchTap = (evt: NativeSyntheticEvent) => { - if (disabled) return - catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props)) - } - const { hasSelfPercent, normalStyle, @@ -164,8 +156,7 @@ const Radio = forwardRef, RadioProps>( }, layoutProps, { - bindtap: onTap, - catchtap: catchTap + bindtap: !disabled && onTap } ), [], From 956546b095526f8d45151c6a66d365878bd08c96 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Fri, 8 Nov 2024 12:02:23 +0800 Subject: [PATCH 21/34] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E6=97=A0?= =?UTF-8?q?=E7=94=A8=E5=B1=9E=E6=80=A7=E9=80=8F=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-button.tsx | 20 +++++++++++++++---- .../components/react/mpx-checkbox-group.tsx | 4 +++- .../runtime/components/react/mpx-checkbox.tsx | 6 +++++- .../runtime/components/react/mpx-image.tsx | 6 +++++- .../components/react/mpx-radio-group.tsx | 2 +- .../runtime/components/react/mpx-radio.tsx | 6 +++++- 6 files changed, 35 insertions(+), 9 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx index 14428f0b70..240404fa47 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -381,12 +381,24 @@ const Button = forwardRef, ButtonProps>((buttonPro }, layoutProps, { - bindtouchstart: onTouchStart, - bindtouchend: onTouchEnd, - bindtap: onTap + 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-checkbox-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx index ebe572f4c3..eaf407bc41 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx @@ -125,7 +125,9 @@ const CheckboxGroup = forwardRef< }, layoutProps ), - [], + [ + 'name' + ], { layoutRef } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx index 6f3329f50a..39f7111ae7 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx @@ -168,7 +168,11 @@ const Checkbox = forwardRef, CheckboxProps>( bindtap: !disabled && onTap } ), - [], + [ + 'value', + 'disabled', + 'checked' + ], { layoutRef } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx index 64161a035f..7a1c0427e5 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx @@ -346,7 +346,11 @@ const Image = forwardRef, ImageProps>((props, re }, layoutProps ), - [], + [ + 'src', + 'mode', + 'svg' + ], { layoutRef } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx index 14cf036063..c7cdc49160 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx @@ -122,7 +122,7 @@ const radioGroup = forwardRef< }, layoutProps ), - [], + ['name'], { layoutRef } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx index 392da3ee59..d45cd98a9e 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx @@ -159,7 +159,11 @@ const Radio = forwardRef, RadioProps>( bindtap: !disabled && onTap } ), - [], + [ + 'value', + 'disabled', + 'checked' + ], { layoutRef } From cebb79c33e7dd6aeb60e93b1918144d6bc409bde Mon Sep 17 00:00:00 2001 From: shangqunfeng Date: Fri, 8 Nov 2024 13:20:20 +0800 Subject: [PATCH 22/34] fix(assign): fix view and switch assign. --- .../runtime/components/react/mpx-switch.tsx | 13 ++-- .../lib/runtime/components/react/mpx-view.tsx | 77 +++++++++---------- 2 files changed, 42 insertions(+), 48 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx index 3e906114db..cb6426f4df 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx @@ -12,7 +12,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners' import CheckBox from './mpx-checkbox' import { FormContext, FormFieldValue } from './context' -import { useTransformStyle, useLayout } from './utils' +import { useTransformStyle, useLayout, extendObject } from './utils' interface _SwitchProps extends SwitchProps { style?: ViewStyle @@ -111,12 +111,13 @@ const _Switch = forwardRef, _SwitchProps>((prop } } - const innerProps = useInnerProps(props, { + const innerProps = useInnerProps(props, extendObject({ ref: nodeRef, - style: { ...normalStyle, ...layoutStyle }, - ...layoutProps, - ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {} - }, [ + style: extendObject(normalStyle, layoutStyle) + }, + layoutProps, + !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}) + , [ 'checked', 'disabled', 'type', diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx index 44578c85eb..2445f6b97d 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx @@ -9,7 +9,7 @@ import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, Children, clon import useInnerProps from './getInnerListeners' import { ExtendedViewStyle } from './types/common' import useNodesRef, { HandlerRef } from './useNodesRef' -import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils' +import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils' import LinearGradient from 'react-native-linear-gradient' export interface _ViewProps extends ViewProps { @@ -228,10 +228,7 @@ function backgroundPosition (imageProps: ImageProps, preImageInfo: PreImageInfo, } } - imageProps.style = { - ...imageProps.style as ImageStyle, - ...style - } + imageProps.style = extendObject(imageProps.style, style) } // background-size 转换 @@ -282,11 +279,9 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima } as { width: NumberVal, height: NumberVal } } } + // 样式合并 - imageProps.style = { - ...imageProps.style as ImageStyle, - ...dimensions - } + imageProps.style = extendObject(imageProps.style, dimensions) } // background-image转换为source @@ -471,10 +466,9 @@ function parseLinearGradient (text: string): LinearInfo | undefined { return prev }, { colors: [], locations: [] }) - return { - ...linearInfo, + return extendObject(linearInfo, { direction: direction.trim() - } + }) } function parseBgImage (text: string): { @@ -658,21 +652,17 @@ const _View = forwardRef, _ViewProps>((viewProps, r const [isHover, setIsHover] = useState(false) // 默认样式 - const defaultStyle: ExtendedViewStyle = { - // flex 布局相关的默认样式 - ...style.display === 'flex' && { - flexDirection: 'row', - flexBasis: 'auto', - flexShrink: 1, - flexWrap: 'nowrap' - } - } + const defaultStyle: ExtendedViewStyle = extendObject( + style.display === 'flex' + ? { + flexDirection: 'row', + flexBasis: 'auto', + flexShrink: 1, + flexWrap: 'nowrap' + } + : {}) - const styleObj: ExtendedViewStyle = { - ...defaultStyle, - ...style, - ...(isHover ? hoverStyle : null) - } + const styleObj: ExtendedViewStyle = extendObject(defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {}) const { normalStyle, @@ -689,7 +679,7 @@ const _View = forwardRef, _ViewProps>((viewProps, r parentHeight }) - const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle) + const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle) enableBackground = enableBackground || !!backgroundStyle const enableBackgroundRef = useRef(enableBackground) @@ -747,22 +737,25 @@ const _View = forwardRef, _ViewProps>((viewProps, r layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef }) - const innerProps = useInnerProps(props, { - ref: nodeRef, - style: { ...innerStyle, ...layoutStyle }, - ...layoutProps, - ...(hoverStyle && { - bindtouchstart: onTouchStart, - bindtouchend: onTouchEnd + const innerProps = useInnerProps( + props, + extendObject({ + ref: nodeRef, + style: extendObject(innerStyle, layoutStyle) + }, layoutProps, hoverStyle + ? { + bindtouchstart: onTouchStart, + bindtouchend: onTouchEnd + } + : {} + ), [ + 'hover-start-time', + 'hover-stay-time', + 'hover-style', + 'hover-class' + ], { + layoutRef }) - }, [ - 'hover-start-time', - 'hover-stay-time', - 'hover-style', - 'hover-class' - ], { - layoutRef - }) return ( Date: Fri, 8 Nov 2024 14:58:54 +0800 Subject: [PATCH 23/34] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9getComputedStyl?= =?UTF-8?q?e=E7=9B=B8=E5=85=B3=E6=A0=B7=E5=BC=8F=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/platform/api/create-selector-query/rnNodesRef.js | 9 +++------ .../lib/runtime/components/react/mpx-button.tsx | 2 +- .../lib/runtime/components/react/mpx-checkbox-group.tsx | 2 +- .../lib/runtime/components/react/mpx-checkbox.tsx | 2 +- .../lib/runtime/components/react/mpx-form.tsx | 4 +++- .../lib/runtime/components/react/mpx-icon.tsx | 2 +- .../lib/runtime/components/react/mpx-image.tsx | 7 ++++--- .../lib/runtime/components/react/mpx-input.tsx | 4 +++- .../lib/runtime/components/react/mpx-label.tsx | 2 +- .../lib/runtime/components/react/mpx-movable-area.tsx | 4 +++- .../runtime/components/react/mpx-picker-view-column.tsx | 4 +++- .../lib/runtime/components/react/mpx-picker-view.tsx | 6 +++++- .../lib/runtime/components/react/mpx-radio-group.tsx | 2 +- .../lib/runtime/components/react/mpx-radio.tsx | 2 +- .../lib/runtime/components/react/mpx-scroll-view.tsx | 1 + .../lib/runtime/components/react/mpx-swiper-item.tsx | 5 +++-- .../lib/runtime/components/react/mpx-swiper/carouse.tsx | 6 ++++-- .../lib/runtime/components/react/mpx-switch.tsx | 4 +++- .../lib/runtime/components/react/mpx-text.tsx | 4 +++- .../lib/runtime/components/react/mpx-view.tsx | 2 +- .../lib/runtime/components/react/mpx-web-view.tsx | 2 +- 21 files changed, 47 insertions(+), 29 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 index d8d9eba21b..5086ec172f 100644 --- 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,9 @@ 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 originStyle = nodeInstance.props.current.style + const finalStyle = nodeInstance.instance.style + const computedStyle = finalStyle || originStyle || {} config.forEach((key) => { const humpKey = dash2hump(key) // 取 style 的 key 是根据传入的 key 来设置，传什么设置什么 key，只不过取值需要做兼容 diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx index 240404fa47..a605d283a8 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -298,7 +298,7 @@ const Button = forwardRef, 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 }) 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 index eaf407bc41..a70d2bdeff 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx @@ -64,7 +64,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 }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx index 39f7111ae7..20426d842d 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx @@ -133,7 +133,7 @@ const Checkbox = forwardRef, CheckboxProps>( const nodeRef = useRef(null) useNodesRef(props, ref, nodeRef, { - defaultStyle, + style: extendObject(defaultStyle, normalStyle), change: onChange }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx index 49691156c7..e7971a6712 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx @@ -52,7 +52,9 @@ const _Form = forwardRef, FormProps>((fromProps: For const { textStyle, innerStyle = {} } = splitStyle(normalStyle) const formRef = useRef(null) - useNodesRef(props, ref, formRef) + useNodesRef(props, ref, formRef, { + style: normalStyle + }) const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx index 7b84fb07c7..05cf793b10 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx @@ -73,7 +73,7 @@ const Icon = forwardRef, 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 }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx index 7a1c0427e5..907f960d8a 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx @@ -119,9 +119,6 @@ const Image = forwardRef, ImageProps>((props, re ) const nodeRef = useRef(null) - useNodesRef(props, ref, nodeRef, { - defaultStyle - }) const onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => { setViewWidth(width) @@ -130,6 +127,10 @@ const Image = forwardRef, ImageProps>((props, re const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) + useNodesRef(props, ref, nodeRef, { + style: normalStyle + }) + const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout }) const { width, height } = normalStyle diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx index dd2fe4448d..1d7d30d137 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx @@ -195,7 +195,9 @@ const Input = forwardRef, FinalInputProps } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) const nodeRef = useRef(null) - useNodesRef(props, ref, nodeRef) + useNodesRef(props, ref, nodeRef, { + style: normalStyle + }) const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx index 2bd76f7b44..859ae87ee2 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx @@ -52,7 +52,7 @@ const Label = forwardRef, LabelProps>( } = 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 }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx index f323ccc221..7569cf3eea 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx @@ -42,7 +42,9 @@ const _MovableArea = forwardRef, MovableAreaP } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) const movableViewRef = useRef(null) - useNodesRef(props, ref, movableViewRef) + useNodesRef(props, ref, movableViewRef, { + style: normalStyle + }) const onLayout = (e: LayoutChangeEvent) => { const { width = 10, height = 10 } = e.nativeEvent.layout diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx index 24bd622916..c1373d17b4 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx @@ -39,7 +39,9 @@ const _PickerViewColumn = forwardRef, // const { innerStyle } = splitStyle(normalStyle) // scrollView的ref const scrollViewRef = useRef(null) - useNodesRef(props, ref, scrollViewRef, {}) + useNodesRef(props, ref, scrollViewRef, { + style: normalStyle + }) // 每个元素的高度 let [itemH, setItemH] = useState(0) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx index 0b4a61e600..b59dc7f790 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx @@ -67,7 +67,6 @@ const _PickerView = forwardRef, PickerViewProp const indicatorStyle = parseInlineStyle(props['indicator-style']) const { height: indicatorH, width: indicatorW } = indicatorStyle const nodeRef = useRef(null) - useNodesRef(props, ref, nodeRef, {}) // picker-view 设置的color等textStyle,在小程序上的表现是可以继承到最内层的text样式, 但是RN内部column是slot无法设置, 需要业务自己在column内的元素上设置 const { normalStyle, @@ -77,6 +76,11 @@ const _PickerView = forwardRef, PickerViewProp setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext }) + + useNodesRef(props, ref, nodeRef, { + style: normalStyle + }) + const { textStyle } = splitStyle(normalStyle) const { textProps } = splitProps(props) const { diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx index c7cdc49160..2e8c1a1ea0 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx @@ -63,7 +63,7 @@ const radioGroup = forwardRef< } = 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 }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx index d45cd98a9e..6be0c78158 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx @@ -132,7 +132,7 @@ const Radio = forwardRef, RadioProps>( const nodeRef = useRef(null) useNodesRef(props, ref, nodeRef, { - defaultStyle, + style: extendObject(defaultStyle, normalStyle), change: onChange }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx index 3f7afe7849..c0df561242 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx @@ -161,6 +161,7 @@ const _ScrollView = forwardRef, S const scrollViewRef = useAnimatedRef() useNodesRef(props, ref, scrollViewRef, { + style: normalStyle, scrollOffset: scrollOptions, node: { scrollEnabled: scrollX || scrollY, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx index 127ce1cc56..eab86c6432 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx @@ -18,7 +18,6 @@ interface SwiperItemProps { const _SwiperItem = forwardRef, SwiperItemProps>((props: SwiperItemProps, ref) => { const { - 'enable-offset': enableOffset, 'enable-var': enableVar, 'external-var-context': externalVarContext, style @@ -26,7 +25,6 @@ const _SwiperItem = forwardRef, SwiperItemProp const { textProps } = splitProps(props) const nodeRef = useRef(null) - useNodesRef(props, ref, nodeRef, {}) const { normalStyle, @@ -37,6 +35,9 @@ const _SwiperItem = forwardRef, SwiperItemProp setHeight } = useTransformStyle(style, { enableVar, externalVarContext }) const { textStyle, innerStyle } = splitStyle(normalStyle) + useNodesRef(props, ref, nodeRef, { + style: normalStyle + }) const { // 存储layout布局信息 diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/carouse.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/carouse.tsx index 1fa74167b5..f2bef1561c 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/carouse.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/carouse.tsx @@ -57,7 +57,7 @@ const _Carouse = forwardRef, Carouse parentWidth, parentHeight } = props - // 计算transfrom之类的 + // 计算transform之类的 const { normalStyle, hasVarDec, @@ -90,7 +90,9 @@ const _Carouse = forwardRef, Carouse // 内部存储上一次的offset值 const autoplayTimerRef = useRef | null>(null) const scrollViewRef = useRef(null) - useNodesRef(props, ref, scrollViewRef, {}) + useNodesRef(props, ref, scrollViewRef, { + style: normalStyle + }) const { // 存储layout布局信息 layoutRef, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx index cb6426f4df..a9cc3cac83 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx @@ -77,7 +77,9 @@ const _Switch = forwardRef, _SwitchProps>((prop }, [checked]) const nodeRef = useRef(null) - useNodesRef(props, ref, nodeRef) + useNodesRef(props, ref, nodeRef, { + style: normalStyle + }) const { layoutRef, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx index 3eb7f505ee..94768d89ef 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx @@ -49,7 +49,9 @@ const _Text = forwardRef, _TextProps>((props, ref): }) const nodeRef = useRef(null) - useNodesRef(props, ref, nodeRef) + useNodesRef(props, ref, nodeRef, { + style: normalStyle + }) const innerProps = useInnerProps(props, { ref: nodeRef, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx index 2445f6b97d..b54d3d3254 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx @@ -689,7 +689,7 @@ const _View = forwardRef, _ViewProps>((viewProps, r const nodeRef = useRef(null) useNodesRef(props, ref, nodeRef, { - defaultStyle + style: normalStyle }) const dataRef = useRef<{ diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx index 8dcae5589e..ddadabf3f8 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx @@ -65,7 +65,7 @@ const _WebView = forwardRef, WebViewProps>((pr const webViewRef = useRef(null) useNodesRef(props, ref, webViewRef, { - defaultStyle: defaultWebViewStyle + style: defaultWebViewStyle }) const _messageList: any[] = [] From a65af40a2e3d6d9b883fcba227708f0ab699120d Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Fri, 8 Nov 2024 19:10:37 +0800 Subject: [PATCH 24/34] fix: lint --- .../webpack-plugin/lib/runtime/components/react/mpx-view.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx index 875416ee0a..4ef4e661e4 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx @@ -744,13 +744,12 @@ const _View = forwardRef, _ViewProps>((viewProps, r layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef }) - const innerProps = useInnerProps( props, extendObject({ ref: nodeRef, style: extendObject(innerStyle, layoutStyle) - }, + }, layoutProps, hoverStyle ? { From aee41f6df080355199b4b0bfb00ba3abb03b286e Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Fri, 8 Nov 2024 19:12:08 +0800 Subject: [PATCH 25/34] fix: error --- .../webpack-plugin/lib/runtime/components/react/mpx-view.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx index 4ef4e661e4..274597f684 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx @@ -744,11 +744,12 @@ const _View = forwardRef, _ViewProps>((viewProps, r layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef }) + const viewStyle = extendObject(innerStyle, layoutStyle) const innerProps = useInnerProps( props, extendObject({ ref: nodeRef, - style: extendObject(innerStyle, layoutStyle) + style: viewStyle }, layoutProps, hoverStyle From 085107b1f81abd691bc591efbc8c764ef468ca65 Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Mon, 11 Nov 2024 22:37:41 +0800 Subject: [PATCH 26/34] feat: filter useless props --- .../lib/runtime/components/react/mpx-input.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx index 1d7d30d137..f9041e9c32 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx @@ -399,7 +399,23 @@ const Input = forwardRef, FinalInputProps onSelectionChange: bindselectionchange && onSelectionChange } ), - [], + [ + 'type', + 'keyboardType', + 'password', + 'placeholder-style', + 'disabled', + 'maxlength', + 'auto-focus', + 'focus', + 'confirm-type', + 'confirm-hold', + 'cursor', + 'cursor-color', + 'selection-start', + 'selection-end', + 'multiline' + ], { layoutRef } From cdbf82d056772b1c2541b4695045a4ca161a7f44 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Tue, 19 Nov 2024 11:44:42 +0800 Subject: [PATCH 27/34] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9style=E9=80=8F?= =?UTF-8?q?=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-movable-view.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx index 8a212a432b..a5b29a9a37 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx @@ -148,7 +148,7 @@ const _MovableView = forwardRef, MovableViewP const nodeRef = useRef(null) useNodesRef(props, ref, nodeRef, { - defaultStyle: styles.container, + style: normalStyle, gestureRef: movableGestureRef }) From 55311b24b83e40b8afdd3e0faca337e7553d8b8b Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 21 Nov 2024 14:08:21 +0800 Subject: [PATCH 28/34] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4picker=20time?= =?UTF-8?q?=E9=87=8D=E5=A4=8DuseNodesRef=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-picker/time.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/time.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/time.tsx index 3ee33a156d..cfdc531382 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/time.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/time.tsx @@ -135,7 +135,6 @@ const _TimePicker = forwardRef, TimeProps>((props: T // 存储layout布局信息 const layoutRef = useRef({}) const viewRef = useRef(null) - useNodesRef(props, ref, viewRef, {}) // 存储modal的布局信息 const modalLayoutRef = useRef({}) const modalRef = useRef(null) From 9ffe156094764201cea6f0d19e01d619ecba9b3f Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 21 Nov 2024 14:47:41 +0800 Subject: [PATCH 29/34] =?UTF-8?q?chore:=20=E6=8B=89=E9=BD=90react-native-r?= =?UTF-8?q?eanimated=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/webpack-plugin/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index 8b7e39f289..37b3093a1f 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -89,7 +89,7 @@ "react-native": "^0.74.5", "react-native-gesture-handler": "^2.18.1", "react-native-linear-gradient": "^2.8.3", - "react-native-reanimated": "^3.15.4", + "react-native-reanimated": "^3.15.2", "react-native-svg": "^15.8.0", "react-native-safe-area-context": "^4.12.0", "react-native-webview": "^13.12.2", From 5ae0db6b92e1dff1991fac7fe7e31eb321047214 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 21 Nov 2024 20:41:43 +0800 Subject: [PATCH 30/34] =?UTF-8?q?fix:=20=E5=9F=BA=E7=A1=80=E7=BB=84?= =?UTF-8?q?=E4=BB=B6bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-checkbox.tsx | 8 ++++++-- .../lib/runtime/components/react/mpx-input.tsx | 2 +- .../lib/runtime/components/react/mpx-radio.tsx | 2 +- .../lib/runtime/components/react/mpx-scroll-view.tsx | 6 +++--- .../lib/runtime/components/react/mpx-switch.tsx | 1 - 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx index 30868ff688..7c1acf3c44 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx @@ -46,6 +46,7 @@ export interface CheckboxProps extends Selection { 'parent-height'?: number; children?: ReactNode bindtap?: (evt: NativeSyntheticEvent | unknown) => void + _onChange?: (evt: NativeSyntheticEvent | unknown, { checked }: { checked: boolean }) => void } const styles = StyleSheet.create({ @@ -90,7 +91,8 @@ const Checkbox = forwardRef, CheckboxProps>( 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, - bindtap + bindtap, + _onChange } = props const [isChecked, setIsChecked] = useState(!!checked) @@ -114,10 +116,12 @@ const Checkbox = forwardRef, CheckboxProps>( groupValue[value].checked = checked } notifyChange && notifyChange(evt) + // Called when the switch type attribute is checkbox + _onChange && _onChange(evt, { checked }) } const onTap = (evt: NativeSyntheticEvent) => { - bindtap!(getCustomEvent('tap', evt, { layoutRef }, props)) + bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props)) onChange(evt) } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx index 8a53cb8b16..2dc2770208 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx @@ -178,7 +178,7 @@ const Input = forwardRef, FinalInputProps const [contentHeight, setContentHeight] = useState(0) const styleObj = extendObject( - { padding: 0 }, + { padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight ? { diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx index 661af23feb..f4cb9b8475 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx @@ -111,7 +111,7 @@ const Radio = forwardRef, RadioProps>( } const onTap = (evt: NativeSyntheticEvent) => { - bindtap!(getCustomEvent('tap', evt, { layoutRef }, props)) + bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props)) onChange(evt) } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx index faabafaa74..ada5da957e 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx @@ -439,9 +439,9 @@ const _ScrollView = forwardRef, S ref: scrollViewRef, onScroll: onScroll, onContentSizeChange: onContentSizeChange, - bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) ? onScrollTouchStart : undefined, - bindtouchmove: ((enhanced && binddragging) || bindtouchend) ? onScrollTouchMove : undefined, - bindtouchend: ((enhanced && binddragend) || bindtouchend) ? onScrollTouchEnd : undefined, + bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart, + bindtouchmove: ((enhanced && binddragging) || bindtouchend) && onScrollTouchMove, + bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd, onScrollBeginDrag: onScrollDrag, onScrollEndDrag: onScrollDrag, onMomentumScrollEnd: onScrollEnd diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx index 40a47838c2..012d578e7b 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx @@ -42,7 +42,6 @@ const _Switch = forwardRef, _SwitchProps>((prop 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, - bindchange, catchchange } = props From 030242191b7684b043badce8ab25c4697a2d339a Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Tue, 3 Dec 2024 17:10:30 +0800 Subject: [PATCH 31/34] fix: time picker --- .../api/create-selector-query/rnNodesRef.js | 3 +-- .../components/react/mpx-picker/date.tsx | 7 ++++-- .../components/react/mpx-picker/index.tsx | 5 ++-- .../react/mpx-picker/multiSelector.tsx | 7 ++++-- .../components/react/mpx-picker/region.tsx | 7 ++++-- .../components/react/mpx-picker/selector.tsx | 7 ++++-- .../components/react/mpx-picker/time.tsx | 24 ++++++++----------- 7 files changed, 34 insertions(+), 26 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 index 5086ec172f..edeb4311dc 100644 --- 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,9 +84,8 @@ const getComputedStyle = (config = []) => { return wrapFn((nodeInstance, resolve) => { config = new Set(config) const res = {} - const originStyle = nodeInstance.props.current.style const finalStyle = nodeInstance.instance.style - const computedStyle = finalStyle || originStyle || {} + const computedStyle = finalStyle || {} config.forEach((key) => { const humpKey = dash2hump(key) // 取 style 的 key 是根据传入的 key 来设置，传什么设置什么 key，只不过取值需要做兼容 diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/date.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/date.tsx index 2790fe32f0..82fc74ee78 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/date.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/date.tsx @@ -27,12 +27,14 @@ function dateToString (date: Date, fields: 'day' | 'month' | 'year' = 'day'): st } const _DatePicker = forwardRef, DateProps>((props: DateProps, ref): React.JSX.Element => { - const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields } = props + const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields, style } = props const [datevalue, setDateValue] = useState(value) // 存储layout布局信息 const layoutRef = useRef({}) const viewRef = useRef(null) - useNodesRef(props, ref, viewRef, { + const nodeRef = useRef(null) + useNodesRef(props, ref, nodeRef, { + style }) useEffect(() => { @@ -58,6 +60,7 @@ const _DatePicker = forwardRef, DateProps>((props: D } const dateProps = { + ref: nodeRef, precision: fields, value: formatTimeStr(datevalue), minDate: formatTimeStr(start), diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/index.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/index.tsx index d088f9d92b..77cdf9c161 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/index.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/index.tsx @@ -32,10 +32,11 @@ import { FormContext, FormFieldValue } from '../context' */ const _Picker = forwardRef, PickerProps>((props: PickerProps, ref): React.JSX.Element => { - const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props + const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange, style } = props const innerLayout = useRef({}) const nodeRef = useRef(null) useNodesRef(props, ref, nodeRef, { + style }) const innerProps = useInnerProps(props, { ref: nodeRef @@ -92,7 +93,7 @@ const _Picker = forwardRef, PickerProps>((props: P bindcolumnchange && bindcolumnchange(eventData) } const commonProps = { - ...{ innerProps }, + ...innerProps, mode, children, bindchange: onChange, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/multiSelector.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/multiSelector.tsx index 6be4643c7e..a032eb187f 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/multiSelector.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/multiSelector.tsx @@ -80,7 +80,7 @@ function getColumnIndexByValue (range: any[] = [], column: number, value: any[] } const _MultiSelectorPicker = forwardRef, MultiSelectorProps>((props: MultiSelectorProps, ref): React.JSX.Element => { - const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange } = props + const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange, style } = props const formatRange = formatRangeFun(range, props['range-key']) const initValue = getInnerValueByIndex(formatRange, value) // 选中的索引值 @@ -90,7 +90,9 @@ const _MultiSelectorPicker = forwardRef, Mu // 存储layout布局信息 const layoutRef = useRef({}) const viewRef = useRef(null) - useNodesRef(props, ref, viewRef, { + const nodeRef = useRef(null) + useNodesRef(props, ref, nodeRef, { + style }) useEffect(() => { @@ -126,6 +128,7 @@ const _MultiSelectorPicker = forwardRef, Mu } const antPickerProps = { + ref: nodeRef, data, value: selected, cols: range.length, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/region.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/region.tsx index d714e657e8..203a845288 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/region.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/region.tsx @@ -38,14 +38,16 @@ function formateRegionData (clObj: RegionObj[] = [], customItem?: string, depth } const _RegionPicker = forwardRef, RegionProps>((props: RegionProps, ref): React.JSX.Element => { - const { children, value, bindchange, bindcancel, disabled } = props + const { children, value, bindchange, bindcancel, disabled, style } = props const formatRegionData = formateRegionData(regionData, props['custom-item']) const [regionvalue, setRegionValue] = useState(value) // 存储layout布局信息 const layoutRef = useRef({}) const viewRef = useRef(null) - useNodesRef(props, ref, viewRef, { + const nodeRef = useRef(null) + useNodesRef(props, ref, nodeRef, { + style }) const onChange = (value: string[]): void => { @@ -83,6 +85,7 @@ const _RegionPicker = forwardRef, RegionProps>((pr } const regionProps = { + ref: nodeRef, data: formatRegionData, value: regionvalue, onChange, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/selector.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/selector.tsx index c3460aa039..a8a05bcf75 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/selector.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/selector.tsx @@ -22,7 +22,7 @@ const formatRangeFun = (range: Array, rangeKey = ''): any => { } const _SelectorPicker = forwardRef, SelectorProps>((props: SelectorProps, ref): React.JSX.Element => { - const { range, children, value, disabled, bindchange, bindcancel } = props + const { range, children, value, disabled, bindchange, bindcancel, style } = props // 格式化数据为Array<*> const formatRange: PickerColumn = formatRangeFun(range, props['range-key']) // 选中的索引值 @@ -32,7 +32,9 @@ const _SelectorPicker = forwardRef, SelectorProp // 存储layout布局信息 const layoutRef = useRef({}) const viewRef = useRef(null) - useNodesRef(props, ref, viewRef, { + const nodeRef = useRef(null) + useNodesRef(props, ref, nodeRef, { + style }) useEffect(() => { @@ -62,6 +64,7 @@ const _SelectorPicker = forwardRef, SelectorProp } const antPickerProps = { + ref: nodeRef, data, value: [selected], cols: 1, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/time.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/time.tsx index cfdc531382..8d2bd04188 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/time.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/time.tsx @@ -1,5 +1,5 @@ import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native' -import { PickerView } from '@ant-design/react-native' +import { PickerView, Portal } from '@ant-design/react-native' import React, { forwardRef, useState, useRef, useEffect } from 'react' import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数 import { TimeProps } from './type' @@ -13,8 +13,8 @@ const styles: { [key: string]: Object } = { showModal: { backgroundColor: 'black', opacity: 0.5, - position: 'absolute', - width: '100%' + width: '100%', + height: '100%' }, hideModal: { opacity: 1, @@ -125,7 +125,7 @@ function checkSelectedIsValid (strStart: string, strEnd: string, selected: numbe // start="02:10" end = 23:01 const _TimePicker = forwardRef, TimeProps>((props: TimeProps, ref): React.JSX.Element => { - const { children, start, end, value, bindchange, bindcancel, disabled } = props + const { children, start, end, value, bindchange, bindcancel, style } = props const defaultProps = { start: '00:10', end: '23:59' @@ -135,10 +135,11 @@ const _TimePicker = forwardRef, TimeProps>((props: T // 存储layout布局信息 const layoutRef = useRef({}) const viewRef = useRef(null) + const nodeRef = useRef(null) + useNodesRef(props, ref, nodeRef, { style }) // 存储modal的布局信息 const modalLayoutRef = useRef({}) const modalRef = useRef(null) - useNodesRef(props, ref, modalRef, {}) const [visible, setVisible] = useState(false) const columnData = generateColumns() const [data, setData] = useState(columnData) @@ -187,12 +188,6 @@ const _TimePicker = forwardRef, TimeProps>((props: T } else { // [9, 13] setTimeValue(date) - const strDate = formatStr(date) - bindchange && bindchange({ - detail: { - value: strDate - } - }) } } @@ -212,6 +207,7 @@ const _TimePicker = forwardRef, TimeProps>((props: T const renderModalChildren = () => { const pickerProps = { + ref: nodeRef, data, value: timevalue, defaultValue: timevalue, @@ -248,12 +244,11 @@ const _TimePicker = forwardRef, TimeProps>((props: T } - const strStyle = visible ? styles.showModal : styles.hideModal - const mheight = Math.floor(offsetTop) // Animated.View return (<> - + + , TimeProps>((props: T {renderModalChildren()} + {renderChildren()} ) }) From 156eae3c221e267c8a4813e9de4a2d689f56c214 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 4 Dec 2024 10:53:39 +0800 Subject: [PATCH 32/34] fix: picker --- .../components/react/getInnerListeners.ts | 2 +- .../runtime/components/react/mpx-button.tsx | 2 +- .../components/react/mpx-picker/region.tsx | 2 +- .../components/react/mpx-picker/type.ts | 91 ++++++++++--------- .../lib/runtime/components/react/utils.tsx | 4 +- 5 files changed, 53 insertions(+), 48 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index 78bd6e3139..08e4e13f3e 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -31,7 +31,7 @@ const getTouchEvent = ( const { layoutRef } = config const currentTarget = extendObject( - event.currentTarget || {}, + event.currentTarget, { id: id || '', dataset: collectDataset(props), diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx index 19106b80f6..92531bb052 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -278,7 +278,7 @@ const Button = forwardRef, ButtonProps>((buttonPro const defaultViewStyle = extendObject( styles.button, - isMiniSize ? styles.buttonMini : {}, + isMiniSize ? styles.buttonMini : null, viewStyle ) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/region.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/region.tsx index 203a845288..65c422b017 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/region.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/region.tsx @@ -45,7 +45,7 @@ const _RegionPicker = forwardRef, RegionProps>((pr // 存储layout布局信息 const layoutRef = useRef({}) const viewRef = useRef(null) - const nodeRef = useRef(null) + const nodeRef = useRef(null) useNodesRef(props, ref, nodeRef, { style }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/type.ts b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/type.ts index 00a1147bec..703de2a475 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/type.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker/type.ts @@ -3,87 +3,92 @@ import { PickerValue } from '@ant-design/react-native' export type Obj = Record export type SelectorProps = { - mode: string, + mode: string // 表示选择了 range 中的第几个（下标从 0 开始） value: PickerValue - disabled?: boolean, - children: ReactNode, - bindcancel?: Function, - bindchange: Function, + disabled?: boolean + children: ReactNode + bindcancel?: Function + bindchange: Function // mode 为 selector 或 multiSelector 时，range 有效 - range: Array, + range: Array // 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器《显示内容》 对象中的属性 - 'range-key': string, + 'range-key': string getInnerLayout: Function + style?: Record // bindcolumnchange?: Function } export type MultiSelectorProps = { - mode: string, + mode: string // 表示选择了 range 中的第几个（下标从 0 开始） - value: Array, - disabled?: boolean, - children: ReactNode, - bindcancel?: Function, - bindchange: Function, - bindcolumnchange?: Function, + value: Array + disabled?: boolean + children: ReactNode + bindcancel?: Function + bindchange: Function + bindcolumnchange?: Function // mode 为 selector 或 multiSelector 时，range 有效 - range: Array>, + range: Array> // 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器《显示内容》 对象中的属性 - 'range-key': string, + 'range-key': string getInnerLayout: Function + style?: Record } export type TimeProps = { - mode: string, + mode: string // 表示选择了 range 中的第几个（下标从 0 开始） - value: string, - disabled?: boolean, - children: ReactNode, - bindcancel?: Function, - bindchange: Function, - start: string, - end: string, + value: string + disabled?: boolean + children: ReactNode + bindcancel?: Function + bindchange: Function + start: string + end: string getInnerLayout: Function + style?: Record } export type DateProps = { - mode: string, + mode: string // 表示选择了 range 中的第几个（下标从 0 开始） - value: string, - fields?: 'day' | 'month' | 'year', - disabled?: boolean, - children: ReactNode, - bindcancel?: Function, - bindchange: Function, - start: string, - end: string, + value: string + fields?: 'day' | 'month' | 'year' + disabled?: boolean + children: ReactNode + bindcancel?: Function + bindchange: Function + start: string + end: string getInnerLayout: Function + style?: Record } export type RegionProps = { - mode: string, + mode: string // 表示选择了 range 中的第几个（下标从 0 开始） - value: Array, + value: Array level: 'province' | 'city' | 'region' | 'sub-district' - 'custom-item'?: string, - disabled?: boolean, - children: ReactNode, - bindcancel?: Function, - bindchange: Function, + 'custom-item'?: string + disabled?: boolean + children: ReactNode + bindcancel?: Function + bindchange: Function getInnerLayout: Function + style?: Record } export type RegionObj = { - value: string, + value: string code: string postcode?: string children?: RegionObj[] } export type PickerData = { - value: string, - label: string, + value: string + label: string children?: Array } diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index 2df16a305e..0d7904fb20 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -582,8 +582,8 @@ export function flatGesture (gestures: Array = []) { })) || [] } -export function extendObject (...args: Record[]) { - return Object.assign({}, ...args) +export function extendObject (target: Record, ...sources: (Record | null | undefined)[]) { + return Object.assign(target, ...sources) } export function getCurrentPage (pageId: number | null) { From aa13704ae1c544c606f07e3bc5eb791697cd49ea Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 4 Dec 2024 11:48:36 +0800 Subject: [PATCH 33/34] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9extend?= =?UTF-8?q?=E7=9A=84=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/create-selector-query/rnNodesRef.js | 3 +-- .../components/react/getInnerListeners.ts | 10 ++++--- .../runtime/components/react/mpx-button.tsx | 8 ++++-- .../components/react/mpx-canvas/index.tsx | 4 +-- .../components/react/mpx-checkbox-group.tsx | 4 +-- .../runtime/components/react/mpx-checkbox.tsx | 9 ++++--- .../lib/runtime/components/react/mpx-form.tsx | 2 +- .../lib/runtime/components/react/mpx-icon.tsx | 4 +-- .../runtime/components/react/mpx-image.tsx | 2 ++ .../runtime/components/react/mpx-input.tsx | 2 +- .../runtime/components/react/mpx-label.tsx | 4 +-- .../components/react/mpx-picker-view.tsx | 2 ++ .../components/react/mpx-radio-group.tsx | 4 +-- .../runtime/components/react/mpx-radio.tsx | 7 ++--- .../components/react/mpx-scroll-view.tsx | 4 +-- .../runtime/components/react/mpx-switch.tsx | 2 +- .../lib/runtime/components/react/mpx-view.tsx | 27 +++++++++---------- .../runtime/components/react/mpx-web-view.tsx | 8 +++--- .../lib/runtime/components/react/utils.tsx | 9 ++++--- 19 files changed, 63 insertions(+), 52 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 index edeb4311dc..f4e65b2030 100644 --- 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,8 +84,7 @@ const getComputedStyle = (config = []) => { return wrapFn((nodeInstance, resolve) => { config = new Set(config) const res = {} - const finalStyle = nodeInstance.instance.style - const computedStyle = finalStyle || {} + const computedStyle = nodeInstance.instance.style || {} config.forEach((key) => { const humpKey = dash2hump(key) // 取 style 的 key 是根据传入的 key 来设置，传什么设置什么 key，只不过取值需要做兼容 diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index 08e4e13f3e..4fa7410b33 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -31,6 +31,7 @@ const getTouchEvent = ( const { layoutRef } = config const currentTarget = extendObject( + {}, event.currentTarget, { id: id || '', @@ -40,7 +41,7 @@ const getTouchEvent = ( } ) - return extendObject(event, { + return extendObject({}, event, { type, timeStamp: timestamp, currentTarget, @@ -78,13 +79,13 @@ export const getCustomEvent = ( { detail = {}, layoutRef }: { detail?: Record; layoutRef: LayoutRef }, props: Props = {} ) => { - const targetInfo = extendObject(oe.target || {}, { + const targetInfo = extendObject({}, oe.target, { id: props.id || '', dataset: collectDataset(props), offsetLeft: layoutRef?.current?.offsetLeft || 0, offsetTop: layoutRef?.current?.offsetTop || 0 }) - return extendObject(oe, { + return extendObject({}, oe, { type, detail, target: targetInfo, @@ -132,7 +133,7 @@ const useInnerProps = ( ...userRemoveProps ] - propsRef.current = extendObject(props, additionalProps) + propsRef.current = extendObject({}, props, additionalProps) for (const key in eventConfigMap) { if (hasOwn(propsRef.current, key)) { @@ -296,6 +297,7 @@ const useInnerProps = ( const rawEventKeys = Object.keys(eventConfig) return extendObject( + {}, events, omit(propsRef.current, [...rawEventKeys, ...removeProps]) ) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx index 92531bb052..74d95812ff 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -182,6 +182,7 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => { }, []) const loadingStyle = extendObject( + {}, styles.loading, { transform: [{ rotate }], @@ -277,20 +278,23 @@ const Button = forwardRef, ButtonProps>((buttonPro } const defaultViewStyle = extendObject( + {}, styles.button, isMiniSize ? styles.buttonMini : null, viewStyle ) const defaultTextStyle = extendObject( + {}, styles.text, isMiniSize ? styles.textMini : {}, { color: plain ? plainTextColor : normalTextColor } ) - const defaultStyle = extendObject(defaultViewStyle, defaultTextStyle) + const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle) const styleObj = extendObject( + {}, defaultStyle, style, applyHoverEffect ? hoverStyle : {} @@ -410,7 +414,7 @@ const Button = forwardRef, ButtonProps>((buttonPro extendObject( { ref: nodeRef, - style: extendObject(innerStyle, layoutStyle) + style: extendObject({}, innerStyle, layoutStyle) }, layoutProps, { 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 index 3bc8ffefb9..69075d99c5 100644 --- 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, CanvasPr hasSelfPercent, setWidth, setHeight - } = useTransformStyle(extendObject(style, stylesheet.container), { + } = useTransformStyle(extendObject({}, style, stylesheet.container), { enableVar, externalVarContext, parentFontSize, @@ -93,7 +93,7 @@ const _Canvas = forwardRef, 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 index a2fc6338d4..fcdffee350 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx @@ -64,7 +64,7 @@ const CheckboxGroup = forwardRef< flexWrap: 'wrap' } - const styleObj = extendObject(defaultStyle, style) + const styleObj = extendObject({}, defaultStyle, style) const { hasSelfPercent, @@ -119,7 +119,7 @@ const CheckboxGroup = forwardRef< extendObject( { ref: nodeRef, - style: extendObject(normalStyle, layoutStyle) + style: extendObject({}, normalStyle, layoutStyle) }, layoutProps ), diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx index 7c1acf3c44..48aa98d273 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx @@ -102,11 +102,12 @@ const Checkbox = forwardRef, CheckboxProps>( let notifyChange: (evt: NativeSyntheticEvent) => void | undefined const defaultStyle = extendObject( + {}, styles.wrapper, - disabled ? styles.wrapperDisabled : {} + disabled ? styles.wrapperDisabled : null ) - const styleObj = extendObject(styles.container, style) + const styleObj = extendObject({}, styles.container, style) const onChange = (evt: NativeSyntheticEvent) => { if (disabled) return @@ -137,7 +138,7 @@ const Checkbox = forwardRef, CheckboxProps>( const nodeRef = useRef(null) useNodesRef(props, ref, nodeRef, { - style: extendObject(defaultStyle, normalStyle), + style: extendObject({}, defaultStyle, normalStyle), change: onChange }) @@ -165,7 +166,7 @@ const Checkbox = forwardRef, CheckboxProps>( extendObject( { ref: nodeRef, - style: extendObject(innerStyle, layoutStyle) + style: extendObject({}, innerStyle, layoutStyle) }, layoutProps, { diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx index 08a65b9b28..defda9083f 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx @@ -60,7 +60,7 @@ const _Form = forwardRef, FormProps>((fromProps: For const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef }) const innerProps = useInnerProps(props, extendObject({ - style: extendObject(innerStyle, layoutStyle), + style: extendObject({}, innerStyle, layoutStyle), ref: formRef }, layoutProps) , [ diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx index 8979ae34a0..e26d89558b 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx @@ -63,7 +63,7 @@ const Icon = forwardRef, IconProps>( const defaultStyle = { width: ~~size, height: ~~size } - const styleObj = extendObject(defaultStyle, style) + const styleObj = extendObject({}, defaultStyle, style) const { hasSelfPercent, @@ -83,7 +83,7 @@ const Icon = forwardRef, IconProps>( { ref: nodeRef, source: { uri }, - style: extendObject(normalStyle, layoutStyle, { tintColor: color }) + style: extendObject({}, normalStyle, layoutStyle, { tintColor: color }) }, layoutProps ), diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx index 907f960d8a..85d815a4f7 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx @@ -113,6 +113,7 @@ const Image = forwardRef, ImageProps>((props, re } const styleObj = extendObject( + {}, defaultStyle, style, { overflow: 'hidden' } @@ -339,6 +340,7 @@ const Image = forwardRef, ImageProps>((props, re { ref: nodeRef, style: extendObject( + {}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx index 2dc2770208..61c1c7bb32 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx @@ -396,7 +396,7 @@ const Input = forwardRef, FinalInputProps extendObject( { ref: nodeRef, - style: extendObject(normalStyle, layoutStyle) + style: extendObject({}, normalStyle, layoutStyle) }, layoutProps, { diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx index 586b77fc8a..4c4eb5879c 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx @@ -42,7 +42,7 @@ const Label = forwardRef, LabelProps>( flexDirection: 'row' } - const styleObj = extendObject(defaultStyle, style) + const styleObj = extendObject({}, defaultStyle, style) const { hasSelfPercent, @@ -79,7 +79,7 @@ const Label = forwardRef, LabelProps>( extendObject( { ref: nodeRef, - style: extendObject(innerStyle, layoutStyle) + style: extendObject({}, innerStyle, layoutStyle) }, layoutProps, { diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx index e962519b41..282bf1a394 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx @@ -138,6 +138,7 @@ const _PickerView = forwardRef, PickerViewProp extendObject({ ref: nodeRef, style: extendObject( + {}, normalStyle, layoutStyle, { @@ -155,6 +156,7 @@ const _PickerView = forwardRef, PickerViewProp const extraProps = {} const childProps = child?.props || {} const wrappedProps = extendObject( + {}, childProps, { columnData, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx index 1e852aa5e9..5ded44937e 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx @@ -67,7 +67,7 @@ const radioGroup = forwardRef< flexWrap: 'wrap' } - const styleObj = extendObject(defaultStyle, style) + const styleObj = extendObject({}, defaultStyle, style) const { hasSelfPercent, @@ -144,7 +144,7 @@ const radioGroup = forwardRef< extendObject( { ref: nodeRef, - style: extendObject(normalStyle, layoutStyle) + style: extendObject({}, normalStyle, layoutStyle) }, layoutProps ), diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx index f4cb9b8475..c1662f5cc8 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx @@ -90,12 +90,13 @@ const Radio = forwardRef, RadioProps>( const labelContext = useContext(LabelContext) const defaultStyle = extendObject( + {}, styles.wrapper, isChecked ? styles.wrapperChecked : {}, disabled ? styles.wrapperDisabled : {} ) - const styleObj = extendObject(styles.container, style) + const styleObj = extendObject({}, styles.container, style) const onChange = (evt: NativeSyntheticEvent) => { if (disabled || isChecked) return @@ -132,7 +133,7 @@ const Radio = forwardRef, RadioProps>( const nodeRef = useRef(null) useNodesRef(props, ref, nodeRef, { - style: extendObject(defaultStyle, normalStyle), + style: extendObject({}, defaultStyle, normalStyle), change: onChange }) @@ -152,7 +153,7 @@ const Radio = forwardRef, RadioProps>( extendObject( { ref: nodeRef, - style: extendObject(innerStyle, layoutStyle) + style: extendObject({}, innerStyle, layoutStyle) }, layoutProps, { diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx index ada5da957e..17f45a6e41 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx @@ -299,7 +299,7 @@ const _ScrollView = forwardRef, S const visibleLength = selectLength(e.nativeEvent.layoutMeasurement) const contentLength = selectLength(e.nativeEvent.contentSize) const offset = selectOffset(e.nativeEvent.contentOffset) - scrollOptions.current = extendObject(scrollOptions.current, { + extendObject(scrollOptions.current, { contentLength, offset, scrollLeft: position.scrollLeft, @@ -428,7 +428,7 @@ const _ScrollView = forwardRef, S const scrollAdditionalProps: ScrollAdditionalProps = extendObject( { - style: extendObject(innerStyle, layoutStyle), + style: extendObject({}, innerStyle, layoutStyle), pinchGestureEnabled: false, horizontal: scrollX && !scrollY, scrollEventThrottle: scrollEventThrottle, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx index 012d578e7b..026424c30c 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx @@ -122,7 +122,7 @@ const _Switch = forwardRef, _SwitchProps>((prop const innerProps = useInnerProps(props, extendObject({ ref: nodeRef, - style: extendObject(normalStyle, layoutStyle) + style: extendObject({}, normalStyle, layoutStyle) }, layoutProps, !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx index b006f88e5f..42b9d0a077 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx @@ -236,7 +236,7 @@ function backgroundPosition (imageProps: ImageProps, preImageInfo: PreImageInfo, } } - imageProps.style = extendObject(imageProps.style, style) + extendObject(imageProps.style, style) } // background-size 转换 @@ -289,7 +289,7 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima } // 样式合并 - imageProps.style = extendObject(imageProps.style, dimensions) + extendObject(imageProps.style, dimensions) } // background-image转换为source @@ -475,7 +475,7 @@ function parseLinearGradient (text: string): LinearInfo | undefined { return prev }, { colors: [], locations: [] }) - return extendObject(linearInfo, { + return extendObject({}, linearInfo, { direction: direction.trim() }) } @@ -685,17 +685,16 @@ const _View = forwardRef, _ViewProps>((viewProps, r const [isHover, setIsHover] = useState(false) // 默认样式 - const defaultStyle: ExtendedViewStyle = extendObject( - style.display === 'flex' - ? { - flexDirection: 'row', - flexBasis: 'auto', - flexShrink: 1, - flexWrap: 'nowrap' - } - : {}) + const defaultStyle: ExtendedViewStyle = style.display === 'flex' + ? { + flexDirection: 'row', + flexBasis: 'auto', + flexShrink: 1, + flexWrap: 'nowrap' + } + : {} - const styleObj: ExtendedViewStyle = extendObject(defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {}) + const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {}) const { normalStyle, @@ -770,7 +769,7 @@ const _View = forwardRef, _ViewProps>((viewProps, r layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef }) - const viewStyle = extendObject(innerStyle, layoutStyle) + const viewStyle = extendObject({}, innerStyle, layoutStyle) enableAnimation = enableAnimation || !!animation const enableAnimationRef = useRef(enableAnimation) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx index 91c389d13c..79038d756a 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx @@ -6,7 +6,7 @@ import { getCustomEvent } from './getInnerListeners' import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy' import { WebView } from 'react-native-webview' import useNodesRef, { HandlerRef } from './useNodesRef' -import { getCurrentPage } from './utils' +import { getCurrentPage, extendObject } from './utils' import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation } from 'react-native-webview/lib/WebViewTypes' import { RouteContext } from './context' @@ -163,17 +163,17 @@ const _WebView = forwardRef, WebViewProps>((pr const events = {} if (bindload) { - Object.assign(events, { + extendObject(events, { onLoad: _load }) } if (binderror) { - Object.assign(events, { + extendObject(events, { onError: _error }) } if (bindmessage) { - Object.assign(events, { + extendObject(events, { onMessage: _message }) } diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index 0d7904fb20..53a0eb65a8 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -32,7 +32,7 @@ const safeAreaInsetMap: Record = { function getSafeAreaInset (name: string) { const navigation = getFocusedNavigation() - const insets = extendObject(initialWindowMetrics?.insets || {}, navigation?.insets || {}) + const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets) return insets[safeAreaInsetMap[name]] } @@ -89,6 +89,7 @@ export const parseUrl = (cssUrl = '') => { export const getRestProps = (transferProps: any = {}, originProps: any = {}, deletePropsKey: any = []) => { return extendObject( + {}, transferProps, omit(originProps, deletePropsKey) ) @@ -512,8 +513,8 @@ export function wrapChildren (props: Record = {}, { hasVarDec, varC if (textStyle || textProps) { children = Children.map(children, (child) => { if (isText(child)) { - const style = extendObject(textStyle || {}, child.props.style) - return cloneElement(child, { ...textProps, style }) + const style = extendObject({}, textStyle, child.props.style) + return cloneElement(child, extendObject({}, textProps, { style })) } return child }) @@ -582,7 +583,7 @@ export function flatGesture (gestures: Array = []) { })) || [] } -export function extendObject (target: Record, ...sources: (Record | null | undefined)[]) { +export function extendObject (target: Record = {}, ...sources: (Record | null | undefined)[]) { return Object.assign(target, ...sources) } From d1276bb3650b7d0a0fce125543339199c0e6fe42 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Mon, 9 Dec 2024 17:34:24 +0800 Subject: [PATCH 34/34] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9extendObject?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../webpack-plugin/lib/runtime/components/react/utils.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index ee0d7e39b1..ecd0c80145 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -594,9 +594,7 @@ export function flatGesture (gestures: Array = []) { })) || [] } -export function extendObject (target: Record = {}, ...sources: (Record | null | undefined)[]) { - return Object.assign(target, ...sources) -} +export const extendObject = Object.assign export function getCurrentPage (pageId: number | null) { if (!global.getCurrentPages) return