From 72e0f6b89dc962d151993cc89fea0ed4e985258d Mon Sep 17 00:00:00 2001 From: luyongfang Date: Fri, 11 Oct 2024 14:30:15 +0800 Subject: [PATCH] fix: picker linear tsc --- package.json | 10 ++++-- .../react/mpx-picker-view-column.tsx | 24 +++++++++---- .../components/react/mpx-picker-view.tsx | 36 ++++++++++--------- 3 files changed, 45 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 41d831e2c9..cad1d9f705 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "@docsearch/js": "^3.0.0", "@testing-library/jest-dom": "^4.2.4", "@types/jest": "^27.0.1", + "@typescript-eslint/eslint-plugin": "^5.2.0", + "@typescript-eslint/parser": "^5.2.0", "@vuepress/plugin-back-to-top": "^1.8.2", "@vuepress/plugin-pwa": "^1.8.0", "eslint": "^7.32.0", @@ -30,8 +32,6 @@ "eslint-plugin-jest": "^27.0.1", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^5.1.1", - "@typescript-eslint/eslint-plugin": "^5.2.0", - "@typescript-eslint/parser": "^5.2.0", "identity-obj-proxy": "^3.0.0", "jest": "^27.2.0", "lerna": "^8.1.8", @@ -40,5 +40,9 @@ }, "workspaces": [ "packages/*" - ] + ], + "dependencies": { + "@types/react": "^18.3.11", + "react-native-linear-gradient": "^2.8.3" + } } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx index 95070bbd6f..b641d76745 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column.tsx @@ -1,6 +1,6 @@ -import { View, Animated, SafeAreaView, NativeScrollEvent, NativeSyntheticEvent, Platform } from 'react-native' -import React, { forwardRef, useRef, useState, useEffect } from 'react' +import { View, Animated, SafeAreaView, NativeScrollEvent, NativeSyntheticEvent, LayoutChangeEvent, ScrollView } from 'react-native' +import React, { forwardRef, useRef, useState, useEffect, ReactElement } from 'react' // import { Reanimated } from 'react-native-reanimated'; import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数 interface ColumnProps { @@ -18,7 +18,7 @@ interface ColumnProps { // 每个Column 都有个外层的高度, 内部的元素高度 // 默认的高度 // const AnimatedScrollView = Reanimated.createAnimatedComponent(ScrollView); -const _PickerViewColumn = forwardRef, ColumnProps>((props: ColumnProps, ref) => { +const _PickerViewColumn = forwardRef, ColumnProps>((props: ColumnProps, ref) => { const { children, selectedIndex, onColumnLayoutChange, onSelectChange, getInnerLayout, wrapperStyle } = props // scrollView的ref const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {}) @@ -43,7 +43,7 @@ const _PickerViewColumn = forwardRef, ColumnProps> }) } - const onItemLayout = (e: NativeSyntheticEvent) => { + const onItemLayout = (e: LayoutChangeEvent) => { const layout = e.nativeEvent.layout if (layout.height && itemH !== layout.height) { itemH = layout.height @@ -62,7 +62,20 @@ const _PickerViewColumn = forwardRef, ColumnProps> const renderInnerchild = () => { // Fragment 节点 - const realChilds = Array.isArray(children) ? children : (children.props?.children && Array.isArray(children.props?.children) ? children.props.children : [children]) + const getRealChilds = () => { + if (Array.isArray(children)) { + return children + } else { + const tempChild = children as ReactElement + if (tempChild.props.children && tempChild.props.children) { + return tempChild.props.children + } else { + return [children] + } + } + } + // const realChilds = Array.isArray(children) ? children : (children?.props?.children && Array.isArray(children.props?.children) ? children.props.children : [children]) + const realChilds = getRealChilds() const arrChild = realChilds.map((item: React.ReactNode, index: number) => { const InnerProps = index === 0 ? { onLayout: onItemLayout } : {} const strKey = 'picker' + props.prefix + '-column' + index @@ -99,7 +112,6 @@ const _PickerViewColumn = forwardRef, ColumnProps> showsVerticalScrollIndicator={false} pagingEnabled={false} snapToInterval={itemH} - contentContainerStyle={contentContainerStyle} automaticallyAdjustContentInsets={false} onLayout={onScrollViewLayout} onMomentumScrollEnd={onMomentumScrollEnd}> diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx index 8b30fd45ba..1115248aae 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx @@ -1,6 +1,6 @@ import { View } from 'react-native' -import LinearGradient from 'react-native-linear-gradient' -import React, { forwardRef, MutableRefObject, useState, useRef } from 'react' +import { LinearGradient, LinearGradientProps } from 'react-native-linear-gradient' +import React, { forwardRef, MutableRefObject, useState, useRef, ReactElement, JSX } from 'react' import useInnerProps, { getCustomEvent } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数 /** @@ -80,16 +80,16 @@ const _PickerView = forwardRef, PickerViewProp const onSelectChange = (columnIndex: number, selIndex: number) => { const changeValue = value.slice() changeValue[columnIndex] = selIndex - const eventData = getCustomEvent('change', {}, { detail: { value: changeValue, source: 'change' }, layoutRef: {} }) + const eventData = getCustomEvent('change', {}, { detail: { value: changeValue, source: 'change' }, layoutRef: innerLayout }) bindchange && bindchange(eventData) } - + /* const onWrapperLayout = () => { wrapRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => { const a = { x, y, width, height, offsetLeft, offsetTop } }) } - + */ const getInnerLayout = (layout: MutableRefObject<{}>) => { innerLayout.current = layout.current } @@ -99,7 +99,7 @@ const _PickerView = forwardRef, PickerViewProp const cloneChild = (child: React.ReactNode, index: number) => { const extraProps = index === 0 ? { getInnerLayout: getInnerLayout, innerProps } : {} const childProps = { - ...child?.props, + ...(child as ReactElement)?.props, ref: cloneRef, prefix: index, key: 'pick-view' + index, @@ -111,33 +111,37 @@ const _PickerView = forwardRef, PickerViewProp selectedIndex: value?.[index] || 0, ...extraProps } - return React.cloneElement(child, childProps) + return React.cloneElement(child as ReactElement, childProps) } const renderTopMask = () => { - return - + ] + } + return () } const renderBottomMask = () => { - return - + ] + } + return } const renderSubChild = () => { @@ -149,7 +153,7 @@ const _PickerView = forwardRef, PickerViewProp return cloneChild(children, 0) } } - return ( + return ( {renderTopMask()} {renderSubChild()}