fix: picker linear tsc

didi · Oct 11, 2024 · 72e0f6b · 72e0f6b
1 parent a6afd30
commit 72e0f6b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 25 deletions.
diff --git 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
@@ -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<HandlerRef<View, ColumnProps>, ColumnProps>((props: ColumnProps, ref) => {
+const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>, 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<HandlerRef<View, ColumnProps>, ColumnProps>
     })
   }
 
-  const onItemLayout = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+  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<HandlerRef<View, ColumnProps>, 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<HandlerRef<View, ColumnProps>, 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
@@ -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<HandlerRef<View, PickerViewProps>, 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<HandlerRef<View, PickerViewProps>, 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<HandlerRef<View, PickerViewProps>, PickerViewProp
       selectedIndex: value?.[index] || 0,
       ...extraProps
     }
-    return React.cloneElement(child, childProps)
+    return React.cloneElement(child as ReactElement, childProps)
   }
 
   const renderTopMask = () => {
-    return <LinearGradient colors={['rgba(255,255,255,0.8)', 'rgba(255,255,255,0.2)']}
-      style={[
+    const linearProps: LinearGradientProps = {
+      colors: ['rgba(255,255,255,0.8)', 'rgba(255,255,255,0.2)'],
+      style: [
         styles.maskTop,
         {
           height: maskPos.height,
           top: 0,
           pointerEvents: 'none'
         }
-      ]}>
-      </LinearGradient>
+      ]
+    }
+    return (<LinearGradient {...linearProps}/>)
   }
 
   const renderBottomMask = () => {
-    return <LinearGradient colors={['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.8)']}
-      style={[
+    const linearProps: LinearGradientProps = {
+      colors: ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.8)'],
+      style: [
         styles.maskBottom,
         {
           height: maskPos.height,
           bottom: 0,
           pointerEvents: 'none'
         }
-      ]}>
-    </LinearGradient>
+      ]
+    }
+    return <LinearGradient {...linearProps}></LinearGradient>
   }
 
   const renderSubChild = () => {
@@ -149,7 +153,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
       return cloneChild(children, 0)
     }
   }
-  return (<View style={[style, { position: 'relative', overflow: 'hidden' }]} onLayout={onWrapperLayout} ref={wrapRef}>
+  return (<View style={[style, { position: 'relative', overflow: 'hidden' }]} ref={wrapRef}>
     {renderTopMask()}
     <View style={[styles.wrapper]}>
       {renderSubChild()}