From 28f32722683708678e20f7bbf6865160c6f4356f Mon Sep 17 00:00:00 2001 From: shangqunfeng Date: Wed, 9 Oct 2024 11:44:09 +0800 Subject: [PATCH 01/15] fix(view): fix view --- .../lib/runtime/components/react/mpx-view.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 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 3e8541684a..c17f20bfb0 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx @@ -4,7 +4,7 @@ * ✔ hover-start-time * ✔ hover-stay-time */ -import { View, Text, StyleProp, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent } from 'react-native' +import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent } from 'react-native' import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, Children, cloneElement } from 'react' import useInnerProps from './getInnerListeners' import { ExtendedViewStyle } from './types/common' @@ -72,13 +72,13 @@ const checkNeedLayout = (style: PreImageInfo) => { const [width, height] = style.sizeList const bp = style.backgroundPosition // 含有百分号，center 需计算布局 - const containPercentSymbol = typeof bp[1] === 'string' && PERCENT_REGEX.test(bp[1]) || typeof bp[3] === 'string' && PERCENT_REGEX.test(bp[3]) + const containPercentSymbol = (typeof bp[1] === 'string' && PERCENT_REGEX.test(bp[1])) || (typeof bp[3] === 'string' && PERCENT_REGEX.test(bp[3])) return { // 是否开启layout的计算 - needLayout: typeof width === 'string' && /^cover|contain$/.test(width) || (typeof height === 'string' && PERCENT_REGEX.test(height) && width === 'auto') || (typeof width === 'string' && PERCENT_REGEX.test(width) && height === 'auto') || containPercentSymbol, + needLayout: (typeof width === 'string' && /^cover|contain$/.test(width)) || (typeof height === 'string' && PERCENT_REGEX.test(height) && width === 'auto') || (typeof width === 'string' && PERCENT_REGEX.test(width) && height === 'auto') || containPercentSymbol, // 是否开启原始宽度的计算 - needImageSize: typeof width === 'string' && /^cover|contain$/.test(width) || style.sizeList.includes('auto') + needImageSize: (typeof width === 'string' && /^cover|contain$/.test(width)) || style.sizeList.includes('auto') } } @@ -170,9 +170,9 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima const layoutRatio = layoutWidth / imageSizeWidth const eleRatio = imageSizeWidth / imageSizeHeight // 容器宽高比 大于 图片的宽高比，依据宽度作为基准，否则以高度为基准 - if (layoutRatio <= eleRatio && (width as string) === 'contain' || layoutRatio >= eleRatio && (width as string) === 'cover') { + if ((layoutRatio <= eleRatio && (width as string) === 'contain') || (layoutRatio >= eleRatio && (width as string) === 'cover')) { dimensions = calculateSize(layoutWidth as number, imageSizeHeight / imageSizeWidth, true) as Size - } else if (layoutRatio > eleRatio && (width as string) === 'contain' || layoutRatio < eleRatio && (width as string) === 'cover') { + } else if ((layoutRatio > eleRatio && (width as string) === 'contain') || (layoutRatio < eleRatio && (width as string) === 'cover')) { dimensions = calculateSize(layoutHeight as number, imageSizeWidth / imageSizeHeight) as Size } } @@ -195,8 +195,8 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima // 数值类型设置为 stretch (imageProps.style as ImageStyle).resizeMode = 'stretch' dimensions = { - width: typeof width === 'string' && PERCENT_REGEX.test(width) ? width : +width! as number, - height: typeof height === 'string' && PERCENT_REGEX.test(height) ? height : +height! as number + width: typeof width === 'string' && PERCENT_REGEX.test(width) ? width : +width as number, + height: typeof height === 'string' && PERCENT_REGEX.test(height) ? height : +height as number } } } From e65e769f25faa972ce0c4e37399b967a6aaf4ba1 Mon Sep 17 00:00:00 2001 From: luyongfang Date: Wed, 9 Oct 2024 15:36:47 +0800 Subject: [PATCH 02/15] fix: eslint --- .../react/mpx-picker/multiSelector.tsx | 3 +++ .../components/react/mpx-picker/region.tsx | 4 +-- .../components/react/mpx-picker/time.tsx | 3 +-- .../components/react/mpx-swiper/carouse.tsx | 27 ++++++++++--------- .../components/react/mpx-swiper/index.tsx | 2 +- 5 files changed, 22 insertions(+), 17 deletions(-) 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 9042eac3f3..8f2ebaa491 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 @@ -63,15 +63,18 @@ function getColumnIndexByValue (range: any[] = [], column: number, value: any[] if (ritem.value === item) { changeIndex = rindex } + return ritem }) } else { curRange.map((citem, cindex) => { if (citem.value === item) { tmpRange = citem.children } + return citem }) curRange = tmpRange } + return item }) return changeIndex } 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 88aba622b5..0496d99d9d 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 @@ -58,6 +58,7 @@ const _RegionPicker = forwardRef, RegionProps>((pr return code } } + return item }).filter(code => !!code) const detail: Record = { value, code } if (postcode[2]) detail.postcode = postcode[2] @@ -88,7 +89,6 @@ const _RegionPicker = forwardRef, RegionProps>((pr } return ( - // @ts-ignore {children} @@ -97,5 +97,5 @@ const _RegionPicker = forwardRef, RegionProps>((pr ) }) -_RegionPicker.displayName === 'mpx-picker-region' +_RegionPicker.displayName = 'mpx-picker-region' export default _RegionPicker 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 20c3ca111b..edad26c6c5 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 @@ -8,8 +8,7 @@ import { TimeProps } from './type' // const { height: dHeight, width: dWidth } = Dimensions.get('window'); // modal属性: {"height": 298.33331298828125, "offsetLeft": 0, "offsetTop": 513.6666870117188, "width": 375, "x": 0, "y": 513.6666870117188} // const { height: sHeight, width: sWidth } = Dimensions.get('screen'); -// 设备屏幕的大小。 screen - +// 设备屏幕的大小。 screen const styles: { [key: string]: Object } = { showModal: { backgroundColor: 'black', 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 0fb9b2268c..e59da614e5 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 @@ -162,7 +162,7 @@ const _Carouse = forwardRef, CarouseProps>( autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: 0 }) nextIndex = state.total - 1 // 反向: 数组最后一个index - nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total }), + nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total }) isAutoEnd = true } else { // 反向非最后一个 @@ -172,7 +172,7 @@ const _Carouse = forwardRef, CarouseProps>( if (nextIndex > state.total - 1) { autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: step * (nextIndex + 1) }) nextIndex = 0 - nextOffset = Object.assign({}, currentOffset, { [state.dir]: step }), + nextOffset = Object.assign({}, currentOffset, { [state.dir]: step }) isAutoEnd = true } else { // nextIndex = nextIndex, @@ -216,22 +216,26 @@ const _Carouse = forwardRef, CarouseProps>( } else { if (!isAutoEnd) { scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true }) + // 这里包裹了一层contentOffset需要测试下 onScrollEnd({ nativeEvent: { - // @ts-ignore - x: +nextOffset.x, - y: +nextOffset.y + contentOffset: { + x: +nextOffset.x, + y: +nextOffset.y + } } - }) + } as NativeSyntheticEvent) } else { + // 同上 setTimeout(() => { onScrollEnd({ nativeEvent: { - // @ts-ignore - x: 0, - y: 0 + contentOffset: { + x: 0, + y: 0 + } } - }) + } as NativeSyntheticEvent) }, 10) if (state.dir === 'x') { scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true }) @@ -293,7 +297,6 @@ const _Carouse = forwardRef, CarouseProps>( */ function onWrapperLayout () { if (props.enableOffset) { - // @ts-ignore scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => { layoutRef.current = { x, y, width, height, offsetLeft, offsetTop } const isWDiff = state.width !== width @@ -399,7 +402,7 @@ const _Carouse = forwardRef, CarouseProps>( if (total > 1 && Array.isArray(children)) { let arrElements: (Array) = [] // pages = ["2", "0", "1", "2", "0"] - const pages = Array.isArray(children) && Object.keys(children) || [] + const pages = Array.isArray(children) ? Object.keys(children) : [] /* 无限循环的时候 */ if (circular) { pages.unshift(total - 1 + '') diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/index.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/index.tsx index e4aa421c74..6665a760ba 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/index.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/index.tsx @@ -1,6 +1,6 @@ import { ScrollView } from 'react-native' import { JSX, MutableRefObject, forwardRef, useRef } from 'react' -import { default as Carouse } from './carouse' +import Carouse from './carouse' import { SwiperProps } from './type' import useInnerProps from '../getInnerListeners' import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数 From c0d39ed4f1030614bd9517c301f1adc677cc47ac Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 9 Oct 2024 15:52:48 +0800 Subject: [PATCH 03/15] fix: ts error --- .../lib/runtime/components/react/mpx-root-portal.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx index 23011e9765..f45736ac27 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx @@ -10,14 +10,11 @@ interface RootPortalProps { } const _RootPortal = (props: RootPortalProps) => { const { children, enable = true } = props - return enable ? ( - // @ts-ignore - + return enable + ? {children} - ) : ( - <>{children} - ) + : <>{children} } _RootPortal.displayName = 'mpx-root-portal' From cece57d5f858364c8274bf5f79ec2bcad2e47e4f Mon Sep 17 00:00:00 2001 From: WX-DongXing Date: Wed, 9 Oct 2024 16:22:00 +0800 Subject: [PATCH 04/15] fix: fix ts error --- .../lib/runtime/components/react/mpx-button.tsx | 8 ++------ .../lib/runtime/components/react/mpx-label.tsx | 3 ++- 2 files changed, 4 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 d6d7ceb518..345fa44529 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx @@ -126,20 +126,17 @@ const styles = StyleSheet.create({ }) const getOpenTypeEvent = (openType: OpenType) => { - // @ts-ignore - if (!global?.__mpx?.config?.rnConfig) { + if (!(globalThis as any)?.__mpx?.config?.rnConfig) { throwReactWarning('[Mpx runtime warn]: Environment not supported') return } - const eventName = OpenTypeEventsMap.get(openType) if (!eventName) { throwReactWarning(`[Mpx runtime warn]: open-type not support ${openType}`) return } - // @ts-ignore - const event = global.__mpx.config.rnConfig?.openTypeHandler?.[eventName] + const event = (globalThis as any).__mpx.config.rnConfig?.openTypeHandler?.[eventName] if (!event) { throwReactWarning(`[Mpx runtime warn]: Unregistered ${eventName} event`) return @@ -172,7 +169,6 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => { return () => { animation.stop() } - // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const loadingStyle = { 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 569382e991..73351a493b 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx @@ -9,6 +9,7 @@ import { NativeSyntheticEvent, TextStyle } from 'react-native' +import { noop } from '@mpxjs/utils' import useInnerProps, { getCustomEvent } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' import { every, splitStyle, splitProps, isText, throwReactWarning } from './utils' @@ -42,7 +43,7 @@ const Label = forwardRef, LabelProps>( } const contextRef: LabelContextValue = useRef({ - triggerChange: () => { } + triggerChange: noop }) const layoutRef = useRef({}) From 3be100118ea83d91d7c61bec2b97ea679a6b11b0 Mon Sep 17 00:00:00 2001 From: wangcuijuan Date: Wed, 9 Oct 2024 16:57:06 +0800 Subject: [PATCH 05/15] =?UTF-8?q?=E4=BF=AE=E6=AD=A3webview=20lint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-web-view.tsx | 29 +++++++++---------- packages/webpack-plugin/package.json | 1 + 2 files changed, 14 insertions(+), 16 deletions(-) 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 f86d6013cd..53d4ca3429 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 @@ -3,9 +3,9 @@ import { noop } from '@mpxjs/utils' import { Portal } from '@ant-design/react-native' import { getCustomEvent } from './getInnerListeners' import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy' -// @ts-ignore import { WebView } from 'react-native-webview' import useNodesRef, { HandlerRef } from './useNodesRef' +import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent } from 'react-native-webview/lib/WebViewTypes' type OnMessageCallbackEvent = { detail: { @@ -41,11 +41,6 @@ interface NativeEvent { data: string } -interface LoadRes { - timeStamp: string, - nativeEvent: NativeEvent -} - interface FormRef { postMessage: (value: any) => void; } @@ -54,11 +49,11 @@ const _WebView = forwardRef, WebViewProps>((pr const { src, bindmessage = noop, bindload = noop, binderror = noop } = props const defaultWebViewStyle = { - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0 + position: 'absolute' as 'absolute' | 'relative' | 'static', + left: 0 as number, + right: 0 as number, + top: 0 as number, + bottom: 0 as number } const { nodeRef: webViewRef } = useNodesRef(props, ref, { @@ -82,7 +77,7 @@ const _WebView = forwardRef, WebViewProps>((pr handleUnload() } }, []) - const _load = function (res: LoadRes) { + const _load = function (res: WebViewNavigationEvent) { const result = { type: 'load', timeStamp: res.timeStamp, @@ -92,7 +87,7 @@ const _WebView = forwardRef, WebViewProps>((pr } bindload(result) } - const _error = function (res: LoadRes) { + const _error = function (res: WebViewErrorEvent) { const result = { type: 'error', timeStamp: res.timeStamp, @@ -102,13 +97,15 @@ const _WebView = forwardRef, WebViewProps>((pr } binderror(result) } - const _message = function (res: LoadRes) { - let data: MessageData + const _message = function (res: WebViewMessageEvent) { + let data: MessageData = {} let asyncCallback const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab }) try { const nativeEventData = res.nativeEvent?.data - data = JSON.parse(nativeEventData) + if (typeof nativeEventData === 'string') { + data = JSON.parse(nativeEventData) + } } catch (e) { data = {} } diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index 4ce65fca2e..d659a0ec4c 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -88,6 +88,7 @@ "@types/react": "^18.2.79", "react-native": "^0.74.5", "react-native-gesture-handler": "^2.18.1", + "react-native-webview": "^13.12.2", "rimraf": "^6.0.1" }, "engines": { From c547af984aff4537497dbaca8bb458fa1821d073 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 9 Oct 2024 19:25:09 +0800 Subject: [PATCH 06/15] =?UTF-8?q?feat:=20=E4=B8=8B=E7=BA=BFtext=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E5=AD=97=E4=BD=93=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/mpx-text.tsx | 24 ++++--------------- 1 file changed, 5 insertions(+), 19 deletions(-) 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 57231de662..fb2113216a 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx @@ -5,10 +5,10 @@ * ✘ decode */ import { Text, TextStyle, TextProps } from 'react-native' -import { useRef, useEffect, forwardRef, ReactNode, JSX } from 'react' +import { useRef, forwardRef, ReactNode, JSX } from 'react' import useInnerProps from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数 -import { DEFAULT_FONT_SIZE, useTransformStyle } from './utils' +import { useTransformStyle } from './utils' import { VarContext } from './context' interface _TextProps extends TextProps { @@ -38,35 +38,21 @@ function wrapChildren (props: TextProps, { hasVarDec, varContext }: WrapChildren const _Text = forwardRef, _TextProps>((props, ref): JSX.Element => { const { style = {}, - children, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, - 'user-select': userSelect, - 'disable-default-style': disableDefaultStyle = false + 'user-select': userSelect } = props const layoutRef = useRef({}) - const defaultStyle: TextStyle = {} - - if (!disableDefaultStyle) { - defaultStyle.fontSize = DEFAULT_FONT_SIZE - } - - const styleObj: TextStyle = { - ...defaultStyle, - ...style - } const { normalStyle, hasVarDec, varContextRef - } = useTransformStyle(styleObj, { enableVar, externalVarContext, enablePercent: false }) + } = useTransformStyle(style, { enableVar, externalVarContext, enablePercent: false }) - const { nodeRef } = useNodesRef(props, ref, { - defaultStyle - }) + const { nodeRef } = useNodesRef(props, ref) const innerProps = useInnerProps(props, { ref: nodeRef From c3aec63b4e302a41fc08207ffb782564d1db6321 Mon Sep 17 00:00:00 2001 From: luyongfang Date: Wed, 9 Oct 2024 20:34:23 +0800 Subject: [PATCH 07/15] fix: tsc carouse & region --- .../components/react/mpx-picker/region.tsx | 24 ++++++++++++------- .../components/react/mpx-swiper/carouse.tsx | 4 ++-- 2 files changed, 17 insertions(+), 11 deletions(-) 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 0496d99d9d..6fe91e1e20 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 @@ -1,15 +1,17 @@ import { View, TouchableWithoutFeedback } from 'react-native' -import { Picker } from '@ant-design/react-native' +import { Picker, PickerColumnItem } from '@ant-design/react-native' import { regionData } from './regionData' import React, { forwardRef, useState, useRef } from 'react' import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数 -import { RegionProps, RegionObj, PickerData, LayoutType } from './type' +import { RegionProps, RegionObj, LayoutType } from './type' -function formateRegionData (clObj: RegionObj[] = [], customItem?: string, depth = 2): PickerData[] { +function formateRegionData (clObj: RegionObj[] = [], customItem?: string, depth = 2): PickerColumnItem[] { const l = depth - const obj: PickerData[] = [] + // 'PickerData[]' is not assignable to type 'PickerColumn | PickerColumn[]'. + // const obj: PickerColumnItem[] = [] + const obj: PickerColumnItem[] = [] if (customItem) { - const objClone: PickerData = { + const objClone: PickerColumnItem = { value: customItem, label: customItem, children: [] @@ -18,12 +20,12 @@ function formateRegionData (clObj: RegionObj[] = [], customItem?: string, depth let loop = panding while (depth-- > 0) { loop.children = [{ ...objClone }] - loop = loop.children[0] as PickerData + loop = loop.children[0] as PickerColumnItem } - obj.push(panding) + obj.push(panding as PickerColumnItem) } for (let i = 0; i < clObj.length; i++) { - const region: PickerData = { + const region: PickerColumnItem = { value: clObj[i].value, label: clObj[i].value } @@ -75,12 +77,16 @@ const _RegionPicker = forwardRef, RegionProps>((pr }) } + const onDismiss = (): void => { + bindcancel && bindcancel() + } + const regionProps = { data: formatRegionData, value: regionvalue, onChange, disabled, - onDismiss: bindcancel && bindcancel + onDismiss } const touchProps = { 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 e59da614e5..a3e00bba8c 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 @@ -43,7 +43,7 @@ const styles: { [key: string]: Object } = { } } -const _Carouse = forwardRef, CarouseProps>((props, ref): JSX.Element => { +const _Carouse = forwardRef, CarouseProps>((props, ref): JSX.Element => { // 默认取水平方向的width const { width } = Dimensions.get('window') const { styleObj } = props @@ -66,7 +66,7 @@ const _Carouse = forwardRef, CarouseProps>( const defaultY = (defaultHeight * initOffsetIndex) || 0 // 内部存储上一次的offset值 const autoplayTimerRef = useRef | null>(null) - const { nodeRef: scrollViewRef } = useNodesRef(props, ref, { + const { nodeRef: scrollViewRef } = useNodesRef(props, ref, { }) // 存储layout布局信息 const layoutRef = useRef({}) From 26609872002e92e0de8a05e32718ce079d178fdc Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 9 Oct 2024 20:42:06 +0800 Subject: [PATCH 08/15] =?UTF-8?q?chore:=20=E8=AE=A1=E7=AE=97lineHeight?= =?UTF-8?q?=E6=97=B6=E6=B7=BB=E5=8A=A0fontSize=E6=A3=80=E6=B5=8B=E8=AD=A6?= =?UTF-8?q?=E5=91=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/webpack-plugin/lib/runtime/components/react/utils.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.ts b/packages/webpack-plugin/lib/runtime/components/react/utils.ts index ef22aac502..802730b08f 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.ts @@ -182,6 +182,9 @@ function transformVar (styleObj: Record, varKeyPaths: Array) { let { lineHeight } = styleObj if (typeof lineHeight === 'string' && PERCENT_REGEX.test(lineHeight)) { + if (!styleObj.fontSize) { + console.warn('[Mpx runtime warn]: The fontSize property could not be read correctly, so the default fontSize of 16 will be used as the basis for calculating the lineHeight!') + } lineHeight = (parseFloat(lineHeight) / 100) * (styleObj.fontSize || DEFAULT_FONT_SIZE) styleObj.lineHeight = lineHeight } From f19650221af3a15d3d71242b782ee9752471c9f6 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 9 Oct 2024 20:51:20 +0800 Subject: [PATCH 09/15] =?UTF-8?q?chore:=20=E8=AE=A1=E7=AE=97lineHeight?= =?UTF-8?q?=E6=97=B6=E6=B7=BB=E5=8A=A0fontSize=E6=A3=80=E6=B5=8B=E8=AD=A6?= =?UTF-8?q?=E5=91=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/runtime/components/react/utils.ts | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.ts b/packages/webpack-plugin/lib/runtime/components/react/utils.ts index 802730b08f..df8aefda20 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 { TextStyle, Dimensions } from 'react-native' +import { Dimensions } from 'react-native' import { isObject, hasOwn, diffAndCloneA, noop } from '@mpxjs/utils' import { VarContext } from './context' @@ -12,6 +12,12 @@ export const VAR_USE_REGEX = /var\(([^,]+)(?:,([^)]+))?\)/ export const URL_REGEX = /url\(["']?(.*?)["']?\)/ export const DEFAULT_FONT_SIZE = 16 +export const throwReactWarning = (message: string) => { + setTimeout(() => { + console.warn(message) + }, 0) +} + export function rpx (value: number) { const { width } = Dimensions.get('screen') // rn 单位 dp = 1(css)px = 1 物理像素 * pixelRatio(像素比) @@ -182,10 +188,12 @@ function transformVar (styleObj: Record, varKeyPaths: Array) { let { lineHeight } = styleObj if (typeof lineHeight === 'string' && PERCENT_REGEX.test(lineHeight)) { - if (!styleObj.fontSize) { - console.warn('[Mpx runtime warn]: The fontSize property could not be read correctly, so the default fontSize of 16 will be used as the basis for calculating the lineHeight!') + const hasFontSize = hasOwn(styleObj, 'fontSize') + if (!hasFontSize) { + throwReactWarning('[Mpx runtime warn]: The fontSize property could not be read correctly, so the default fontSize of 16 will be used as the basis for calculating the lineHeight!') } - lineHeight = (parseFloat(lineHeight) / 100) * (styleObj.fontSize || DEFAULT_FONT_SIZE) + const fontSize = hasFontSize ? styleObj.fontSize : DEFAULT_FONT_SIZE + lineHeight = (parseFloat(lineHeight) / 100) * fontSize styleObj.lineHeight = lineHeight } } @@ -345,9 +353,3 @@ export function splitProps> (props: T) { } }) } - -export const throwReactWarning = (message: string) => { - setTimeout(() => { - console.warn(message) - }, 0) -} From c9b7d8fe9483fb470d21509aad50ba9add10b6e1 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Thu, 10 Oct 2024 15:35:22 +0800 Subject: [PATCH 10/15] =?UTF-8?q?chore:=20useTransformStyle=20styleObj?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=B7=BB=E5=8A=A0=E5=85=9C=E5=BA=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/webpack-plugin/lib/runtime/components/react/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.ts b/packages/webpack-plugin/lib/runtime/components/react/utils.ts index df8aefda20..9504ae473c 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.ts @@ -205,7 +205,7 @@ interface TransformStyleConfig { enableLineHeight?: boolean } -export function useTransformStyle (styleObj: Record, { enableVar, externalVarContext, enablePercent = true, enableLineHeight = true }: TransformStyleConfig) { +export function useTransformStyle (styleObj: Record = {}, { enableVar, externalVarContext, enablePercent = true, enableLineHeight = true }: TransformStyleConfig) { const varStyle: Record = {} const normalStyle: Record = {} let hasVarDec = false From e5f1fb04b2af515d5b96569e364ab0ceb94f43fb Mon Sep 17 00:00:00 2001 From: hiyuki <674883329@qq.com> Date: Fri, 11 Oct 2024 16:39:01 +0800 Subject: [PATCH 11/15] RN: support hairlineWidth && fix var() parse --- .../platform/builtInMixins/styleHelperMixin.ios.js | 10 ++++++---- .../webpack-plugin/lib/platform/style/wx/index.js | 6 +++--- packages/webpack-plugin/lib/react/style-helper.js | 6 +++++- .../lib/runtime/components/react/utils.ts | 11 ++++++----- 4 files changed, 20 insertions(+), 13 deletions(-) diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index e6bb196376..f8421b6ab7 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -1,5 +1,5 @@ import { isObject, isArray, dash2hump, isFunction, cached } from '@mpxjs/utils' -import { Dimensions } from 'react-native' +import { Dimensions, StyleSheet } from 'react-native' function rpx (value) { const { width } = Dimensions.get('screen') @@ -9,6 +9,7 @@ function rpx (value) { } global.__rpx = rpx +global.__hairlineWidth = StyleSheet.hairlineWidth const escapeReg = /[()[\]{}#!.:,%'"+$]/g const escapeMap = { @@ -81,7 +82,8 @@ const listDelimiter = /;(?![^(]*[)])/g const propertyDelimiter = /:(.+)/ const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/ const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/ -const varRegExp = /^--.*/ +const hairlineRegExp = /^\s*hairlineWidth\s*$/ +const varRegExp = /^--/ const parseStyleText = cached((cssText = '') => { const res = {} @@ -123,15 +125,15 @@ function transformStyleObj (styleObj) { const keys = Object.keys(styleObj) const transformed = {} keys.forEach((prop) => { - // todo 检测不支持的prop let value = styleObj[prop] let matched if ((matched = pxRegExp.exec(value))) { value = +matched[1] } else if ((matched = rpxRegExp.exec(value))) { value = rpx(+matched[1]) + } else if (hairlineRegExp.test(value)) { + value = StyleSheet.hairlineWidth } - // todo 检测不支持的value transformed[prop] = value }) return transformed diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js index 008bc9e1f0..5a1183d7c6 100644 --- a/packages/webpack-plugin/lib/platform/style/wx/index.js +++ b/packages/webpack-plugin/lib/platform/style/wx/index.js @@ -9,7 +9,7 @@ module.exports = function getSpec ({ warn, error }) { // React Native android 不支持的 CSS property android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/ } - const cssVariableExp = /var\((.*?)\)/ + const cssVariableExp = /^var\((.+)\)$/ // 不支持的属性提示 const unsupportedPropError = ({ prop, mode }) => { error(`Property [${prop}] is not supported in React Native ${mode} environment!`) @@ -91,7 +91,7 @@ module.exports = function getSpec ({ warn, error }) { // css variable 类型校验 const newVal = (value.match(cssVariableExp)?.[1] || '').split(',') const variable = newVal?.[0] - if (!variable || !/^--.+$/.test(variable)) { + if (!variable || !/^--/.test(variable)) { tips(`The css variable [${prop}:${value}] is invalid, please check again`) return false } @@ -99,7 +99,7 @@ module.exports = function getSpec ({ warn, error }) { } const namedColor = ['transparent', 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen'] const valueExp = { - number: /^(-?\d+(\.\d+)?)(rpx|px|%)?$/, + number: /^((-?\d+(\.\d+)?)(rpx|px|%)?|hairlineWidth)$/, color: new RegExp(('^(' + namedColor.join('|') + ')$') + '|(^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$)|^(rgb|rgba|hsl|hsla|hwb)\\(.+\\)$') } const type = getValueType(prop) diff --git a/packages/webpack-plugin/lib/react/style-helper.js b/packages/webpack-plugin/lib/react/style-helper.js index d067f87b24..6ce8790841 100644 --- a/packages/webpack-plugin/lib/react/style-helper.js +++ b/packages/webpack-plugin/lib/react/style-helper.js @@ -4,7 +4,8 @@ const getRulesRunner = require('../platform/index') const dash2hump = require('../utils/hump-dash').dash2hump const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/ const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/ -const varRegExp = /^--.*/ +const hairlineRegExp = /^\s*hairlineWidth\s*$/ +const varRegExp = /^--/ const cssPrefixExp = /^-(webkit|moz|ms|o)-/ function getClassMap ({ content, filename, mode, srcMode, warn, error }) { const classMap = {} @@ -22,6 +23,9 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) { } else if ((matched = rpxRegExp.exec(value))) { value = `global.__rpx(${matched[1]})` needStringify = false + } else if (hairlineRegExp.test(value)) { + value = `global.__hairlineWidth` + needStringify = false } return needStringify ? JSON.stringify(value) : value } diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.ts b/packages/webpack-plugin/lib/runtime/components/react/utils.ts index ef22aac502..e7c7e05795 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 { TextStyle, Dimensions } from 'react-native' +import { TextStyle, Dimensions, StyleSheet } from 'react-native' import { isObject, hasOwn, diffAndCloneA, noop } from '@mpxjs/utils' import { VarContext } from './context' @@ -8,8 +8,8 @@ export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/ export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/ export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/ export const VAR_DEC_REGEX = /^--.*/ -export const VAR_USE_REGEX = /var\(([^,]+)(?:,([^)]+))?\)/ -export const URL_REGEX = /url\(["']?(.*?)["']?\)/ +export const VAR_USE_REGEX = /^\s*var\(([^,]+)(?:,(.+))?\)\s*$/ +export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/ export const DEFAULT_FONT_SIZE = 16 export function rpx (value: number) { @@ -21,6 +21,7 @@ export function rpx (value: number) { const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/ const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/ +const hairlineRegExp = /^\s*hairlineWidth\s*$/ export function formatValue (value: string) { let matched @@ -28,6 +29,8 @@ export function formatValue (value: string) { return +matched[1] } else if ((matched = rpxRegExp.exec(value))) { return rpx(+matched[1]) + } else if (hairlineRegExp.test(value)) { + return StyleSheet.hairlineWidth } return value } @@ -79,9 +82,7 @@ export const parseInlineStyle = (inlineStyle = ''): Record => { export const parseUrl = (cssUrl = '') => { if (!cssUrl) return - const match = cssUrl.match(URL_REGEX) - return match?.[1] } From 88988b24784b8e6d169ac3f50b4911fc1074d80c Mon Sep 17 00:00:00 2001 From: hiyuki <674883329@qq.com> Date: Fri, 11 Oct 2024 16:47:35 +0800 Subject: [PATCH 12/15] fix lint --- .../core/src/platform/builtInMixins/styleHelperMixin.ios.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index f8421b6ab7..ab8f2a10e2 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -26,7 +26,7 @@ const escapeMap = { ':': '_c_', ',': '_2c_', '%': '_p_', - "'": '_q_', + '\'': '_q_', '"': '_dq_', '+': '_a_', $: '_si_' From 2bc87b988b788e85cebb8764a8b57656a96fa53c Mon Sep 17 00:00:00 2001 From: hiyuki <674883329@qq.com> Date: Fri, 11 Oct 2024 17:03:09 +0800 Subject: [PATCH 13/15] fix lint --- packages/webpack-plugin/lib/react/style-helper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/react/style-helper.js b/packages/webpack-plugin/lib/react/style-helper.js index 6ce8790841..c7276b86fd 100644 --- a/packages/webpack-plugin/lib/react/style-helper.js +++ b/packages/webpack-plugin/lib/react/style-helper.js @@ -24,7 +24,7 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) { value = `global.__rpx(${matched[1]})` needStringify = false } else if (hairlineRegExp.test(value)) { - value = `global.__hairlineWidth` + value = 'global.__hairlineWidth' needStringify = false } return needStringify ? JSON.stringify(value) : value From 6594ff9b8956bd2047d24c5211505243cc5a064a Mon Sep 17 00:00:00 2001 From: hiyuki <674883329@qq.com> Date: Fri, 11 Oct 2024 17:57:31 +0800 Subject: [PATCH 14/15] rm useless routeContext value wrap --- .../core/src/platform/patch/react/getDefaultOptions.ios.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/platform/patch/react/getDefaultOptions.ios.js b/packages/core/src/platform/patch/react/getDefaultOptions.ios.js index 1228e1c996..c8885e3804 100644 --- a/packages/core/src/platform/patch/react/getDefaultOptions.ios.js +++ b/packages/core/src/platform/patch/react/getDefaultOptions.ios.js @@ -283,7 +283,7 @@ const triggerResizeEvent = (mpxProxy) => { } function usePageContext (mpxProxy, instance) { - const { pageId } = useContext(routeContext) || {} + const pageId = useContext(routeContext) instance.getPageId = () => { return pageId @@ -447,7 +447,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) { null, createElement(routeContext.Provider, { - value: { pageId: currentPageId } + value: currentPageId }, createElement(defaultOptions, { From 7444efd4988668244e0b53b45787c8705a343c92 Mon Sep 17 00:00:00 2001 From: hiyuki <674883329@qq.com> Date: Fri, 11 Oct 2024 18:05:37 +0800 Subject: [PATCH 15/15] rm useless pageConfig props --- .../core/src/platform/patch/react/getDefaultOptions.ios.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core/src/platform/patch/react/getDefaultOptions.ios.js b/packages/core/src/platform/patch/react/getDefaultOptions.ios.js index c8885e3804..12ad048939 100644 --- a/packages/core/src/platform/patch/react/getDefaultOptions.ios.js +++ b/packages/core/src/platform/patch/react/getDefaultOptions.ios.js @@ -452,8 +452,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) { createElement(defaultOptions, { navigation, - route, - pageConfig + route } ) )