fix: picker overlay style

didi · Nov 26, 2024 · 19d636f · 19d636f
1 parent 229c801
commit 19d636f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
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
@@ -4,6 +4,7 @@ import React, { forwardRef, useRef, useState, useMemo, useCallback, useEffect }
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, usePrevious } from './utils'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { createFaces } from './pickerFaces'
+import PickerOverlay from './pickerOverlay'
 
 interface ColumnProps {
   children?: React.ReactNode
@@ -21,6 +22,7 @@ interface ColumnProps {
     height: number
     itemHeight: string
   }
+  pickerOverlayStyle: Record<string, any>
   columnIndex: number
 }
 
@@ -39,6 +41,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     getInnerLayout,
     style,
     wrapperStyle,
+    pickerOverlayStyle,
     'enable-var': enableVar,
     'external-var-context': externalVarContext
   } = props
@@ -65,6 +68,14 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   const prevMaxIndex = usePrevious(maxIndex)
   const activeIndex = useRef(initialIndex)
 
+  const pickerItemH = useMemo(
+    () => {
+      const match = (itemHeight + '').match(/^(\d+)px$/) || [0]
+      return +match[0] || DefaultPickerItemH
+    },
+    [itemHeight]
+  )
+
   const initialOffset = useMemo(() => ({
     x: 0,
     y: itemRawH * initialIndex
@@ -207,16 +218,14 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     columnData.map((item: React.ReactNode, index: number) => {
       const InnerProps = index === 0 ? { onLayout: onItemLayout } : {}
       const strKey = `picker-column-${columnIndex}-${index}`
-      const match = (itemHeight + '').match(/\d+/g) || [0]
-      const iHeight = +match[0] || DefaultPickerItemH
       const { opacity, rotateX, translateY } = getTransform(index)
       return (
         <Animated.View
           key={strKey}
           {...InnerProps}
           style={[
             {
-              height: iHeight,
+              height: pickerItemH,
               width: '100%',
               opacity,
               transform: [
@@ -269,9 +278,14 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     )
   }
 
+  const renderOverlay = () => (
+    <PickerOverlay itemHeight={pickerItemH} overlayItemStyle={pickerOverlayStyle} />
+  )
+
   return (
     <SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
       {renderScollView()}
+      {renderOverlay()}
     </SafeAreaView>
   )
 })

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
@@ -13,7 +13,6 @@ import {
   useStableCallback
 } from './utils'
 import type { AnyFunc } from './types/common'
-import PickerOverlay from './pickerOverlay'
 /**
  * ✔ value
  * ✔ bindchange
@@ -76,7 +75,6 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
   const indicatorStyle = parseInlineStyle(props['indicator-style'])
   const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle
-  const showOverlay = Object.keys(indicatorStyle).length === 0
   const [pickMaxH, setPickMaxH] = useState(0)
   const nodeRef = useRef(null)
   const cloneRef = useRef(null)
@@ -162,6 +160,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
       onColumnItemRawHChange,
       onSelectChange: onSelectChange.bind(null, index),
       initialIndex,
+      pickerOverlayStyle,
       ...extraProps
     }
     const realElement = React.cloneElement(child, wrappedProps)
@@ -209,14 +208,9 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     return renderColumns
   }
 
-  const renderOverlay = () => (
-    <PickerOverlay itemHeight={pickMaxH} overlayItemStyle={pickerOverlayStyle} />
-  )
-
   return (
     <View {...innerProps}>
       <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
-      {showOverlay && renderOverlay()}
     </View>
   )
 })

diff --git a/packages/webpack-plugin/lib/runtime/components/react/pickerOverlay.tsx b/packages/webpack-plugin/lib/runtime/components/react/pickerOverlay.tsx
@@ -1,17 +1,24 @@
 import React from 'react'
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { StyleSheet, View, ViewStyle } from 'react-native'
 
 type OverlayProps = {
   itemHeight: number
-  overlayItemStyle?: StyleProp<ViewStyle>
-  overlayContainerStyle?: StyleProp<ViewStyle>
+  overlayItemStyle?: Record<string, any>
+  overlayContainerStyle?: ViewStyle
 }
 
 const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
+  const itemWidth = overlayItemStyle?.width
+  if (typeof itemWidth === 'string') {
+    const match = itemWidth.match(/^(\d+)px$/)
+    if (match) {
+      overlayItemStyle!.width = +match[1]
+    }
+  }
   return (
     <View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
       <View
-        style={[styles.selection, { height: itemHeight }, overlayItemStyle]}
+        style={[{ height: itemHeight }, styles.selection, overlayItemStyle]}
       />
     </View>
   )
@@ -24,15 +31,9 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   selection: {
-    // 浅灰透明条效果
-    // opacity: 0.05,
-    // backgroundColor: '#000',
-    // borderRadius: 8,
-    // 默认样式和微信对齐
     borderTopWidth: 1,
     borderBottomWidth: 1,
     borderColor: 'rgba(0, 0, 0, 0.05)',
-    borderRadius: 0,
     alignSelf: 'stretch'
   }
 })