@mpxjs/webpack-plugin 2.9.69-beta.2 → 2.9.69-beta.3

package/lib/index.js

@@ -54,13 +54,11 @@ const wxssLoaderPath = normalize.lib('wxss/index')
 const wxmlLoaderPath = normalize.lib('wxml/loader')
 const wxsLoaderPath = normalize.lib('wxs/loader')
 const styleCompilerPath = normalize.lib('style-compiler/index')
-const styleStripConditaionalPath = normalize.lib('style-compiler/strip-conditional-loader')
 const templateCompilerPath = normalize.lib('template-compiler/index')
 const jsonCompilerPath = normalize.lib('json-compiler/index')
 const jsonThemeCompilerPath = normalize.lib('json-compiler/theme')
 const jsonPluginCompilerPath = normalize.lib('json-compiler/plugin')
 const extractorPath = normalize.lib('extractor')
-const selectorPath = normalize.lib('selector')
 const async = require('async')
 const { parseQuery } = require('loader-utils')
 const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource')
@@ -1777,7 +1775,7 @@ try {
       })
 
       const typeLoaderProcessInfo = {
-        styles: ['node_modules/css-loader', wxssLoaderPath, styleCompilerPath, styleStripConditaionalPath],
+        styles: ['node_modules/css-loader', wxssLoaderPath, styleCompilerPath],
         template: ['node_modules/html-loader', wxmlLoaderPath, templateCompilerPath]
       }
 
@@ -1835,20 +1833,6 @@ try {
               loader: extractorPath
             })
           }
-          if (type === 'styles') {
-            // 判断最后一个loader是否是 selectorPath, 如果是，则在sectorPath之前插入strip-conditional
-            const lastLoader = loaders[loaders.length - 1]
-            if (lastLoader.loader.includes(selectorPath)) {
-              loaders.splice(loaders.length - 1, 0, {
-                loader: styleStripConditaionalPath
-              })
-            } else {
-              // 在最后一个插入strip-conditional
-              loaders.push({
-                loader: styleStripConditaionalPath
-              })
-            }
-          }
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }
         // mpxStyleOptions 为 mpx style 文件的标识，避免 Vue 文件插入 styleCompiler 后导致 vue scoped 样式隔离失效

package/lib/platform/style/wx/index.js

@@ -374,11 +374,11 @@ module.exports = function getSpec ({ warn, error }) {
   // transform 转换
   const formatTransform = ({ prop, value, selector }, { mode }) => {
     // css var & 数组直接返回
-    if (Array.isArray(value) || cssVariableExp.test(value)) return { prop, value }
+    if (Array.isArray(value) || calcExp.test(value)) return { prop, value }
     const values = parseValues(value)
     const transform = []
     values.forEach(item => {
-      const match = item.match(/([/\w]+)\((.+)\)/)
+      const match = item.match(/([/\w]+)\(([^)]+)\)/)
       if (match && match.length >= 3) {
         let key = match[1]
         const val = match[2]
@@ -407,23 +407,23 @@ module.exports = function getSpec ({ warn, error }) {
           case 'rotate3d': // x y z angle
           case 'translate3d': // x y 支持 z不支持
           case 'scale3d': // x y 支持 z不支持
-          {
-            // 2 个以上的值处理
-            key = key.replace('3d', '')
-            const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
-            // scale(.5) === scaleX(.5) scaleY(.5)
-            if (vals.length === 1 && key === 'scale') {
-              vals.push(vals[0])
-            }
-            const xyz = ['X', 'Y', 'Z']
-            transform.push(...vals.map((v, index) => {
-              if (key !== 'rotate' && index > 1) {
-                unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
+            {
+              // 2 个以上的值处理
+              key = key.replace('3d', '')
+              const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
+              // scale(.5) === scaleX(.5) scaleY(.5)
+              if (vals.length === 1 && key === 'scale') {
+                vals.push(vals[0])
               }
-              return { [`${key}${xyz[index] || ''}`]: v.trim() }
-            }))
-            break
-          }
+              const xyz = ['X', 'Y', 'Z']
+              transform.push(...vals.map((v, index) => {
+                if (key !== 'rotate' && index > 1) {
+                  unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
+                }
+                return { [`${key}${xyz[index] || ''}`]: v.trim() }
+              }))
+              break
+            }
           case 'translateZ':
           case 'scaleZ':
           default:

package/lib/platform/template/wx/component-config/movable-view.js

@@ -2,8 +2,6 @@ const TAG_NAME = 'movable-view'
 
 module.exports = function ({ print }) {
   const aliEventLog = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
-  const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
-  const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
@@ -29,7 +27,7 @@ module.exports = function ({ print }) {
         android: androidPropLog
       },
       {
-        test: /^(damping|friction|scale|scale-min|scale-max|scale-value)$/,
+        test: /^(inertia|damping|animation)$/,
         ios: iosPropLog,
         android: androidPropLog
       }
@@ -38,11 +36,6 @@ module.exports = function ({ print }) {
       {
         test: /^(htouchmove|vtouchmove)$/,
         ali: aliEventLog
-      },
-      {
-        test: /^(bindscale)$/,
-        ios: iosEventLog,
-        android: androidEventLog
       }
     ]
   }

package/lib/platform/template/wx/component-config/scroll-view.js

@@ -53,7 +53,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(refresher-threshold|enable-passive|scroll-anchoring|using-sticky|fast-deceleration|enable-flex)$/,
+        test: /^(scroll-into-view|refresher-threshold|enable-passive|scroll-anchoring|using-sticky|fast-deceleration|enable-flex)$/,
         android: androidPropLog,
         ios: iosPropLog
       },

package/lib/resolver/AddEnvPlugin.js

@@ -34,7 +34,6 @@ module.exports = class AddEnvPlugin {
       if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
       const queryObj = parseQuery(request.query || '?')
       queryObj.infix = `${queryObj.infix || ''}.${env}`
-      // css | stylus | less | sass 中 import file 过滤query，避免在对应的 loader 中无法读取到文件
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, env, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, env, extname)

package/lib/resolver/AddModePlugin.js

@@ -43,7 +43,6 @@ module.exports = class AddModePlugin {
       resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
         if (defaultMode && !result) {
           queryObj.infix = `${queryInfix || ''}.${defaultMode}`
-          // css | stylus | less | sass 中 import file 过滤query，避免在对应的 loader 中无法读取到文件
           obj.query = stringifyQuery(queryObj)
           obj.path = addInfix(resourcePath, defaultMode, extname)
           resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + defaultMode, resolveContext, (err, result) => {

package/lib/runtime/components/react/context.ts

@@ -33,10 +33,6 @@ export interface IntersectionObserver {
   }
 }
 
-export interface ScrollViewContextValue {
-   gestureRef: React.RefObject<any> | null
-}
-
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -55,8 +51,4 @@ export const IntersectionObserverContext = createContext<IntersectionObserver |
 
 export const RouteContext = createContext<number | null>(null)
 
-export const SwiperContext = createContext({})
-
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
-
-export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })

package/lib/runtime/components/react/getInnerListeners.ts

@@ -289,6 +289,7 @@ const useInnerProps = (
   const eventConfig: { [key: string]: string[] } = {}
   const config = rawConfig || {
     layoutRef: { current: {} },
+    disableTouch: false,
     disableTap: false
   }
   const removeProps = [
@@ -316,10 +317,11 @@ const useInnerProps = (
     }
   }
 
+  if (!rawEventKeys.length || config.disableTouch) {
+    return omit(propsRef.current, removeProps)
+  }
+
   const events = useMemo(() => {
-    if (!rawEventKeys.length) {
-      return {}
-    }
     const transformedEventKeys = rawEventKeys.reduce((acc: string[], key) => {
       if (propsRef.current[key]) {
         return acc.concat(eventConfig[key])

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

@@ -149,7 +149,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
-    'adjust-position': adjustPosition = false,
+    'adjust-position': adjustPosition = true,
     bindinput,
     bindfocus,
     bindblur,

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

@@ -11,7 +11,7 @@
  * ✘ scale-min
  * ✘ scale-max
  * ✘ scale-value
- * ✔ animation
+ * ✘ animation
  * ✔ bindchange
  * ✘ bindscale
  * ✔ htouchmove

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

@@ -1,18 +1,17 @@
-import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
-import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
-import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, useDebounceCallback, useStableCallback, isIOS } from './utils'
+
+import { View, Animated, SafeAreaView, NativeScrollEvent, NativeSyntheticEvent, LayoutChangeEvent, ScrollView } from 'react-native'
+import React, { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react'
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, usePrevious } from './utils'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import PickerOverlay from './pickerViewOverlay'
-import PickerMask from './pickerViewMask'
-import MpxPickerVIewColumnItem from './mpx-picker-view-column-item'
-import { PickerViewColumnAnimationContext } from './pickerVIewContext'
+import { createFaces } from './pickerFaces'
+import PickerOverlay from './pickerOverlay'
 
 interface ColumnProps {
   children?: React.ReactNode
   columnData: React.ReactNode[]
-  columnStyle: Record<string, any>
   initialIndex: number
+  onColumnItemRawHChange: Function
+  getInnerLayout: Function
   onSelectChange: Function
   style: {
     [key: string]: any
@@ -23,23 +22,25 @@ interface ColumnProps {
     height: number
     itemHeight: number
   }
-  pickerMaskStyle: Record<string, any>
   pickerOverlayStyle: Record<string, any>
   columnIndex: number
 }
 
+// 默认的单个选项高度
+const DefaultPickerItemH = 36
+// 默认一屏可见选项个数
 const visibleCount = 5
 
 const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>, ColumnProps>((props: ColumnProps, ref) => {
   const {
     columnData,
     columnIndex,
-    columnStyle,
     initialIndex,
     onSelectChange,
+    onColumnItemRawHChange,
+    getInnerLayout,
     style,
     wrapperStyle,
-    pickerMaskStyle,
     pickerOverlayStyle,
     'enable-var': enableVar,
     'external-var-context': externalVarContext
@@ -53,42 +54,27 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext })
-  const { textStyle: textStyleFromParent = {} } = splitStyle(columnStyle)
-  const { textStyle = {} } = splitStyle(normalStyle)
+  const { textStyle } = splitStyle(normalStyle)
   const { textProps } = splitProps(props)
-  const scrollViewRef = useAnimatedRef<Reanimated.ScrollView>()
-  const offsetYShared = useScrollViewOffset(scrollViewRef as AnimatedRef<Reanimated.ScrollView>)
+  const scrollViewRef = useRef<ScrollView>(null)
 
-  useNodesRef(props, ref, scrollViewRef as AnimatedRef<ScrollView>, {
+  useNodesRef(props, ref, scrollViewRef, {
     style: normalStyle
   })
 
-  const { height: pickerH, itemHeight } = wrapperStyle
-  const [itemRawH, setItemRawH] = useState(itemHeight)
+  const { height: pickerH, itemHeight = DefaultPickerItemH } = wrapperStyle
+  const [itemRawH, setItemRawH] = useState(0) // 单个选项真实渲染高度
   const maxIndex = useMemo(() => columnData.length - 1, [columnData])
-  const prevScrollingInfo = useRef({ index: initialIndex, y: 0 })
   const touching = useRef(false)
   const scrolling = useRef(false)
   const activeIndex = useRef(initialIndex)
   const prevIndex = usePrevious(initialIndex)
   const prevMaxIndex = usePrevious(maxIndex)
 
-  const {
-    layoutProps
-  } = useLayout({
-    props,
-    hasSelfPercent,
-    setWidth,
-    setHeight,
-    nodeRef: scrollViewRef
-  })
-
-  // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length, 'pickerH=', pickerH, 'itemRawH=', itemRawH, 'itemHeight=', itemHeight)
-
-  const paddingHeight = useMemo(
-    () => Math.round((pickerH - itemHeight) / 2),
-    [pickerH, itemHeight]
-  )
+  const initialOffset = useMemo(() => ({
+    x: 0,
+    y: itemRawH * initialIndex
+  }), [itemRawH])
 
   const snapToOffsets = useMemo(
     () => columnData.map((_, i) => i * itemRawH),
@@ -96,34 +82,12 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   )
 
   const contentContainerStyle = useMemo(() => {
-    return [{ paddingVertical: paddingHeight }]
-  }, [paddingHeight])
-
-  const getIndex = useCallback((y: number) => {
-    const calc = Math.round(y / itemRawH)
-    return Math.max(0, Math.min(calc, maxIndex))
-  }, [itemRawH, maxIndex])
-
-  const getYofIndex = useCallback((index: number) => {
-    return index * itemRawH
-  }, [itemRawH])
-
-  const stableResetScrollPosition = useStableCallback((y: number) => {
-    console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current)
-    if (touching.current || scrolling.current) {
-      return
-    }
-    // needReset.current = true
-    if (y % itemRawH !== 0) {
-      scrolling.current = true
-      const targetIndex = getIndex(y)
-      const targetY = getYofIndex(targetIndex)
-      scrollViewRef.current?.scrollTo({ x: 0, y: targetY, animated: false })
-    } else {
-      onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } })
-    }
-  })
-  const debounceResetScrollPosition = useDebounceCallback(stableResetScrollPosition, 10)
+    return [
+      {
+        paddingVertical: Math.round(pickerH - itemRawH) / 2
+      }
+    ]
+  }, [pickerH, itemRawH])
 
   useEffect(() => {
     if (
@@ -138,170 +102,188 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     ) {
       return
     }
-    setTimeout(() => {
-      scrollViewRef.current?.scrollTo({
-        x: 0,
-        y: getYofIndex(initialIndex),
-        animated: false
-      })
-    }, isAndroid ? 200 : 0)
+
     activeIndex.current = initialIndex
+    scrollViewRef.current.scrollTo({
+      x: 0,
+      y: itemRawH * initialIndex,
+      animated: false
+    })
   }, [itemRawH, initialIndex])
 
-  const onContentSizeChange = (_w: number, h: number) => {
-    const y = getYofIndex(initialIndex)
-    if (y <= h) {
-      setTimeout(() => {
-        scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
-      }, 0)
-    }
+  const onScrollViewLayout = () => {
+    getInnerLayout && getInnerLayout(layoutRef)
+  }
+
+  const {
+    layoutRef,
+    layoutProps
+  } = useLayout({
+    props,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    nodeRef: scrollViewRef,
+    onLayout: onScrollViewLayout
+  })
+
+  const onContentSizeChange = (w: number, h: number) => {
+    scrollViewRef.current?.scrollTo({
+      x: 0,
+      y: itemRawH * initialIndex,
+      animated: false
+    })
   }
 
   const onItemLayout = (e: LayoutChangeEvent) => {
     const { height: rawH } = e.nativeEvent.layout
     if (rawH && itemRawH !== rawH) {
       setItemRawH(rawH)
+      onColumnItemRawHChange(rawH)
     }
   }
 
-  const onScrollBeginDrag = () => {
-    isIOS && debounceResetScrollPosition.clear()
+  const onTouchStart = () => {
     touching.current = true
-    prevScrollingInfo.current = {
-      index: activeIndex.current,
-      y: getYofIndex(activeIndex.current)
-    }
   }
 
-  const onScrollEndDrag = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+  const onTouchEnd = () => {
+    touching.current = false
+  }
+
+  const onTouchCancel = () => {
     touching.current = false
-    const { y } = e.nativeEvent.contentOffset
-    if (isIOS) {
-      if (y > 0 && y < snapToOffsets[maxIndex]) {
-        debounceResetScrollPosition(y)
-      }
-    }
   }
 
   const onMomentumScrollBegin = () => {
-    isIOS && debounceResetScrollPosition.clear()
     scrolling.current = true
   }
 
-  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent> | { nativeEvent: { contentOffset: { y: number } } }) => {
+  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     scrolling.current = false
-    const { y: scrollY } = e.nativeEvent.contentOffset
-    if (isIOS && scrollY % itemRawH !== 0) {
-      return debounceResetScrollPosition(scrollY)
+    if (!itemRawH) {
+      return
     }
-    const calcIndex = getIndex(scrollY)
+    const { y: scrollY } = e.nativeEvent.contentOffset
+    let calcIndex = Math.round(scrollY / itemRawH)
     activeIndex.current = calcIndex
     if (calcIndex !== initialIndex) {
+      calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0
       onSelectChange(calcIndex)
     }
   }
 
-  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const { y } = e.nativeEvent.contentOffset
-    if (isAndroid) {
-      return
-    }
-    // 全局注册的震动触感 hook
-    const pickerVibrate = global.__mpx.config.rnConfig.pickerVibrate
-    if (typeof pickerVibrate !== 'function') {
-      return
-    }
-    const { index: prevIndex, y: _y } = prevScrollingInfo.current
-    if (touching.current || scrolling.current) {
-      if (Math.abs(y - _y) >= itemRawH) {
-        const currentId = getIndex(y)
-        if (currentId !== prevIndex) {
-          prevScrollingInfo.current = {
-            index: currentId,
-            y: getYofIndex(currentId)
-          }
-          // vibrateShort({ type: 'selection' })
-          pickerVibrate()
-        }
+  const offsetY = useRef(new Animated.Value(0)).current
+
+  const onScroll = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { contentOffset: { y: offsetY } } }], {
+        useNativeDriver: true
+      }),
+    [offsetY]
+  )
+
+  const faces = useMemo(() => createFaces(itemRawH, visibleCount), [itemRawH])
+
+  const getTransform = useCallback(
+    (index: number) => {
+      const inputRange = faces.map((f) => itemRawH * (index + f.index))
+      return {
+        opacity: offsetY.interpolate({
+          inputRange: inputRange,
+          outputRange: faces.map((x) => x.opacity),
+          extrapolate: 'clamp'
+        }),
+        rotateX: offsetY.interpolate({
+          inputRange: inputRange,
+          outputRange: faces.map((x) => `${x.deg}deg`),
+          extrapolate: 'extend'
+        }),
+        translateY: offsetY.interpolate({
+          inputRange: inputRange,
+          outputRange: faces.map((x) => x.offsetY),
+          extrapolate: 'extend'
+        })
       }
-    }
-  }
+    },
+    [offsetY, faces, itemRawH]
+  )
 
   const renderInnerchild = () =>
-    columnData.map((item: React.ReactElement, index: number) => {
+    columnData.map((item: React.ReactNode, index: number) => {
+      const InnerProps = index === 0 ? { onLayout: onItemLayout } : {}
+      const strKey = `picker-column-${columnIndex}-${index}`
+      const { opacity, rotateX, translateY } = getTransform(index)
       return (
-        <MpxPickerVIewColumnItem
-          key={index}
-          item={item}
-          index={index}
-          itemHeight={itemHeight}
-          textStyleFromParent={textStyleFromParent}
-          textStyle={textStyle}
-          hasVarDec={hasVarDec}
-          varContext={varContextRef.current}
-          textProps={textProps}
-          visibleCount={visibleCount}
-          onItemLayout={onItemLayout}
-        />
+        <Animated.View
+          key={strKey}
+          {...InnerProps}
+          style={[
+            {
+              height: itemHeight || DefaultPickerItemH,
+              width: '100%',
+              opacity,
+              transform: [
+                { translateY },
+                { rotateX },
+                { perspective: 1000 } // 适配 Android
+              ]
+            }
+          ]}
+        >
+          {wrapChildren(
+            { children: item },
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )}
+        </Animated.View>
       )
     })
 
   const renderScollView = () => {
     return (
-      <PickerViewColumnAnimationContext.Provider value={offsetYShared}>
-        <Reanimated.ScrollView
-          ref={scrollViewRef}
-          bounces={true}
-          horizontal={false}
-          nestedScrollEnabled={true}
-          removeClippedSubviews={false}
-          showsVerticalScrollIndicator={false}
-          showsHorizontalScrollIndicator={false}
-          scrollEventThrottle={16}
-          {...layoutProps}
-          style={[{ width: '100%' }]}
-          decelerationRate="fast"
-          snapToOffsets={snapToOffsets}
-          onScroll={onScroll}
-          onScrollBeginDrag={onScrollBeginDrag}
-          onScrollEndDrag={onScrollEndDrag}
-          onMomentumScrollBegin={onMomentumScrollBegin}
-          onMomentumScrollEnd={onMomentumScrollEnd}
-          onContentSizeChange={onContentSizeChange}
-          contentContainerStyle={contentContainerStyle}
-        >
-          {renderInnerchild()}
-        </Reanimated.ScrollView>
-      </PickerViewColumnAnimationContext.Provider>
+      <Animated.ScrollView
+        ref={scrollViewRef}
+        bounces={true}
+        horizontal={false}
+        pagingEnabled={false}
+        nestedScrollEnabled={true}
+        removeClippedSubviews={true}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        {...layoutProps}
+        scrollEventThrottle={16}
+        contentContainerStyle={contentContainerStyle}
+        contentOffset={initialOffset}
+        snapToOffsets={snapToOffsets}
+        onContentSizeChange={onContentSizeChange}
+        onScroll={onScroll}
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
+        onTouchCancel={onTouchCancel}
+        onMomentumScrollBegin={onMomentumScrollBegin}
+        onMomentumScrollEnd={onMomentumScrollEnd}
+      >
+        {renderInnerchild()}
+      </Animated.ScrollView>
     )
   }
 
   const renderOverlay = () => (
-    <PickerOverlay
-      itemHeight={itemHeight}
-      overlayItemStyle={pickerOverlayStyle}
-    />
-  )
-
-  const renderMask = () => (
-    <PickerMask
-      itemHeight={itemHeight}
-      maskContainerStyle={pickerMaskStyle}
-    />
+    <PickerOverlay itemHeight={itemHeight} overlayItemStyle={pickerOverlayStyle} />
   )
 
   return (
-    <SafeAreaView style={[styles.wrapper, normalStyle]}>
+    <SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
       {renderScollView()}
-      {renderMask()}
       {renderOverlay()}
     </SafeAreaView>
   )
 })
 
-const styles = StyleSheet.create({
-  wrapper: { display: 'flex', flex: 1 }
-})
-
 _PickerViewColumn.displayName = 'MpxPickerViewColumn'
 export default _PickerViewColumn