From 81b2d40df3de48dc1aded49f889d4d0d6842a9a6 Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Mon, 20 May 2024 10:31:46 +0800 Subject: [PATCH 01/14] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=20button=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=BB=98=E8=AE=A4=E5=AE=BD=E9=AB=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-image/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 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 347c0d5f9..e2db29e95 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 @@ -56,8 +56,8 @@ export interface ImageProps { binderror?: (evt: NativeSyntheticEvent | unknown) => void } -const DEFAULT_IMAGE_WIDTH = 240 -const DEFAULT_IMAGE_HEIGHT = 320 +const DEFAULT_IMAGE_WIDTH = 320 +const DEFAULT_IMAGE_HEIGHT = 240 const REMOTE_SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i const styls = StyleSheet.create({ From 0acb5b5613d8a6f60a725ba761c94a5d5e2a7a24 Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Mon, 20 May 2024 10:50:47 +0800 Subject: [PATCH 02/14] =?UTF-8?q?feat:=20=E7=BB=9F=E4=B8=80=20hover=20?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-button.tsx | 87 +++++++++---------- 1 file changed, 42 insertions(+), 45 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 029a0ddaf..0e43feb03 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -163,13 +163,13 @@ const Button = forwardRef((props, ref): React.JSX.Element => } = props const refs = useRef<{ - preseeInTimer: ReturnType | undefined - preseeOutTimer: ReturnType | undefined - isPressEnd: boolean + touchStartTimer: ReturnType | undefined + touchEndTimer: ReturnType | undefined + isTouchEnd: boolean }>({ - preseeInTimer: undefined, - preseeOutTimer: undefined, - isPressEnd: false, + touchStartTimer: undefined, + touchEndTimer: undefined, + isTouchEnd: false, }) const [isHover, setIsHover] = useState(false) @@ -218,71 +218,68 @@ const Button = forwardRef((props, ref): React.JSX.Element => }, [type, plain, applyHoverEffect, loading, disabled]) const stopHover = useCallback(() => { - refs.current.preseeOutTimer = setTimeout(() => { + refs.current.touchEndTimer = setTimeout(() => { setIsHover(false) - clearTimeout(refs.current.preseeOutTimer) + clearTimeout(refs.current.touchEndTimer) }, hoverStayTime) }, [hoverStayTime]) - const onPressIn = () => { - refs.current.isPressEnd = false - refs.current.preseeInTimer = setTimeout(() => { + const onTouchStart = () => { + if (disabled) return + refs.current.isTouchEnd = false + refs.current.touchStartTimer = setTimeout(() => { setIsHover(true) - clearTimeout(refs.current.preseeInTimer) + clearTimeout(refs.current.touchStartTimer) }, hoverStartTime) } - const onPressOut = () => { - refs.current.isPressEnd = true + const onTouchEnd = () => { + if (disabled) return + refs.current.isTouchEnd = true stopHover() } - const onPress = (evt: GestureResponderEvent) => { + const onTap = (evt: GestureResponderEvent) => { !disabled && bindtap(getCustomEvent('tap', evt, {}, props)) } - const catchPress = (evt: GestureResponderEvent) => { + const catchTap = (evt: GestureResponderEvent) => { !disabled && catchtap(getCustomEvent('tap', evt, {}, props)) } useEffect(() => { - isHover && refs.current.isPressEnd && stopHover() + isHover && refs.current.isTouchEnd && stopHover() }, [isHover, stopHover]) const innerTouchable = useInnerTouchable({ ...props, - bindtap: () => {}, - catchtap: catchPress, + bindtouchstart: onTouchStart, + bindtouchend: onTouchEnd, + bindtap: onTap, + catchtap: catchTap, }) return ( - - - {loading && } - {['string', 'number'].includes(typeof children) ? ( - - {children} - - ) : ( - children - )} - - + ref={ref} + style={[ + styles.button, + isMiniSize && styles.buttonMini, + presetViewStyle, + style, + applyHoverEffect && hoverStyle, + ]}> + {loading && } + {['string', 'number'].includes(typeof children) ? ( + + {children} + + ) : ( + children + )} + ) }) From c1890c16b13b3adfa0ccf4b3a69157ae999ab17f Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Wed, 22 May 2024 20:09:24 +0800 Subject: [PATCH 03/14] =?UTF-8?q?feat:=20=E6=95=B4=E5=90=88=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E3=80=81=E7=A7=BB=E9=99=A4=20hover-class=20=E5=B9=B6?= =?UTF-8?q?=E8=BD=AC=E4=B8=BA=20hoverStyle=20=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-button.tsx | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 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 2bb33f154..690503366 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -6,7 +6,6 @@ * ✔ loading * ✘ form-type * ✘ open-type - * - hover-class Only support 'none' * ✔ hover-style: Convert hoverClass to hoverStyle. * ✘ hover-stop-propagation * ✔ hover-start-time @@ -56,7 +55,6 @@ export interface ButtonProps { plain?: boolean disabled?: boolean loading?: boolean - 'hover-class'?: 'none' 'hover-style'?: StyleProp 'hover-start-time'?: number 'hover-stay-time'?: number @@ -88,8 +86,6 @@ const styles = StyleSheet.create({ // flexDirection: 'row', css 默认 block justifyContent: 'center', alignItems: 'center', - // paddingHorizontal: 14, - // marginVertical: 14, height: 46, borderRadius: 5, backgroundColor: '#F8F8F8', @@ -154,8 +150,7 @@ const Button = forwardRef((props, ref): React.JSX.Element => plain = false, disabled = false, loading = false, - 'hover-class': hoverClass, - 'hover-style': hoverStyle = {}, + 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, style = [], @@ -178,12 +173,9 @@ const Button = forwardRef((props, ref): React.JSX.Element => const isMiniSize = size === 'mini' - const applyHoverEffect = isHover && hoverClass !== 'none' + const applyHoverEffect = isHover && !!hoverStyle - // mpx 处理后 style 是数组，这里先打平一下 - const styleObj = Object.assign({}, ...style) - - const { viewStyle: presetViewStyle, textStyle: presetTextStyle } = useMemo<{ + const { viewStyle, textStyle } = useMemo<{ viewStyle: ViewStyle textStyle: TextStyle }>(() => { @@ -204,8 +196,8 @@ const Button = forwardRef((props, ref): React.JSX.Element => type === 'default' ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})` : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})` - // 从 view 中取 text 可继承的样式属性 - const inheritTextStyle = extractTextStyle(applyHoverEffect ? [styleObj, hoverStyle] : styleObj) + const inheritTextStyle = extractTextStyle(style) + const inheritTextHoverStyle = extractTextStyle(applyHoverEffect ? hoverStyle: []) return { viewStyle: { borderWidth: 1, @@ -215,10 +207,11 @@ const Button = forwardRef((props, ref): React.JSX.Element => }, textStyle: { color: plain ? plainTextColor : normalTextColor, - ...inheritTextStyle + ...inheritTextStyle, + ...inheritTextHoverStyle } } - }, [type, plain, applyHoverEffect, loading, disabled, styleObj]) + }, [type, plain, applyHoverEffect, loading, disabled, style]) const stopHover = useCallback(() => { refs.current.touchEndTimer = setTimeout(() => { @@ -270,13 +263,13 @@ const Button = forwardRef((props, ref): React.JSX.Element => style={[ styles.button, isMiniSize && styles.buttonMini, - presetViewStyle, + viewStyle, style, applyHoverEffect && hoverStyle, ]}> {loading && } {['string', 'number'].includes(typeof children) ? ( - + {children} ) : ( From dfe1cf66dfee6f9243127ce400e92f3c15082e89 Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Wed, 22 May 2024 20:12:17 +0800 Subject: [PATCH 04/14] =?UTF-8?q?feat:=20=E6=A0=87=E5=87=86=E5=8C=96?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-button.tsx | 2 +- .../lib/runtime/components/react/mpx-image/index.tsx | 4 ++-- .../webpack-plugin/lib/runtime/components/react/mpx-input.tsx | 2 +- .../lib/runtime/components/react/mpx-textarea.tsx | 2 +- 4 files changed, 5 insertions(+), 5 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 690503366..bb1a4eb5d 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -279,6 +279,6 @@ const Button = forwardRef((props, ref): React.JSX.Element => ) }) -Button.displayName = '_Button' +Button.displayName = 'mpx-button' export default Button 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 e2db29e95..626244438 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 @@ -58,7 +58,7 @@ export interface ImageProps { const DEFAULT_IMAGE_WIDTH = 320 const DEFAULT_IMAGE_HEIGHT = 240 -const REMOTE_SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i +// const REMOTE_SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i const styls = StyleSheet.create({ suspense: { @@ -300,6 +300,6 @@ const Image = forwardRef((props, ref): React.JSX.Element => ) }) -Image.displayName = '_Image' +Image.displayName = 'mpx-image' export default Image 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 f9599c879..55b3b21ba 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx @@ -378,6 +378,6 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX ) }) -Input.displayName = '_Input' +Input.displayName = 'mpx-input' export default Input diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx index c6ef300d8..15dbdbfc9 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx @@ -21,6 +21,6 @@ const Textarea = forwardRef((props, ref): React.JSX.Ele return Keyboard.dismiss()} {...restProps} ref={ref} /> }) -Textarea.displayName = '_Textarea' +Textarea.displayName = 'mpx-textarea' export default Textarea From e4ed051d553512e9bbad56f403094bed4c229b2f Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Wed, 22 May 2024 20:44:35 +0800 Subject: [PATCH 05/14] =?UTF-8?q?feat:=20=E7=BB=9F=E4=B8=80=20hover=20?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-button.tsx | 70 ++++++++++--------- 1 file changed, 36 insertions(+), 34 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 bb1a4eb5d..615b28e30 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -33,10 +33,8 @@ * ✘ bindagreeprivacyauthorization * ✔ bindtap */ -import React, { useEffect, useMemo, useRef, useState, ReactNode, useCallback, forwardRef } from 'react' +import React, { useEffect, useMemo, useRef, useState, ReactNode, forwardRef, SyntheticEvent } from 'react' import { - TouchableWithoutFeedback, - GestureResponderEvent, View, Text, StyleSheet, @@ -47,7 +45,7 @@ import { Easing, } from 'react-native' import { extractTextStyle } from './utils' -import useInnerTouchable, { getCustomEvent } from './getInnerListeners' +import useInnerProps, { getCustomEvent } from './getInnerListeners' export interface ButtonProps { size?: string @@ -60,8 +58,10 @@ export interface ButtonProps { 'hover-stay-time'?: number style?: StyleProp children: ReactNode - bindtap?: (evt: GestureResponderEvent | unknown) => void - catchtap?: (evt: GestureResponderEvent | unknown) => void + bindtap?: (evt: SyntheticEvent | unknown) => void + catchtap?: (evt: SyntheticEvent | unknown) => void + bindtouchstart?: (evt: SyntheticEvent | unknown) => void + bindtouchend?: (evt: SyntheticEvent | unknown) => void } export type Type = 'default' | 'primary' | 'warn' @@ -155,18 +155,18 @@ const Button = forwardRef((props, ref): React.JSX.Element => 'hover-stay-time': hoverStayTime = 70, style = [], children, - bindtap = () => {}, - catchtap = () => {}, + bindtap, + catchtap, + bindtouchstart, + bindtouchend, } = props const refs = useRef<{ - touchStartTimer: ReturnType | undefined - touchEndTimer: ReturnType | undefined - isTouchEnd: boolean + hoverStartTimer: ReturnType | undefined + hoverStayTimer: ReturnType | undefined }>({ - touchStartTimer: undefined, - touchEndTimer: undefined, - isTouchEnd: false, + hoverStartTimer: undefined, + hoverStayTimer: undefined, }) const [isHover, setIsHover] = useState(false) @@ -213,41 +213,43 @@ const Button = forwardRef((props, ref): React.JSX.Element => } }, [type, plain, applyHoverEffect, loading, disabled, style]) - const stopHover = useCallback(() => { - refs.current.touchEndTimer = setTimeout(() => { + const setStayTimer = () => { + clearTimeout(refs.current.hoverStayTimer) + refs.current.hoverStayTimer = setTimeout(() => { setIsHover(false) - clearTimeout(refs.current.touchEndTimer) + clearTimeout(refs.current.hoverStayTimer) }, hoverStayTime) - }, [hoverStayTime]) + } - const onTouchStart = () => { - if (disabled) return - refs.current.isTouchEnd = false - refs.current.touchStartTimer = setTimeout(() => { + const setStartTimer = () => { + clearTimeout(refs.current.hoverStartTimer) + refs.current.hoverStartTimer = setTimeout(() => { setIsHover(true) - clearTimeout(refs.current.touchStartTimer) + clearTimeout(refs.current.hoverStartTimer) }, hoverStartTime) } - const onTouchEnd = () => { + const onTouchStart = (evt: SyntheticEvent) => { + bindtouchend && bindtouchend(evt) if (disabled) return - refs.current.isTouchEnd = true - stopHover() + setStartTimer() } - const onTap = (evt: GestureResponderEvent) => { - !disabled && bindtap(getCustomEvent('tap', evt, {}, props)) + const onTouchEnd = (evt: SyntheticEvent) => { + bindtouchend && bindtouchend(evt) + if (disabled) return + setStayTimer() } - const catchTap = (evt: GestureResponderEvent) => { - !disabled && catchtap(getCustomEvent('tap', evt, {}, props)) + const onTap = (evt: SyntheticEvent) => { + !disabled && bindtap && bindtap(getCustomEvent('tap', evt, {}, props)) } - useEffect(() => { - isHover && refs.current.isTouchEnd && stopHover() - }, [isHover, stopHover]) + const catchTap = (evt: SyntheticEvent) => { + !disabled && catchtap && catchtap(getCustomEvent('tap', evt, {}, props)) + } - const innerTouchable = useInnerTouchable({ + const innerTouchable = useInnerProps({ ...props, bindtouchstart: onTouchStart, bindtouchend: onTouchEnd, From b9476cd9fdea832814873f7fb9a24b00c6690c4e Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Wed, 22 May 2024 21:36:03 +0800 Subject: [PATCH 06/14] =?UTF-8?q?feat:=20useNodeRef=20=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-button.tsx | 5 +++- .../components/react/mpx-image/index.tsx | 7 +++-- .../runtime/components/react/mpx-input.tsx | 28 +++++-------------- 3 files changed, 16 insertions(+), 24 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 615b28e30..a23d1ab72 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -46,6 +46,7 @@ import { } from 'react-native' import { extractTextStyle } from './utils' import useInnerProps, { getCustomEvent } from './getInnerListeners' +import useNodesRef from '../../useNodesRef' export interface ButtonProps { size?: string @@ -161,6 +162,8 @@ const Button = forwardRef((props, ref): React.JSX.Element => bindtouchend, } = props + const { nodeRef } = useNodesRef(props, ref) + const refs = useRef<{ hoverStartTimer: ReturnType | undefined hoverStayTimer: ReturnType | undefined @@ -261,7 +264,7 @@ const Button = forwardRef((props, ref): React.JSX.Element => ((props, ref): React.JSX.Element => binderror, ...restProps } = omit(props, ['source', 'resizeeMode']) + const innerTouchable = useInnerTouchable(restProps) + const { nodeRef } = useNodesRef(props, ref) const { width = DEFAULT_IMAGE_WIDTH, height = DEFAULT_IMAGE_HEIGHT } = StyleSheet.flatten(style) @@ -278,7 +281,8 @@ const Image = forwardRef((props, ref): React.JSX.Element => ]} onLayout={onViewLayout}> ((props, ref): React.JSX.Element => ...(isCropMode && cropModeStyle), }, ]} - {...innerTouchable} /> ) 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 55b3b21ba..be22db4c4 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx @@ -57,6 +57,7 @@ import { } from 'react-native' import { parseInlineStyle, useUpdateEffect } from './utils' import useInnerTouchable, { getCustomEvent } from './getInnerListeners' +import useNodesRef from '../../useNodesRef' type InputStyle = Omit< TextStyle & ViewStyle & Pick, @@ -144,12 +145,12 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX ...restProps } = props + const { nodeRef } = useNodesRef(props, ref) const keyboardType = keyboardTypeMap[type] const defaultValue = props.defaultValue ?? (type === 'number' && value ? value + '' : value) const placeholderTextColor = props.placeholderTextColor || parseInlineStyle(placeholderStyle)?.color const textAlignVertical = multiline ? 'top' : 'auto' - const inputRef = useRef(null) const tmpValue = useRef() const cursorIndex = useRef(0) const lineCount = useRef(0) @@ -308,39 +309,24 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX } useUpdateEffect(() => { - if (!inputRef?.current) { + if (!nodeRef?.current) { return } - focus ? inputRef.current.focus() : inputRef.current.blur() + focus + ? (nodeRef.current as TextInput)?.focus() + : (nodeRef.current as TextInput)?.blur() }, [focus]) const innerTouchable = useInnerTouchable({ ...props, }) - useImperativeHandle(ref, () => { - return { - ...props, - focus() { - inputRef.current?.focus() - }, - blur() { - inputRef.current?.blur() - }, - clear() { - inputRef.current?.clear() - }, - isFocused() { - inputRef.current?.isFocused() - }, - } - }) return ( Date: Wed, 22 May 2024 22:21:23 +0800 Subject: [PATCH 07/14] =?UTF-8?q?feat:=20=E6=A0=87=E5=87=86=E5=8C=96=20use?= =?UTF-8?q?InnerProps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-button.tsx | 50 +++++++--- .../components/react/mpx-image/index.tsx | 93 ++++++++++++------- .../runtime/components/react/mpx-input.tsx | 32 +++++-- .../runtime/components/react/mpx-textarea.tsx | 29 +++++- 4 files changed, 141 insertions(+), 63 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 a23d1ab72..829e98d95 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -33,7 +33,15 @@ * ✘ bindagreeprivacyauthorization * ✔ bindtap */ -import React, { useEffect, useMemo, useRef, useState, ReactNode, forwardRef, SyntheticEvent } from 'react' +import React, { + useEffect, + useMemo, + useRef, + useState, + ReactNode, + forwardRef, + SyntheticEvent, +} from 'react' import { View, Text, @@ -43,6 +51,7 @@ import { TextStyle, Animated, Easing, + LayoutChangeEvent, } from 'react-native' import { extractTextStyle } from './utils' import useInnerProps, { getCustomEvent } from './getInnerListeners' @@ -172,6 +181,8 @@ const Button = forwardRef((props, ref): React.JSX.Element => hoverStayTimer: undefined, }) + const layoutRef = useRef({}) + const [isHover, setIsHover] = useState(false) const isMiniSize = size === 'mini' @@ -214,7 +225,7 @@ const Button = forwardRef((props, ref): React.JSX.Element => ...inheritTextHoverStyle } } - }, [type, plain, applyHoverEffect, loading, disabled, style]) + }, [type, plain, applyHoverEffect, loading, disabled, style, hoverStyle]) const setStayTimer = () => { clearTimeout(refs.current.hoverStayTimer) @@ -233,7 +244,7 @@ const Button = forwardRef((props, ref): React.JSX.Element => } const onTouchStart = (evt: SyntheticEvent) => { - bindtouchend && bindtouchend(evt) + bindtouchstart && bindtouchstart(evt) if (disabled) return setStartTimer() } @@ -245,26 +256,37 @@ const Button = forwardRef((props, ref): React.JSX.Element => } const onTap = (evt: SyntheticEvent) => { - !disabled && bindtap && bindtap(getCustomEvent('tap', evt, {}, props)) + !disabled && bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props)) } const catchTap = (evt: SyntheticEvent) => { - !disabled && catchtap && catchtap(getCustomEvent('tap', evt, {}, props)) + !disabled && catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props)) } - const innerTouchable = useInnerProps({ - ...props, - bindtouchstart: onTouchStart, - bindtouchend: onTouchEnd, - bindtap: onTap, - catchtap: catchTap, - }) + const onLayout = (evt: LayoutChangeEvent) => { + layoutRef.current = evt.nativeEvent.layout + } + + const innerProps = useInnerProps( + { + ...props, + bindtouchstart: onTouchStart, + bindtouchend: onTouchEnd, + bindtap: onTap, + catchtap: catchTap, + }, + { + ref: nodeRef, + onLayout, + }, + [], + { layoutRef } + ); return ( (viewSize // const Svg = lazy(() => import('./svg')) -const Fallback = ( - - loading ... - -) +// const Fallback = ( +// +// loading ... +// +// ) const Image = forwardRef((props, ref): React.JSX.Element => { const { @@ -111,13 +116,13 @@ const Image = forwardRef((props, ref): React.JSX.Element => svg = false, style = {}, bindload, - binderror, - ...restProps - } = omit(props, ['source', 'resizeeMode']) + binderror + } = props - const innerTouchable = useInnerTouchable(restProps) const { nodeRef } = useNodesRef(props, ref) + const layoutRef = useRef({}) + const { width = DEFAULT_IMAGE_WIDTH, height = DEFAULT_IMAGE_HEIGHT } = StyleSheet.flatten(style) const resizeMode: ImageResizeMode = ModeMap.get(mode) || 'stretch' @@ -169,15 +174,6 @@ const Image = forwardRef((props, ref): React.JSX.Element => } }, [mode, viewWidth, viewHeight, imageWidth, imageHeight]) - const onViewLayout = ({ - nativeEvent: { - layout: { width, height }, - }, - }: LayoutChangeEvent) => { - setViewWidth(width) - setViewHeight(height) - } - const onImageLoad = (evt: NativeSyntheticEvent) => { if (!bindload) return if (typeof src === 'string') { @@ -188,6 +184,7 @@ const Image = forwardRef((props, ref): React.JSX.Element => evt, { detail: { width, height }, + layoutRef }, props ) @@ -201,6 +198,7 @@ const Image = forwardRef((props, ref): React.JSX.Element => evt, { detail: { width, height }, + layoutRef }, props ) @@ -216,12 +214,26 @@ const Image = forwardRef((props, ref): React.JSX.Element => evt, { detail: { errMsg: evt.nativeEvent.error }, + layoutRef }, props ) ) } + const onViewLayout = ({ + nativeEvent: { + layout: { width, height }, + }, + }: LayoutChangeEvent) => { + setViewWidth(width) + setViewHeight(height) + } + + const onImageLayout = (evt: LayoutChangeEvent) => { + layoutRef.current = evt.nativeEvent.layout + } + const loadImage = useCallback((): void => { if (!isWidthFixMode && !isHeightFixMode && !isCropMode) return if (typeof src === 'string') { @@ -248,10 +260,20 @@ const Image = forwardRef((props, ref): React.JSX.Element => useEffect(() => loadImage(), [loadImage]) + const innerProps = useInnerProps(props, { + ref: nodeRef, + onLayout: onImageLayout + }, + [], + { + layoutRef + } +) + // if (typeof src === 'string' && REMOTE_SVG_REGEXP.test(src)) { // return ( - // - // + // + // // // // @@ -261,7 +283,7 @@ const Image = forwardRef((props, ref): React.JSX.Element => // if (svg) { // return ( // - // + // // // // @@ -281,8 +303,7 @@ const Image = forwardRef((props, ref): React.JSX.Element => ]} onLayout={onViewLayout}> () const cursorIndex = useRef(0) const lineCount = useRef(0) @@ -187,6 +189,7 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX value: evt.nativeEvent.text, cursor: cursorIndex.current, }, + layoutRef }, props ) @@ -209,6 +212,7 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX detail: { value: tmpValue.current || '', }, + layoutRef }, props ) @@ -226,6 +230,7 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX value: tmpValue.current || '', cursor: cursorIndex.current, }, + layoutRef }, props ) @@ -243,6 +248,7 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX detail: { value: tmpValue.current || '', }, + layoutRef }, props ) @@ -260,6 +266,7 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX detail: { value: tmpValue.current || '', }, + layoutRef }, props ) @@ -283,6 +290,7 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX lineHeight, lineCount: lineCount.current, }, + layoutRef }, props ) @@ -302,12 +310,17 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX selectionStart: evt.nativeEvent.selection.start, selectionEnd: evt.nativeEvent.selection.end, }, + layoutRef }, props ) ) } + const onLayout = (evt: LayoutChangeEvent) => { + layoutRef.current = evt.nativeEvent.layout + } + useUpdateEffect(() => { if (!nodeRef?.current) { return @@ -317,16 +330,19 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX : (nodeRef.current as TextInput)?.blur() }, [focus]) - const innerTouchable = useInnerTouchable({ - ...props, + const innerProps = useInnerProps(props, { + ref: nodeRef, + onLayout + }, + [], + { + layoutRef }) return ( +export type TextareProps = Omit< + InputProps & PrivateInputProps, + 'type' | 'password' | 'pass' | 'confirm-hold' +> -const Textarea = forwardRef((props, ref): React.JSX.Element => { - const restProps = omit(props, ['type', 'password', 'multiline', 'confirm-hold']) - return Keyboard.dismiss()} {...restProps} ref={ref} /> -}) +const Textarea = forwardRef( + (props, ref): React.JSX.Element => { + const restProps = omit(props, [ + 'ref', + 'type', + 'password', + 'multiline', + 'confirm-hold', + ]) + return ( + Keyboard.dismiss()} + {...restProps} + /> + ) + } +) Textarea.displayName = 'mpx-textarea' From da9fd0b5d41f469a93434e1845183e14269948c4 Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Thu, 23 May 2024 11:30:26 +0800 Subject: [PATCH 08/14] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=20open-type=20?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-button.tsx | 91 ++++++++++++++++--- .../runtime/components/react/mpx-input.tsx | 2 +- 2 files changed, 79 insertions(+), 14 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 829e98d95..6a02170d7 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -5,7 +5,7 @@ * ✔ disabled * ✔ loading * ✘ form-type - * ✘ open-type + * - open-type: Partially. Only support `share`、`getUserInfo` * ✔ hover-style: Convert hoverClass to hoverStyle. * ✘ hover-stop-propagation * ✔ hover-start-time @@ -57,6 +57,17 @@ import { extractTextStyle } from './utils' import useInnerProps, { getCustomEvent } from './getInnerListeners' import useNodesRef from '../../useNodesRef' +export type Type = 'default' | 'primary' | 'warn' + +/** + * normal、hover、plain、disabled + */ +type TypeColor = [string, string, string, string] + +export type OpenType = 'share' | 'getUserInfo' + +export type OpenTypeEvent = 'onShareAppMessage' | 'onUserInfo' + export interface ButtonProps { size?: string type?: Type @@ -66,22 +77,18 @@ export interface ButtonProps { 'hover-style'?: StyleProp 'hover-start-time'?: number 'hover-stay-time'?: number + 'open-type'?: OpenType + 'data-shareInfo'?: unknown style?: StyleProp children: ReactNode + bindgetuserinfo?: (userInfo: any) => void bindtap?: (evt: SyntheticEvent | unknown) => void catchtap?: (evt: SyntheticEvent | unknown) => void bindtouchstart?: (evt: SyntheticEvent | unknown) => void bindtouchend?: (evt: SyntheticEvent | unknown) => void } -export type Type = 'default' | 'primary' | 'warn' - -/** - * normal、hover、plain、disabled - */ -type TypeColor = [string, string, string, string] - -const LoadingImageUri = +const LOADING_IMAGE_URI = 'data:image/png;base64,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' const TypeColorMap: Record = { @@ -90,6 +97,11 @@ const TypeColorMap: Record = { warn: ['#E64340', '#CE3C39', '230,67,64', '#EC8B89'], } +const OpenTypeEventsMap = new Map([ + ['share', 'onShareAppMessage'], + ['getUserInfo', 'onUserInfo'], +]) + const styles = StyleSheet.create({ button: { width: '100%', @@ -150,7 +162,7 @@ const Loading = ({ alone = false }: { alone: boolean }): React.JSX.Element => { marginRight: alone ? 0 : 5, } - return + return } const Button = forwardRef((props, ref): React.JSX.Element => { @@ -163,8 +175,11 @@ const Button = forwardRef((props, ref): React.JSX.Element => 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, + 'open-type': openType, + 'data-shareInfo': shareinfo, style = [], children, + bindgetuserinfo, bindtap, catchtap, bindtouchstart, @@ -227,6 +242,49 @@ const Button = forwardRef((props, ref): React.JSX.Element => } }, [type, plain, applyHoverEffect, loading, disabled, style, hoverStyle]) + const getOpenTypeEvent = () => { + if (!openType) return + if (!global?.__mpx?.config?.rnConfig) { + console.warn('Environment not supported') + return + } + + const eventName = OpenTypeEventsMap.get(openType) + if (!eventName) { + console.warn(`open-type not support ${openType}`) + return + } + + const event = global?.__mpx?.config?.rnConfig?.[eventName] + if (!event) { + console.warn(`Unregistered ${eventName} event`) + return + } + + return event + } + + const handleOpenTypeEvent = () => { + if (!openType) return + if (openType === 'share') { + const onShareAppMessage = getOpenTypeEvent() + onShareAppMessage && onShareAppMessage({ + from: 'button', + target: { + dataset: { shareinfo } + } + }) + } + + if (openType === 'getUserInfo') { + const onUserInfo = getOpenTypeEvent() + const userInfo = onUserInfo && onUserInfo() + if (typeof userInfo === 'object') { + bindgetuserinfo && bindgetuserinfo(userInfo) + } + } + } + const setStayTimer = () => { clearTimeout(refs.current.hoverStayTimer) refs.current.hoverStayTimer = setTimeout(() => { @@ -256,17 +314,22 @@ const Button = forwardRef((props, ref): React.JSX.Element => } const onTap = (evt: SyntheticEvent) => { - !disabled && bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props)) + if (disabled) return + bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props)) + handleOpenTypeEvent() } const catchTap = (evt: SyntheticEvent) => { - !disabled && catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props)) + if (disabled) return + catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props)) + handleOpenTypeEvent() } const onLayout = (evt: LayoutChangeEvent) => { layoutRef.current = evt.nativeEvent.layout } + const innerProps = useInnerProps( { ...props, @@ -280,7 +343,9 @@ const Button = forwardRef((props, ref): React.JSX.Element => onLayout, }, [], - { layoutRef } + { + layoutRef + } ); return ( 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 84ba6552b..3012b5044 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx @@ -1,7 +1,7 @@ /** * ✔ value * ✔ defaultValue - * - type: Partially. Not support safe-password、nickname + * - type: Partially. Not support `safe-password`、`nickname` * ✔ password * ✔ placeholder * - placeholder-style: Only placeholderTextColor(RN). From eff3993f71beab7312862e2ec3a9697c8194da02 Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Thu, 23 May 2024 14:39:43 +0800 Subject: [PATCH 09/14] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20react-native?= =?UTF-8?q?=20=E7=9B=B8=E5=85=B3=E9=85=8D=E7=BD=AE=E5=AF=B9=E8=B1=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 8afb4e3da..d5a1f711e 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -143,7 +143,11 @@ Mpx.config = { hostWhitelists Array 类型 支持h5域名白名单安全校验 apiImplementations webview JSSDK接口 例如getlocation */ - webviewConfig: {} + webviewConfig: {}, + /** + * react-native 相关配置，用于挂载事件等，如 onShareAppMessage + */ + rnConfig: {} } global.__mpx = Mpx From be45eec12392573b775937f82d12dba4692919dd Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Thu, 23 May 2024 16:50:40 +0800 Subject: [PATCH 10/14] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E5=8F=8A=E4=BA=8B=E4=BB=B6=E5=B1=9E=E6=80=A7=E6=98=A0?= =?UTF-8?q?=E5=B0=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-button.tsx | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 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 6a02170d7..59fa37495 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -40,7 +40,6 @@ import React, { useState, ReactNode, forwardRef, - SyntheticEvent, } from 'react' import { View, @@ -52,6 +51,7 @@ import { Animated, Easing, LayoutChangeEvent, + NativeSyntheticEvent, } from 'react-native' import { extractTextStyle } from './utils' import useInnerProps, { getCustomEvent } from './getInnerListeners' @@ -82,10 +82,10 @@ export interface ButtonProps { style?: StyleProp children: ReactNode bindgetuserinfo?: (userInfo: any) => void - bindtap?: (evt: SyntheticEvent | unknown) => void - catchtap?: (evt: SyntheticEvent | unknown) => void - bindtouchstart?: (evt: SyntheticEvent | unknown) => void - bindtouchend?: (evt: SyntheticEvent | unknown) => void + bindtap?: (evt: NativeSyntheticEvent | unknown) => void + catchtap?: (evt: NativeSyntheticEvent | unknown) => void + bindtouchstart?: (evt: NativeSyntheticEvent | unknown) => void + bindtouchend?: (evt: NativeSyntheticEvent | unknown) => void } const LOADING_IMAGE_URI = @@ -301,25 +301,25 @@ const Button = forwardRef((props, ref): React.JSX.Element => }, hoverStartTime) } - const onTouchStart = (evt: SyntheticEvent) => { + const onTouchStart = (evt: NativeSyntheticEvent) => { bindtouchstart && bindtouchstart(evt) if (disabled) return setStartTimer() } - const onTouchEnd = (evt: SyntheticEvent) => { + const onTouchEnd = (evt: NativeSyntheticEvent) => { bindtouchend && bindtouchend(evt) if (disabled) return setStayTimer() } - const onTap = (evt: SyntheticEvent) => { + const onTap = (evt: NativeSyntheticEvent) => { if (disabled) return bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props)) handleOpenTypeEvent() } - const catchTap = (evt: SyntheticEvent) => { + const catchTap = (evt: NativeSyntheticEvent) => { if (disabled) return catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props)) handleOpenTypeEvent() @@ -331,17 +331,15 @@ const Button = forwardRef((props, ref): React.JSX.Element => const innerProps = useInnerProps( + props, { - ...props, + ref: nodeRef, + onLayout, bindtouchstart: onTouchStart, bindtouchend: onTouchEnd, bindtap: onTap, catchtap: catchTap, }, - { - ref: nodeRef, - onLayout, - }, [], { layoutRef From f7c17abf3ecf3dbdb77df69cb1f70e0efa68c9bb Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Fri, 24 May 2024 10:35:41 +0800 Subject: [PATCH 11/14] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=20children=20?= =?UTF-8?q?=E5=88=A4=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-button.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 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 59fa37495..979d95e89 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -358,13 +358,9 @@ const Button = forwardRef((props, ref): React.JSX.Element => applyHoverEffect && hoverStyle, ]}> {loading && } - {['string', 'number'].includes(typeof children) ? ( - - {children} - - ) : ( - children - )} + + {children} + ) }) From 26bb84ad9ab1ea78d411694ad88380ac8769ede2 Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Fri, 24 May 2024 14:46:14 +0800 Subject: [PATCH 12/14] =?UTF-8?q?feat:=20=E6=81=A2=E5=A4=8D=20hover-class?= =?UTF-8?q?=20=E7=8A=B6=E6=80=81=E5=88=A4=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-button.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 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 979d95e89..533157e29 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -6,7 +6,8 @@ * ✔ loading * ✘ form-type * - open-type: Partially. Only support `share`、`getUserInfo` - * ✔ hover-style: Convert hoverClass to hoverStyle. + * ✔ hover-class: Convert hoverClass to hoverStyle. + * ✔ hover-style * ✘ hover-stop-propagation * ✔ hover-start-time * ✔ hover-stay-time @@ -74,6 +75,7 @@ export interface ButtonProps { plain?: boolean disabled?: boolean loading?: boolean + 'hover-class'?: string 'hover-style'?: StyleProp 'hover-start-time'?: number 'hover-stay-time'?: number @@ -172,7 +174,8 @@ const Button = forwardRef((props, ref): React.JSX.Element => plain = false, disabled = false, loading = false, - 'hover-style': hoverStyle, + 'hover-class': hoverClass, + 'hover-style': hoverStyle = [], 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, @@ -202,7 +205,7 @@ const Button = forwardRef((props, ref): React.JSX.Element => const isMiniSize = size === 'mini' - const applyHoverEffect = isHover && !!hoverStyle + const applyHoverEffect = isHover && hoverClass !== 'none' const { viewStyle, textStyle } = useMemo<{ viewStyle: ViewStyle @@ -226,7 +229,7 @@ const Button = forwardRef((props, ref): React.JSX.Element => ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})` : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})` const inheritTextStyle = extractTextStyle(style) - const inheritTextHoverStyle = extractTextStyle(applyHoverEffect ? hoverStyle: []) + const inheritTextHoverStyle = extractTextStyle(applyHoverEffect ? hoverStyle : []) return { viewStyle: { borderWidth: 1, From f95c8191bfa4e0651891f114d1151625fe8ef5e6 Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Fri, 24 May 2024 20:53:08 +0800 Subject: [PATCH 13/14] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20layout?= =?UTF-8?q?=20=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-button.tsx | 7 ++++--- .../lib/runtime/components/react/mpx-image/index.tsx | 6 ++++-- .../lib/runtime/components/react/mpx-input.tsx | 6 ++++-- 3 files changed, 12 insertions(+), 7 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 533157e29..7aa5db3a4 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -328,11 +328,12 @@ const Button = forwardRef((props, ref): React.JSX.Element => handleOpenTypeEvent() } - const onLayout = (evt: LayoutChangeEvent) => { - layoutRef.current = evt.nativeEvent.layout + const onLayout = () => { + nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => { + layoutRef.current = { x, y, width, height, offsetLeft, offsetTop } + }) } - const innerProps = useInnerProps( props, { 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 6f346cc09..46355378c 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 @@ -230,8 +230,10 @@ const Image = forwardRef((props, ref): React.JSX.Element => setViewHeight(height) } - const onImageLayout = (evt: LayoutChangeEvent) => { - layoutRef.current = evt.nativeEvent.layout + const onImageLayout = () => { + nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => { + layoutRef.current = { x, y, width, height, offsetLeft, offsetTop } + }) } const loadImage = useCallback((): void => { 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 3012b5044..03c9ddda9 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx @@ -317,8 +317,10 @@ const Input = forwardRef((props: InputProps & PrivateInputProps, ref): React.JSX ) } - const onLayout = (evt: LayoutChangeEvent) => { - layoutRef.current = evt.nativeEvent.layout + const onLayout = () => { + nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => { + layoutRef.current = { x, y, width, height, offsetLeft, offsetTop } + }) } useUpdateEffect(() => { From 017d87ca12b4d6e010a0434de6ab0c8d78d5ff8a Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Fri, 24 May 2024 21:01:56 +0800 Subject: [PATCH 14/14] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=20open-type=20?= =?UTF-8?q?share=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../template/wx/component-config/button.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/button.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/button.js index f58bbbd52..1757a228a 100644 --- a/packages/webpack-plugin/lib/platform/template/wx/component-config/button.js +++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/button.js @@ -30,8 +30,10 @@ module.exports = function ({ print }) { const webEventLog = print({ platform: 'web', tag: TAG_NAME, isError: false, type: 'event' }) const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false }) const wxPropValueLog = print({ platform: 'wx', tag: TAG_NAME, isError: false, type: 'value' }) + const iosValueLogError = print({ platform: 'ios', tag: TAG_NAME, isError: true, type: 'value' }) const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false }) const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' }) + const androidValueLogError = print({ platform: 'android', tag: TAG_NAME, isError: true, type: 'value' }) const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false }) const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' }) @@ -119,6 +121,18 @@ module.exports = function ({ print }) { ttValueLogError({ name, value }) } } + }, + ios ({ name, value }) { + const supported = ['share'] + if (!supported.includes(value)) { + iosValueLogError({ name, value }) + } + }, + android ({ name, value }) { + const supported = ['share'] + if (!supported.includes(value)) { + androidValueLogError({ name, value }) + } } }, { @@ -157,7 +171,7 @@ module.exports = function ({ print }) { qa: qaPropLog }, { - test: /^(open-type|lang|from-type|hover-class|send-message-title|send-message-path|send-message-img|app-parameter|show-message-card|phone-number-no-quota-toast|bindgetuserinfo|bindcontact|createliveactivity|bindgetphonenumber|bindgetrealtimephonenumber|binderror|bindopensetting|bindlaunchapp|bindchooseavatar|bindagreeprivacyauthorization)$/, + test: /^(lang|from-type|hover-class|send-message-title|send-message-path|send-message-img|app-parameter|show-message-card|phone-number-no-quota-toast|bindgetuserinfo|bindcontact|createliveactivity|bindgetphonenumber|bindgetrealtimephonenumber|binderror|bindopensetting|bindlaunchapp|bindchooseavatar|bindagreeprivacyauthorization)$/, ios: iosPropLog, android: androidPropLog }