fix: picker overlay

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

Hide file tree

Showing 3 changed files with 16 additions and 11 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
@@ -70,7 +70,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   const pickerItemH = useMemo(
     () => {
-      const match = (itemHeight + '').match(/^(\d+)px$/) || [0]
+      const match = (itemHeight + '').match(/\d+/g) || [0]
       return +match[0] || DefaultPickerItemH
     },
     [itemHeight]

diff --git a/packages/webpack-plugin/lib/runtime/components/react/pickerOverlay.tsx b/packages/webpack-plugin/lib/runtime/components/react/pickerOverlay.tsx
@@ -7,18 +7,24 @@ type OverlayProps = {
   overlayContainerStyle?: ViewStyle
 }
 
-const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
-  const itemWidth = overlayItemStyle?.width
-  if (typeof itemWidth === 'string') {
-    const match = itemWidth.match(/^(\d+)px$/)
+const transPx2Number = (value?: string | number) => {
+  if (typeof value === 'string') {
+    const match = value.toString().match(/\d+/g)
     if (match) {
-      overlayItemStyle!.width = +match[1]
+      return +match[0]
     }
   }
+  return value
+}
+
+const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
+  let { width, borderRadius, ...restStyle } = overlayItemStyle || {}
+  width = transPx2Number(width)
+  borderRadius = transPx2Number(borderRadius)
   return (
     <View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
       <View
-        style={[{ height: itemHeight }, styles.selection, overlayItemStyle]}
+        style={[styles.selection, { height: itemHeight, width, borderRadius }, restStyle]}
       />
     </View>
   )

diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -563,10 +563,9 @@ export const useStableCallback = <T extends AnyFunc | null | undefined>(
 
 export const usePrevious = <T, >(value: T): T | undefined => {
   const ref = useRef<T | undefined>(undefined)
-  useEffect(() => {
-    ref.current = value
-  })
-  return ref.current
+  const prev = ref.current
+  ref.current = value
+  return prev
 }
 
 export interface GestureHandler {