From 1482211fc02ac95142ba10630db4501801b294b6 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 18:33:47 +0800 Subject: [PATCH 01/12] =?UTF-8?q?feat:=20=E6=8A=BD=E7=A6=BBlayout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/common.tsx | 31 +++++++++++ .../components/react/getInnerListeners.ts | 10 +++- .../lib/runtime/components/react/mpx-form.tsx | 51 ++++++++++++++----- .../lib/runtime/components/react/utils.ts | 42 ++++++++++++++- 4 files changed, 120 insertions(+), 14 deletions(-) create mode 100644 packages/webpack-plugin/lib/runtime/components/react/common.tsx diff --git a/packages/webpack-plugin/lib/runtime/components/react/common.tsx b/packages/webpack-plugin/lib/runtime/components/react/common.tsx new file mode 100644 index 0000000000..6d3cd0fce7 --- /dev/null +++ b/packages/webpack-plugin/lib/runtime/components/react/common.tsx @@ -0,0 +1,31 @@ +import { TextStyle } from 'react-native' +import { Children, cloneElement } from 'react' +import { VarContext } from './context' +import { isText } from './utils' + +export interface WrapChildrenConfig { + hasVarDec: boolean + varContext?: Record +} + +interface TextConfig { + textStyle?: TextStyle + textProps?: Record +} + +export function wrapChildren (props: Record = {}, { hasVarDec, varContext }: WrapChildrenConfig, { textStyle, textProps } : TextConfig = {}) { + let { children } = props + if (textStyle || textProps) { + children = Children.map(children, (child) => { + if (isText(child)) { + const style = { ...textStyle, ...child.props.style } + return cloneElement(child, { ...textProps, style }) + } + return child + }) + } + if (hasVarDec && varContext) { + children = {children} + } + return children +} \ No newline at end of file diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index dfad78d653..afe302dc25 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -107,7 +107,7 @@ export const getCustomEvent = ( const useInnerProps = ( props: Props = {}, additionalProps: AdditionalProps = {}, - removeProps: RemoveProps = [], + useRemoveProps: RemoveProps = [], rawConfig?: UseInnerPropsConfig ) => { const ref = useRef({ @@ -130,6 +130,14 @@ const useInnerProps = ( const propsRef = useRef>({}) const eventConfig: { [key: string]: string[] } = {} const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false } + const removeProps = [ + 'enable-var', + 'external-var-context', + 'parent-font-size', + 'parent-width', + 'parent-height', + ...useRemoveProps + ] propsRef.current = { ...props, ...additionalProps } 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 397dfd7606..fb239d5ce5 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx @@ -10,10 +10,14 @@ 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 } from './utils' +import { wrapChildren } from './common' interface FormProps { style?: Record; children: ReactNode; + 'enable-offset'?: boolean; + 'enable-var'?: boolean + 'external-var-context'?: Record bindsubmit?: (evt: { detail: { value: any; @@ -22,18 +26,29 @@ interface FormProps { bindreset?: () => void; } -const _Form = forwardRef, FormProps>((props: FormProps, ref): JSX.Element => { - const { children, style } = props - const layoutRef = useRef({}) +const _Form = forwardRef, FormProps>((fromProps: FormProps, ref): JSX.Element => { + const { textProps, innerProps: props = {} } = splitProps(fromProps) const formValuesMap = useRef(new Map()).current + const { + style, + 'enable-var': enableVar, + 'external-var-context': externalVarContext + } = props + + const { + hasSelfPercent, + normalStyle, + hasVarDec, + varContextRef, + setWidth, + setHeight + } = useTransformStyle(style, { enableVar, externalVarContext }) + + const { textStyle, innerStyle } = splitStyle(normalStyle) const { nodeRef: formRef } = useNodesRef(props, ref) - const onLayout = (e: LayoutChangeEvent) => { - formRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => { - layoutRef.current = { x, y, width, height, offsetLeft, offsetTop } - }) - } + const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef }) const submit = () => { const { bindsubmit } = props @@ -63,9 +78,9 @@ const _Form = forwardRef, FormProps>((props: FormPro } const innerProps = useInnerProps(props, { + style: { ...innerStyle, ...layoutStyle }, ref: formRef, - style, - onLayout + ...layoutProps }, [ 'children', 'style', @@ -78,7 +93,19 @@ const _Form = forwardRef, FormProps>((props: FormPro {...innerProps} > - {children} + { + wrapChildren( + props, + { + hasVarDec, + varContext: varContextRef.current + }, + { + textStyle, + textProps + } + ) + } ) diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.ts b/packages/webpack-plugin/lib/runtime/components/react/utils.ts index b7e49845df..e686c5f2b7 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.ts @@ -1,5 +1,5 @@ import { useEffect, useRef, ReactNode, ReactElement, FunctionComponent, isValidElement, useContext, useState } from 'react' -import { Dimensions, StyleSheet } from 'react-native' +import { Dimensions, StyleSheet, LayoutChangeEvent } from 'react-native' import { isObject, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils' import { VarContext } from './context' import { ExpressionParser, parseFunc, ReplaceSource } from './parser' @@ -10,6 +10,9 @@ export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/ export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/ export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/ export const DEFAULT_FONT_SIZE = 16 +export const DEFAULT_UNLAY_STYLE = { + opacity: 0 +} export const throwReactWarning = (message: string) => { setTimeout(() => { @@ -439,3 +442,40 @@ export function splitProps> (props: T) { } }) } + +interface layoutConfig { + props: Record; + hasSelfPercent: boolean; + setWidth:any + setHeight: any + onLayout?: any + nodeRef: any +} +export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }:layoutConfig) => { + const layoutRef = useRef({}) + const hasLayoutRef = useRef(false) + const layoutStyle: Record = hasLayoutRef.current ? {} : DEFAULT_UNLAY_STYLE + const layoutProps: Record = {} + if (hasSelfPercent || onLayout) { + layoutProps.onLayout = (e: LayoutChangeEvent) => { + hasLayoutRef.current = true + if (hasSelfPercent) { + const { width, height } = e?.nativeEvent?.layout || {} + setWidth(width || 0) + setHeight(height || 0) + } + if (props['enable-offset']) { + nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => { + layoutRef.current = { x, y, width, height, offsetLeft, offsetTop } + }) + } + onLayout && onLayout(e) + props.onLayout && props.onLayout(e) + } + } + return { + layoutRef, + layoutStyle, + layoutProps + } +} From a445cac3b0081b767e447143f6f2876be4919097 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 19:07:29 +0800 Subject: [PATCH 02/12] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F=E4=B8=A2?= =?UTF-8?q?=E5=A4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../webpack-plugin/lib/runtime/components/react/mpx-form.tsx | 1 - 1 file changed, 1 deletion(-) 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 fb239d5ce5..9ec9a7da6c 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx @@ -83,7 +83,6 @@ const _Form = forwardRef, FormProps>((fromProps: For ...layoutProps }, [ 'children', - 'style', 'bindsubmit', 'bindreset' ], { layoutRef }) From 8601145cd9468e5ed358bc739d3a8ae2a8f0582b Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 19:09:26 +0800 Subject: [PATCH 03/12] fix: lint --- packages/webpack-plugin/lib/runtime/components/react/common.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/common.tsx b/packages/webpack-plugin/lib/runtime/components/react/common.tsx index 6d3cd0fce7..81b69133c1 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/common.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/common.tsx @@ -28,4 +28,4 @@ export function wrapChildren (props: Record = {}, { hasVarDec, varC children = {children} } return children -} \ No newline at end of file +} From 6a605d5e95ddb179bdbb3394e662d2027080d481 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 19:11:24 +0800 Subject: [PATCH 04/12] fix: name --- .../lib/runtime/components/react/getInnerListeners.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index afe302dc25..8a9c61604c 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -107,7 +107,7 @@ export const getCustomEvent = ( const useInnerProps = ( props: Props = {}, additionalProps: AdditionalProps = {}, - useRemoveProps: RemoveProps = [], + userRemoveProps: RemoveProps = [], rawConfig?: UseInnerPropsConfig ) => { const ref = useRef({ @@ -136,7 +136,7 @@ const useInnerProps = ( 'parent-font-size', 'parent-width', 'parent-height', - ...useRemoveProps + ...userRemoveProps ] propsRef.current = { ...props, ...additionalProps } From 8b307f896f3467ab7d0ca1e1f5db8ea2b2c19e25 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 19:12:30 +0800 Subject: [PATCH 05/12] chore: remove useless props --- .../lib/runtime/components/react/getInnerListeners.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index 8a9c61604c..d5f4149816 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -131,6 +131,7 @@ const useInnerProps = ( const eventConfig: { [key: string]: string[] } = {} const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false } const removeProps = [ + 'enable-offset', 'enable-var', 'external-var-context', 'parent-font-size', From f99383285b62479a86d65f6745d28aa13b1e879f Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 19:15:59 +0800 Subject: [PATCH 06/12] =?UTF-8?q?feat:=20calc=20=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-form.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 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 9ec9a7da6c..4d7cc12ce7 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx @@ -17,7 +17,10 @@ interface FormProps { children: ReactNode; 'enable-offset'?: boolean; 'enable-var'?: boolean - 'external-var-context'?: Record + 'external-var-context'?: Record; + 'parent-font-size'?: number; + 'parent-width'?: number; + 'parent-height'?: number; bindsubmit?: (evt: { detail: { value: any; @@ -32,7 +35,10 @@ const _Form = forwardRef, FormProps>((fromProps: For const { style, 'enable-var': enableVar, - 'external-var-context': externalVarContext + 'external-var-context': externalVarContext, + 'parent-font-size': parentFontSize, + 'parent-width': parentWidth, + 'parent-height': parentHeight } = props const { @@ -42,7 +48,7 @@ const _Form = forwardRef, FormProps>((fromProps: For varContextRef, setWidth, setHeight - } = useTransformStyle(style, { enableVar, externalVarContext }) + } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) const { textStyle, innerStyle } = splitStyle(normalStyle) From a598ee691404b3e6d0b32936fc756f059a120b94 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 19:16:13 +0800 Subject: [PATCH 07/12] =?UTF-8?q?feat:=20calc=20=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../webpack-plugin/lib/runtime/components/react/mpx-form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 4d7cc12ce7..bb62b53061 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx @@ -5,7 +5,7 @@ * ✔ bindreset */ -import { View, LayoutChangeEvent } from 'react-native' +import { View } from 'react-native' import { JSX, useRef, forwardRef, ReactNode } from 'react' import useNodesRef, { HandlerRef } from './useNodesRef' import useInnerProps, { getCustomEvent } from './getInnerListeners' From 68ef9807a6b5a02ed4e7194168441fb8ef984cfb Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 19:22:29 +0800 Subject: [PATCH 08/12] =?UTF-8?q?chore:=20=E8=A1=A5=E5=85=85ts=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/utils.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.ts b/packages/webpack-plugin/lib/runtime/components/react/utils.ts index e686c5f2b7..f1ccb0c949 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef, ReactNode, ReactElement, FunctionComponent, isValidElement, useContext, useState } from 'react' +import { useEffect, useRef, ReactNode, ReactElement, FunctionComponent, isValidElement, useContext, useState, Dispatch, SetStateAction } from 'react' import { Dimensions, StyleSheet, LayoutChangeEvent } from 'react-native' import { isObject, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils' import { VarContext } from './context' @@ -444,12 +444,12 @@ export function splitProps> (props: T) { } interface layoutConfig { - props: Record; - hasSelfPercent: boolean; - setWidth:any - setHeight: any - onLayout?: any - nodeRef: any + props: Record + hasSelfPercent: boolean + setWidth: Dispatch> + setHeight: Dispatch> + onLayout?: (event?: LayoutChangeEvent) => void + nodeRef: React.RefObject } export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }:layoutConfig) => { const layoutRef = useRef({}) From 5afb8666c632100b696693eb89d9d5e1b4b263c1 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 19:47:41 +0800 Subject: [PATCH 09/12] fix: ts type --- packages/webpack-plugin/lib/runtime/components/react/utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.ts b/packages/webpack-plugin/lib/runtime/components/react/utils.ts index f1ccb0c949..337cd751c7 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.ts @@ -443,7 +443,7 @@ export function splitProps> (props: T) { }) } -interface layoutConfig { +interface LayoutConfig { props: Record hasSelfPercent: boolean setWidth: Dispatch> @@ -451,7 +451,7 @@ interface layoutConfig { onLayout?: (event?: LayoutChangeEvent) => void nodeRef: React.RefObject } -export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }:layoutConfig) => { +export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }:LayoutConfig) => { const layoutRef = useRef({}) const hasLayoutRef = useRef(false) const layoutStyle: Record = hasLayoutRef.current ? {} : DEFAULT_UNLAY_STYLE From 28de934d46443073ffef749bba290c83eda37e73 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 19:54:27 +0800 Subject: [PATCH 10/12] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E9=87=8D?= =?UTF-8?q?=E5=A4=8D=E5=88=A0=E9=99=A4key?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/getInnerListeners.ts | 1 + .../lib/runtime/components/react/mpx-text.tsx | 7 +------ .../lib/runtime/components/react/mpx-view.tsx | 9 +-------- 3 files changed, 3 insertions(+), 14 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index d5f4149816..28cd08df35 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -131,6 +131,7 @@ const useInnerProps = ( const eventConfig: { [key: string]: string[] } = {} const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false } const removeProps = [ + 'enable-background', 'enable-offset', 'enable-var', 'external-var-context', 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 dba63dc21f..cc8126fa58 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx @@ -70,12 +70,7 @@ const _Text = forwardRef, _TextProps>((props, ref): 'style', 'children', 'selectable', - 'user-select', - 'enable-var', - 'external-var-context', - 'parent-font-size', - 'parent-width', - 'parent-height' + 'user-select' ], { layoutRef }) 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 1d7a7eab54..53ea57c202 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx @@ -550,14 +550,7 @@ const _View = forwardRef, _ViewProps>((props, ref): 'hover-start-time', 'hover-stay-time', 'hover-style', - 'hover-class', - 'enable-offset', - 'enable-background-image', - 'enable-var', - 'external-var-context', - 'parent-font-size', - 'parent-width', - 'parent-height' + 'hover-class' ], { layoutRef }) From 3d11c3c581ce9a780380c6b6296bb7680532b617 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 19:57:13 +0800 Subject: [PATCH 11/12] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96style=E5=A4=84?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../webpack-plugin/lib/runtime/components/react/mpx-form.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 bb62b53061..a902b4a21a 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx @@ -84,10 +84,10 @@ const _Form = forwardRef, FormProps>((fromProps: For } const innerProps = useInnerProps(props, { - style: { ...innerStyle, ...layoutStyle }, ref: formRef, ...layoutProps }, [ + 'style', 'children', 'bindsubmit', 'bindreset' @@ -96,6 +96,7 @@ const _Form = forwardRef, FormProps>((fromProps: For return ( { From 9a121b45968ff1288ce911f35721f7fd431f1b72 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 17 Oct 2024 21:10:01 +0800 Subject: [PATCH 12/12] =?UTF-8?q?chore:=20cr=20=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/common.tsx | 31 ----------------- .../components/react/getInnerListeners.ts | 1 + .../lib/runtime/components/react/mpx-form.tsx | 11 ++----- .../lib/runtime/components/react/mpx-text.tsx | 9 ++--- .../lib/runtime/components/react/mpx-view.tsx | 4 +-- .../components/react/{utils.ts => utils.tsx} | 33 ++++++++++++++++--- 6 files changed, 37 insertions(+), 52 deletions(-) delete mode 100644 packages/webpack-plugin/lib/runtime/components/react/common.tsx rename packages/webpack-plugin/lib/runtime/components/react/{utils.ts => utils.tsx} (93%) diff --git a/packages/webpack-plugin/lib/runtime/components/react/common.tsx b/packages/webpack-plugin/lib/runtime/components/react/common.tsx deleted file mode 100644 index 81b69133c1..0000000000 --- a/packages/webpack-plugin/lib/runtime/components/react/common.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { TextStyle } from 'react-native' -import { Children, cloneElement } from 'react' -import { VarContext } from './context' -import { isText } from './utils' - -export interface WrapChildrenConfig { - hasVarDec: boolean - varContext?: Record -} - -interface TextConfig { - textStyle?: TextStyle - textProps?: Record -} - -export function wrapChildren (props: Record = {}, { hasVarDec, varContext }: WrapChildrenConfig, { textStyle, textProps } : TextConfig = {}) { - let { children } = props - if (textStyle || textProps) { - children = Children.map(children, (child) => { - if (isText(child)) { - const style = { ...textStyle, ...child.props.style } - return cloneElement(child, { ...textProps, style }) - } - return child - }) - } - if (hasVarDec && varContext) { - children = {children} - } - return children -} diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts index 28cd08df35..8f2f148ee1 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts @@ -131,6 +131,7 @@ const useInnerProps = ( const eventConfig: { [key: string]: string[] } = {} const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false } const removeProps = [ + 'children', 'enable-background', 'enable-offset', 'enable-var', 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 a902b4a21a..85b7ebb4f0 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx @@ -10,8 +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 } from './utils' -import { wrapChildren } from './common' +import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils' interface FormProps { style?: Record; children: ReactNode; @@ -84,11 +83,10 @@ const _Form = forwardRef, FormProps>((fromProps: For } const innerProps = useInnerProps(props, { + style: { ...innerStyle, ...layoutStyle }, ref: formRef, ...layoutProps }, [ - 'style', - 'children', 'bindsubmit', 'bindreset' ], { layoutRef }) @@ -96,7 +94,6 @@ const _Form = forwardRef, FormProps>((fromProps: For return ( { @@ -104,9 +101,7 @@ const _Form = forwardRef, FormProps>((fromProps: For props, { hasVarDec, - varContext: varContextRef.current - }, - { + varContext: varContextRef.current, textStyle, textProps } 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 cc8126fa58..6f4188fa53 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx @@ -65,11 +65,10 @@ const _Text = forwardRef, _TextProps>((props, ref): const { nodeRef } = useNodesRef(props, ref) const innerProps = useInnerProps(props, { - ref: nodeRef + ref: nodeRef, + style: normalStyle, + selectable: !!selectable || !!userSelect }, [ - 'style', - 'children', - 'selectable', 'user-select' ], { layoutRef @@ -77,8 +76,6 @@ const _Text = forwardRef, _TextProps>((props, ref): return ( { 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 53ea57c202..4018c39b9d 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx @@ -539,14 +539,13 @@ const _View = forwardRef, _ViewProps>((props, ref): const innerProps = useInnerProps(props, { ref: nodeRef, + style: innerStyle, ...needLayout ? { onLayout } : null, ...(hoverStyle && { bindtouchstart: onTouchStart, bindtouchend: onTouchEnd }) }, [ - 'style', - 'children', 'hover-start-time', 'hover-stay-time', 'hover-style', @@ -558,7 +557,6 @@ const _View = forwardRef, _ViewProps>((props, ref): return ( { wrapChildren( diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.ts b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx similarity index 93% rename from packages/webpack-plugin/lib/runtime/components/react/utils.ts rename to packages/webpack-plugin/lib/runtime/components/react/utils.tsx index 337cd751c7..dda6623705 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -1,5 +1,5 @@ -import { useEffect, useRef, ReactNode, ReactElement, FunctionComponent, isValidElement, useContext, useState, Dispatch, SetStateAction } from 'react' -import { Dimensions, StyleSheet, LayoutChangeEvent } from 'react-native' +import { useEffect, useRef, ReactNode, ReactElement, FunctionComponent, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react' +import { Dimensions, StyleSheet, LayoutChangeEvent, TextStyle } from 'react-native' import { isObject, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils' import { VarContext } from './context' import { ExpressionParser, parseFunc, ReplaceSource } from './parser' @@ -456,7 +456,8 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout const hasLayoutRef = useRef(false) const layoutStyle: Record = hasLayoutRef.current ? {} : DEFAULT_UNLAY_STYLE const layoutProps: Record = {} - if (hasSelfPercent || onLayout) { + const enableOffset = props['enable-offset'] + if (hasSelfPercent || onLayout || enableOffset) { layoutProps.onLayout = (e: LayoutChangeEvent) => { hasLayoutRef.current = true if (hasSelfPercent) { @@ -464,7 +465,7 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout setWidth(width || 0) setHeight(height || 0) } - if (props['enable-offset']) { + if (enableOffset) { nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => { layoutRef.current = { x, y, width, height, offsetLeft, offsetTop } }) @@ -479,3 +480,27 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout layoutProps } } + +export interface WrapChildrenConfig { + hasVarDec: boolean + varContext?: Record + textStyle?: TextStyle + textProps?: Record +} + +export function wrapChildren (props: Record = {}, { hasVarDec, varContext, textStyle, textProps }: WrapChildrenConfig) { + let { children } = props + if (textStyle || textProps) { + children = Children.map(children, (child) => { + if (isText(child)) { + const style = { ...textStyle, ...child.props.style } + return cloneElement(child, { ...textProps, style }) + } + return child + }) + } + if (hasVarDec && varContext) { + children = {children} + } + return children +}