@mpxjs/webpack-plugin 2.9.70 → 2.9.71

package/lib/runtime/components/react/mpx-button.tsx

@@ -34,7 +34,7 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { createElement, useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
+import { createElement, useEffect, useRef, ReactNode, forwardRef, useContext, JSX } from 'react'
 import {
   View,
   StyleSheet,
@@ -45,10 +45,12 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
+import type { ExtendedViewStyle } from './types/common'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -68,7 +70,7 @@ export interface ButtonProps {
   disabled?: boolean
   loading?: boolean
   'hover-class'?: string
-  'hover-style'?: ViewStyle & TextStyle & Record<string, any>
+  'hover-style'?: ExtendedViewStyle
   'hover-start-time'?: number
   'hover-stay-time'?: number
   'open-type'?: OpenType
@@ -83,8 +85,6 @@ export interface ButtonProps {
   children: ReactNode
   bindgetuserinfo?: (userInfo: any) => void
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  bindtouchstart?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  bindtouchend?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 const LOADING_IMAGE_URI =
@@ -216,15 +216,16 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     style = {},
     children,
     bindgetuserinfo,
-    bindtap,
-    bindtouchstart,
-    bindtouchend
+    bindtap
   } = props
 
   const pageId = useContext(RouteContext)
 
   const formContext = useContext(FormContext)
 
+  const enableHover = hoverClass !== 'none'
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled })
+
   let submitFn: () => void | undefined
   let resetFn: () => void | undefined
 
@@ -233,27 +234,15 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     resetFn = formContext.reset
   }
 
-  const refs = useRef<{
-    hoverStartTimer: ReturnType<typeof setTimeout> | undefined
-    hoverStayTimer: ReturnType<typeof setTimeout> | undefined
-  }>({
-    hoverStartTimer: undefined,
-    hoverStayTimer: undefined
-  })
-
-  const [isHover, setIsHover] = useState(false)
-
   const isMiniSize = size === 'mini'
 
-  const applyHoverEffect = isHover && hoverClass !== 'none'
-
   const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]
 
-  const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color
+  const normalBackgroundColor = disabled ? disabledColor : isHover || loading ? hoverColor : color
 
   const plainBorderColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor},.6)`
       : `rgb(${plainColor})`
 
@@ -261,14 +250,14 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const plainTextColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor}, .6)`
       : `rgb(${plainColor})`
 
   const normalTextColor =
     type === 'default'
-      ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})`
-      : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})`
+      ? `rgba(0, 0, 0, ${disabled ? 0.3 : isHover || loading ? 0.6 : 1})`
+      : `rgba(255 ,255 ,255 , ${disabled || isHover || loading ? 0.6 : 1})`
 
   const viewStyle = {
     borderWidth: 1,
@@ -297,7 +286,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     {},
     defaultStyle,
     style,
-    applyHoverEffect ? hoverStyle : {}
+    isHover ? hoverStyle : {}
   )
 
   const {
@@ -366,34 +355,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   }
 
-  const setStayTimer = () => {
-    clearTimeout(refs.current.hoverStayTimer)
-    refs.current.hoverStayTimer = setTimeout(() => {
-      setIsHover(false)
-      clearTimeout(refs.current.hoverStayTimer)
-    }, hoverStayTime)
-  }
-
-  const setStartTimer = () => {
-    clearTimeout(refs.current.hoverStartTimer)
-    refs.current.hoverStartTimer = setTimeout(() => {
-      setIsHover(true)
-      clearTimeout(refs.current.hoverStartTimer)
-    }, hoverStartTime)
-  }
-
-  const onTouchStart = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    bindtouchstart && bindtouchstart(evt)
-    if (disabled) return
-    setStartTimer()
-  }
-
-  const onTouchEnd = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    bindtouchend && bindtouchend(evt)
-    if (disabled) return
-    setStayTimer()
-  }
-
   const handleFormTypeFn = () => {
     if (formType === 'submit') {
       submitFn && submitFn()
@@ -418,8 +379,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       },
       layoutProps,
       {
-        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
-        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
         bindtap: !disabled && onTap
       }
     ),
@@ -442,7 +401,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   )
 
-  return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
+  const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
     wrapChildren(
       props,
       {
@@ -453,6 +412,10 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       }
     )
   )
+
+  return enableHover
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, baseButton)
+    : baseButton
 })
 
 Button.displayName = 'MpxButton'

package/lib/runtime/components/react/mpx-movable-view.tsx

@@ -11,7 +11,7 @@
  * ✘ scale-min
  * ✘ scale-max
  * ✘ scale-value
- * ✘ animation
+ * ✔ animation
  * ✔ bindchange
  * ✘ bindscale
  * ✔ htouchmove
@@ -19,10 +19,10 @@
  */
 import { useEffect, forwardRef, ReactNode, useContext, useCallback, useRef, useMemo, createElement } from 'react'
 import { StyleSheet, NativeSyntheticEvent, View, LayoutChangeEvent } from 'react-native'
-import { getCustomEvent } from './getInnerListeners'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { MovableAreaContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject } from './utils'
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject, omit } from './utils'
 import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, PanGestureHandlerEventPayload, PanGesture } from 'react-native-gesture-handler'
 import Animated, {
   useSharedValue,
@@ -33,6 +33,7 @@ import Animated, {
   useAnimatedReaction,
   withSpring
 } from 'react-native-reanimated'
+import { collectDataset, noop } from '@mpxjs/utils'
 
 interface MovableViewProps {
   children: ReactNode;
@@ -42,17 +43,22 @@ interface MovableViewProps {
   y?: number;
   disabled?: boolean;
   animation?: boolean;
+  id?: string;
   bindchange?: (event: unknown) => void;
-  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  catchtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  catchtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  catchtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindhtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindvtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  catchhtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  catchvtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  bindtouchstart?: (event: GestureTouchEvent) => void;
+  catchtouchstart?: (event: GestureTouchEvent) => void;
+  bindtouchmove?: (event: GestureTouchEvent) => void;
+  catchtouchmove?: (event: GestureTouchEvent) => void;
+  catchtouchend?: (event: GestureTouchEvent) => void;
+  bindtouchend?: (event: GestureTouchEvent) => void;
+  bindhtouchmove?: (event: GestureTouchEvent) => void;
+  bindvtouchmove?: (event: GestureTouchEvent) => void;
+  catchhtouchmove?: (event: GestureTouchEvent) => void;
+  catchvtouchmove?: (event: GestureTouchEvent) => void;
+  bindlongpress?: (event: GestureTouchEvent) => void;
+  catchlongpress?: (event: GestureTouchEvent) => void;
+  bindtap?: (event: GestureTouchEvent) => void;
+  catchtap?: (event: GestureTouchEvent) => void;
   onLayout?: (event: LayoutChangeEvent) => void;
   'out-of-bounds'?: boolean;
   'wait-for'?: Array<GestureHandler>;
@@ -153,10 +159,10 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   })
 
   const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
-  (originSimultaneousHandlers || []).some((handler, index) => handler !== prevSimultaneousHandlersRef.current[index])
+    (originSimultaneousHandlers || []).some((handler, index) => handler !== prevSimultaneousHandlersRef.current[index])
 
   const hasWaitForHandlersChanged = prevWaitForHandlersRef.current.length !== (waitFor?.length || 0) ||
-  (waitFor || []).some((handler, index) => handler !== prevWaitForHandlersRef.current[index])
+    (waitFor || []).some((handler, index) => handler !== prevWaitForHandlersRef.current[index])
 
   if (hasSimultaneousHandlersChanged || hasWaitForHandlersChanged) {
     gestureSwitch.current = !gestureSwitch.current
@@ -333,8 +339,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     props.onLayout && props.onLayout(e)
   }
 
-  const extendEvent = useCallback((e: any) => {
-    'worklet'
+  const extendEvent = useCallback((e: any, obj?: Record<string, any>) => {
     const touchArr = [e.changedTouches, e.allTouches]
     touchArr.forEach(touches => {
       touches && touches.forEach((item: { absoluteX: number; absoluteY: number; pageX: number; pageY: number }) => {
@@ -342,48 +347,69 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         item.pageY = item.absoluteY
       })
     })
-    e.touches = e.allTouches
+    Object.assign(e, {
+      touches: e.allTouches,
+      detail: {
+        x: e.changedTouches[0].absoluteX,
+        y: e.changedTouches[0].absoluteY
+      },
+      currentTarget: {
+        id: props.id || '',
+        dataset: collectDataset(props),
+        offsetLeft: 0,
+        offsetTop: 0
+      }
+    }, obj)
   }, [])
 
-  const gesture = useMemo(() => {
-    const handleTriggerStart = (e: any) => {
-      'worklet'
-      extendEvent(e)
-      bindtouchstart && runOnJS(bindtouchstart)(e)
-      catchtouchstart && runOnJS(catchtouchstart)(e)
-    }
-
-    const handleTriggerMove = (e: any) => {
-      'worklet'
-      extendEvent(e)
-      const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove
-      const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove
+  const triggerStartOnJS = ({ e }: { e: GestureTouchEvent }) => {
+    extendEvent(e)
+    bindtouchstart && bindtouchstart(e)
+    catchtouchstart && catchtouchstart(e)
+  }
 
-      if (hasTouchmove) {
-        if (touchEvent.value === 'htouchmove') {
-          bindhtouchmove && runOnJS(bindhtouchmove)(e)
-        } else if (touchEvent.value === 'vtouchmove') {
-          bindvtouchmove && runOnJS(bindvtouchmove)(e)
-        }
-        bindtouchmove && runOnJS(bindtouchmove)(e)
+  const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }: { e: GestureTouchEvent; hasTouchmove: boolean; hasCatchTouchmove: boolean; touchEvent: string }) => {
+    extendEvent(e)
+    if (hasTouchmove) {
+      if (touchEvent === 'htouchmove') {
+        bindhtouchmove && bindhtouchmove(e)
+      } else if (touchEvent === 'vtouchmove') {
+        bindvtouchmove && bindvtouchmove(e)
       }
+      bindtouchmove && bindtouchmove(e)
+    }
 
-      if (hasCatchTouchmove) {
-        if (touchEvent.value === 'htouchmove') {
-          catchhtouchmove && runOnJS(catchhtouchmove)(e)
-        } else if (touchEvent.value === 'vtouchmove') {
-          catchvtouchmove && runOnJS(catchvtouchmove)(e)
-        }
-        catchtouchmove && runOnJS(catchtouchmove)(e)
+    if (hasCatchTouchmove) {
+      if (touchEvent === 'htouchmove') {
+        catchhtouchmove && catchhtouchmove(e)
+      } else if (touchEvent === 'vtouchmove') {
+        catchvtouchmove && catchvtouchmove(e)
       }
+      catchtouchmove && catchtouchmove(e)
     }
+  }
+
+  const triggerEndOnJS = ({ e }: { e: GestureTouchEvent }) => {
+    extendEvent(e)
+    bindtouchend && bindtouchend(e)
+    catchtouchend && catchtouchend(e)
+  }
 
-    const handleTriggerEnd = (e: any) => {
+  const gesture = useMemo(() => {
+    const handleTriggerMove = (e: GestureTouchEvent) => {
       'worklet'
-      extendEvent(e)
-      bindtouchend && runOnJS(bindtouchend)(e)
-      catchtouchend && runOnJS(catchtouchend)(e)
+      const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove
+      const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove
+      if (hasTouchmove || hasCatchTouchmove) {
+        runOnJS(triggerMoveOnJS)({
+          e,
+          touchEvent: touchEvent.value,
+          hasTouchmove,
+          hasCatchTouchmove
+        })
+      }
     }
+
     const gesturePan = Gesture.Pan()
       .onTouchesDown((e: GestureTouchEvent) => {
         'worklet'
@@ -393,12 +419,14 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           x: changedTouches.x,
           y: changedTouches.y
         }
-        handleTriggerStart(e)
+        if (bindtouchstart || catchtouchstart) {
+          runOnJS(triggerStartOnJS)({ e })
+        }
       })
       .onTouchesMove((e: GestureTouchEvent) => {
         'worklet'
-        isMoving.value = true
         const changedTouches = e.changedTouches[0] || { x: 0, y: 0 }
+        isMoving.value = true
         if (isFirstTouch.value) {
           touchEvent.value = Math.abs(changedTouches.x - startPosition.value.x) > Math.abs(changedTouches.y - startPosition.value.y) ? 'htouchmove' : 'vtouchmove'
           isFirstTouch.value = false
@@ -430,7 +458,9 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         'worklet'
         isFirstTouch.value = true
         isMoving.value = false
-        handleTriggerEnd(e)
+        if (bindtouchend || catchtouchend) {
+          runOnJS(triggerEndOnJS)({ e })
+        }
         if (disabled) return
         if (!inertia) {
           const { x, y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: offsetY.value })
@@ -454,8 +484,8 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       })
       .onFinalize((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
-        if (!inertia || disabled || !animation) return
         isMoving.value = false
+        if (!inertia || disabled || !animation) return
         if (direction === 'horizontal' || direction === 'all') {
           xInertialMotion.value = true
           offsetX.value = withDecay({
@@ -497,35 +527,50 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     }
   })
 
-  const injectCatchEvent = (props: Record<string, any>) => {
-    const eventHandlers: Record<string, any> = {}
-    const catchEventList = [
-      { name: 'onTouchStart', value: ['catchtouchstart'] },
-      { name: 'onTouchMove', value: ['catchtouchmove', 'catchvtouchmove', 'catchhtouchmove'] },
-      { name: 'onTouchEnd', value: ['catchtouchend'] }
+  const rewriteCatchEvent = () => {
+    const handlers: Record<string, typeof noop> = {}
+
+    const events = [
+      { type: 'touchstart' },
+      { type: 'touchmove', alias: ['vtouchmove', 'htouchmove'] },
+      { type: 'touchend' }
     ]
-    catchEventList.forEach(event => {
-      event.value.forEach(name => {
-        if (props[name] && !eventHandlers[event.name]) {
-          eventHandlers[event.name] = (e: NativeSyntheticEvent<TouchEvent>) => {
-            e.stopPropagation()
-          }
-        }
-      })
+    events.forEach(({ type, alias = [] }) => {
+      const hasCatchEvent =
+        props[`catch${type}` as keyof typeof props] ||
+        alias.some(name => props[`catch${name}` as keyof typeof props])
+      if (hasCatchEvent) handlers[`catch${type}`] = noop
     })
-    return eventHandlers
+
+    return handlers
   }
 
-  const catchEventHandlers = injectCatchEvent(props)
   const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}
 
+  // bind 相关 touch 事件直接由 gesture 触发，无须重复挂载
+  // catch 相关 touch 事件需要重写并通过 useInnerProps 注入阻止冒泡逻辑
+  const filterProps = omit(props, [
+    'bindtouchstart',
+    'bindtouchmove',
+    'bindvtouchmove',
+    'bindhtouchmove',
+    'bindtouchend',
+    'catchtouchstart',
+    'catchtouchmove',
+    'catchvtouchmove',
+    'catchhtouchmove',
+    'catchtouchend'
+  ])
+
+  const innerProps = useInnerProps(filterProps, extendObject({
+    ref: nodeRef,
+    onLayout: onLayout,
+    style: [innerStyle, animatedStyles, layoutStyle]
+  }, rewriteCatchEvent()))
+
   return createElement(GestureDetector, { gesture: gesture }, createElement(
     Animated.View,
-    extendObject({
-      ref: nodeRef,
-      onLayout: onLayout,
-      style: [innerStyle, animatedStyles, layoutStyle]
-    }, catchEventHandlers),
+    innerProps,
     wrapChildren(
       props,
       {

package/lib/runtime/components/react/mpx-navigator.tsx

@@ -24,7 +24,7 @@ const _Navigator = forwardRef<View, _NavigatorProps>((props, ref): JSX.Element =
   const {
     children,
     'open-type': openType,
-    url,
+    url = '',
     delta
   } = props
 

package/lib/runtime/components/react/mpx-picker-view-column-item.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react'
+import { LayoutChangeEvent } from 'react-native'
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+import { wrapChildren, extendObject } from './utils'
+import { createFaces } from './pickerFaces'
+import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from './pickerVIewContext'
+
+interface PickerColumnItemProps {
+  item: React.ReactElement
+  index: number
+  itemHeight: number
+  itemWidth?: number | '100%'
+  textStyle: Record<string, any>
+  visibleCount: number
+  textProps?: any
+  onItemLayout?: (e: LayoutChangeEvent) => void
+}
+
+const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
+  item,
+  index,
+  itemHeight,
+  itemWidth = '100%',
+  textStyle,
+  textProps,
+  visibleCount,
+  onItemLayout
+}) => {
+  const textStyleFromAncestor = usePickerViewStyleContext()
+  const offsetYShared = usePickerViewColumnAnimationContext()
+  const facesShared = useSharedValue(createFaces(itemHeight, visibleCount))
+
+  useEffect(() => {
+    facesShared.value = createFaces(itemHeight, visibleCount)
+  }, [itemHeight])
+
+  const animatedStyles = useAnimatedStyle(() => {
+    const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index))
+    return {
+      opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
+      transform: [
+        { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
+        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+        { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
+      ]
+    }
+  })
+
+  const strKey = `picker-column-item-${index}`
+  const restProps = index === 0 ? { onLayout: onItemLayout } : {}
+  const itemProps = extendObject(
+    {
+      style: extendObject(
+        { height: itemHeight, width: '100%' },
+        textStyleFromAncestor,
+        textStyle,
+        item.props.style
+      )
+    },
+    textProps,
+    restProps
+  )
+  const realItem = React.cloneElement(item, itemProps)
+
+  return (
+    <Reanimated.View
+      key={strKey}
+      style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}
+    >
+      {realItem}
+    </Reanimated.View>
+  )
+}
+
+PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem'
+export default PickerViewColumnItem