@mpxjs/webpack-plugin 2.9.62 → 2.9.64

package/lib/runtime/components/react/mpx-picker/date.tsx

@@ -4,7 +4,7 @@ import React, { forwardRef, useState, useRef, useEffect } from 'react'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
 import { DateProps, LayoutType } from './type'
 
-function formatTimeStr(time = ''): Date {
+function formatTimeStr (time = ''): Date {
   let [year, month, day]: any = time.split('-')
   year = ~~year || 2000
   month = ~~month || 1
@@ -26,8 +26,7 @@ function dateToString (date: Date, fields: 'day' | 'month' | 'year' = 'day'): st
   return ret
 }
 
-
-const _DatePicker = forwardRef<HandlerRef<View, DateProps>, DateProps>((props: DateProps, ref):  React.JSX.Element => {
+const _DatePicker = forwardRef<HandlerRef<View, DateProps>, DateProps>((props: DateProps, ref): React.JSX.Element => {
   const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields } = props
   const [datevalue, setDateValue] = useState(value)
   // 存储layout布局信息

package/lib/runtime/components/react/mpx-picker/index.tsx

@@ -1,6 +1,7 @@
 import { View } from 'react-native'
 import { PickerValue } from '@ant-design/react-native'
 import React, { forwardRef, useRef, useContext, useState } from 'react'
+import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
 import Selector from './selector'
@@ -10,7 +11,6 @@ import MultiSelector from './multiSelector'
 import RegionSelector from './region'
 import { PickerProps, EventType, ValueType } from './type'
 import { FormContext, FormFieldValue } from '../context'
-import { throwReactWarning } from '../utils'
 
 /**
  * ✔ mode
@@ -33,7 +33,7 @@ import { throwReactWarning } from '../utils'
 
 const _Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>((props: PickerProps, ref): React.JSX.Element => {
   const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props
-  let innerLayout = useRef({})
+  const innerLayout = useRef({})
   const { nodeRef } = useNodesRef<View, PickerProps>(props, ref, {
   })
   const innerProps = useInnerProps(props, {
@@ -69,7 +69,7 @@ const _Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>((props: P
   }
   if (formValuesMap) {
     if (!props.name) {
-      throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.')
+      warn('If a form component is used, the name attribute is required.')
     } else {
       formValuesMap.set(props.name, { getValue, resetValue })
     }
@@ -103,29 +103,29 @@ const _Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>((props: P
   const selectorProps = {
     ...commonProps,
     value: pickerValue as PickerValue,
-    range: props['range'],
+    range: props.range,
     'range-key': props['range-key']
   }
 
   const multiProps = {
     ...commonProps,
     value: pickerValue as Array<number>,
-    range: props['range'],
+    range: props.range,
     'range-key': props['range-key']
   }
 
   const timeProps = {
     ...commonProps,
     value: pickerValue as string,
-    start: props['start'],
-    end: props['end']
+    start: props.start,
+    end: props.end
   }
 
   const dateProps = {
     ...commonProps,
     value: pickerValue as string,
-    start: props['start'],
-    end: props['end'],
+    start: props.start,
+    end: props.end,
     fileds: props.fields || 'day'
   }
 
@@ -150,6 +150,6 @@ const _Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>((props: P
   }
 })
 
-_Picker.displayName = 'mpx-picker';
+_Picker.displayName = 'mpx-picker'
 
 export default _Picker

package/lib/runtime/components/react/mpx-picker/multiSelector.tsx

@@ -4,7 +4,7 @@ import React, { forwardRef, useState, useRef, useEffect } from 'react'
 import { MultiSelectorProps, LayoutType } from './type'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
 
-function convertToObj(item?: any, rangeKey = ''): any {
+function convertToObj (item?: any, rangeKey = ''): any {
   if (typeof item === 'object') {
     return { value: item[rangeKey], label: item[rangeKey] }
   } else {
@@ -13,13 +13,13 @@ function convertToObj(item?: any, rangeKey = ''): any {
 }
 
 // eslint-disable-next-line default-param-last
-function formatRangeFun(range: any[][] = [], rangeKey?: string): any[] {
+function formatRangeFun (range: any[][] = [], rangeKey?: string): any[] {
   const result = (range[0] || []).map(item => {
     return convertToObj(item, rangeKey)
   })
   let tmp = result
   for (let i = 1; i < range.length; i++) {
-    let child = Array.isArray(range[i]) ? range[i] : []
+    const child = Array.isArray(range[i]) ? range[i] : []
     const nextColData = child.map(item => {
       return convertToObj(item, rangeKey)
     })
@@ -31,7 +31,7 @@ function formatRangeFun(range: any[][] = [], rangeKey?: string): any[] {
   return result
 }
 
-function getIndexByValues(range: any[] = [], value: any[] = []): number[] {
+function getIndexByValues (range: any[] = [], value: any[] = []): number[] {
   let tmp = range
   return value.map(v => {
     for (let i = 0; i < tmp.length; i++) {
@@ -44,16 +44,16 @@ function getIndexByValues(range: any[] = [], value: any[] = []): number[] {
   })
 }
 // [1,1,2] 寻找出[]
-function getInnerValueByIndex(range: any[] = [], value: any[] = []): string[] {
+function getInnerValueByIndex (range: any[] = [], value: any[] = []): string[] {
   let tmp = range
   return value.map(v => {
-    let current = tmp[v].value
+    const current = tmp[v].value
     tmp = tmp[v].children
     return current
   })
 }
 // column = 1 value = ['无脊柱动物', '扁性动物', '吸血虫'] 根据column 和value 获取到当前列变动选择的值所在当前列的索引
-function getColumnIndexByValue(range: any[] = [], column: number, value: any[] = []): number {
+function getColumnIndexByValue (range: any[] = [], column: number, value: any[] = []): number {
   let curRange = range
   let changeIndex = 0
   let tmpRange: any[] = []
@@ -63,23 +63,26 @@ function getColumnIndexByValue(range: any[] = [], column: number, value: any[] =
         if (ritem.value === item) {
           changeIndex = rindex
         }
+        return ritem
       })
     } else {
-    curRange.map((citem, cindex) => {
+      curRange.map((citem, cindex) => {
         if (citem.value === item) {
           tmpRange = citem.children
         }
-    })
-    curRange = tmpRange
+        return citem
+      })
+      curRange = tmpRange
     }
+    return item
   })
   return changeIndex
 }
 
 const _MultiSelectorPicker = forwardRef<HandlerRef<View, MultiSelectorProps>, MultiSelectorProps>((props: MultiSelectorProps, ref): React.JSX.Element => {
   const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange } = props
-  let formatRange = formatRangeFun(range, props['range-key'])
-  let initValue = getInnerValueByIndex(formatRange, value)
+  const formatRange = formatRangeFun(range, props['range-key'])
+  const initValue = getInnerValueByIndex(formatRange, value)
   // 选中的索引值
   const [selected, setSelected] = useState(initValue)
   // range数据源

package/lib/runtime/components/react/mpx-picker/region.tsx

@@ -1,15 +1,17 @@
 import { View, TouchableWithoutFeedback } from 'react-native'
-import { Picker } from '@ant-design/react-native'
+import { Picker, PickerColumnItem } from '@ant-design/react-native'
 import { regionData } from './regionData'
 import React, { forwardRef, useState, useRef } from 'react'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import { RegionProps, RegionObj, PickerData, LayoutType } from './type'
+import { RegionProps, RegionObj, LayoutType } from './type'
 
-function formateRegionData(clObj: RegionObj[] = [], customItem?: string, depth = 2): PickerData[] {
+function formateRegionData (clObj: RegionObj[] = [], customItem?: string, depth = 2): PickerColumnItem[] {
   const l = depth
-  const obj: PickerData[] = []
+  // 'PickerData[]' is not assignable to type 'PickerColumn | PickerColumn[]'.
+  // const obj: PickerColumnItem[] = []
+  const obj: PickerColumnItem[] = []
   if (customItem) {
-    const objClone: PickerData = {
+    const objClone: PickerColumnItem = {
       value: customItem,
       label: customItem,
       children: []
@@ -18,14 +20,14 @@ function formateRegionData(clObj: RegionObj[] = [], customItem?: string, depth =
     let loop = panding
     while (depth-- > 0) {
       loop.children = [{ ...objClone }]
-      loop = loop.children[0] as PickerData
+      loop = loop.children[0] as PickerColumnItem
     }
-    obj.push(panding)
+    obj.push(panding as PickerColumnItem)
   }
   for (let i = 0; i < clObj.length; i++) {
-    const region: PickerData = {
+    const region: PickerColumnItem = {
       value: clObj[i].value,
-      label: clObj[i].value,
+      label: clObj[i].value
     }
     if (clObj[i].children) {
       region.children = formateRegionData(clObj[i].children, customItem, l - 1)
@@ -35,11 +37,9 @@ function formateRegionData(clObj: RegionObj[] = [], customItem?: string, depth =
   return obj
 }
 
-
-
 const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((props: RegionProps, ref): React.JSX.Element => {
   const { children, value, bindchange, bindcancel, disabled } = props
-  let formatRegionData = formateRegionData(regionData, props['custom-item'])
+  const formatRegionData = formateRegionData(regionData, props['custom-item'])
 
   const [regionvalue, setRegionValue] = useState(value)
   // 存储layout布局信息
@@ -60,6 +60,7 @@ const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((pr
           return code
         }
       }
+      return item
     }).filter(code => !!code)
     const detail: Record<string, any> = { value, code }
     if (postcode[2]) detail.postcode = postcode[2]
@@ -75,13 +76,17 @@ const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((pr
       props.getInnerLayout && props.getInnerLayout(layoutRef)
     })
   }
-  
+
+  const onDismiss = (): void => {
+    bindcancel && bindcancel()
+  }
+
   const regionProps = {
     data: formatRegionData,
     value: regionvalue,
     onChange,
     disabled,
-    onDismiss: bindcancel && bindcancel
+    onDismiss
   }
 
   const touchProps = {
@@ -90,15 +95,13 @@ const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((pr
   }
 
   return (
-    // @ts-ignore
     <Picker {...regionProps}>
       <TouchableWithoutFeedback>
         <View {...touchProps}>{children}</View>
       </TouchableWithoutFeedback>
     </Picker>
   )
-
 })
 
-_RegionPicker.displayName === 'mpx-picker-region'
-export default _RegionPicker
+_RegionPicker.displayName = 'mpx-picker-region'
+export default _RegionPicker

package/lib/runtime/components/react/mpx-picker/selector.tsx

@@ -9,7 +9,7 @@ import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
 
 type RangeItemType = Obj | number | string
 
-const  formatRangeFun = (range: Array<RangeItemType>, rangeKey = ''): any => {
+const formatRangeFun = (range: Array<RangeItemType>, rangeKey = ''): any => {
   let newRange: Object[] = []
   newRange = (range || []).map((item: RangeItemType, index) => {
     if (typeof item === 'object') {
@@ -24,7 +24,7 @@ const  formatRangeFun = (range: Array<RangeItemType>, rangeKey = ''): any => {
 const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProps>((props: SelectorProps, ref): React.JSX.Element => {
   const { range, children, value, disabled, bindchange, bindcancel } = props
   // 格式化数据为Array<*>
-  let formatRange: PickerColumn = formatRangeFun(range, props['range-key'])
+  const formatRange: PickerColumn = formatRangeFun(range, props['range-key'])
   // 选中的索引值
   const [selected, setSelected] = useState<PickerValue>(value || 0)
   // range数据源
@@ -44,7 +44,7 @@ const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProp
     })
   }, [range, value])
   const defaultValue = [value]
-  
+
   const onChange = (value: PickerValue[]) => {
     bindchange && bindchange({
       detail: {
@@ -60,7 +60,6 @@ const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProp
     })
   }
 
-
   const antPickerProps = {
     data,
     value: [selected],
@@ -69,7 +68,7 @@ const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProp
     itemHeight: 40,
     onChange,
     onDismiss: bindcancel && bindcancel
-  }  as any
+  } as any
 
   const touchProps = {
     onLayout: onElementLayout,
@@ -87,6 +86,6 @@ const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProp
   )
 })
 
-_SelectorPicker.displayName = 'mpx-picker-selector';
+_SelectorPicker.displayName = 'mpx-picker-selector'
 
 export default _SelectorPicker

package/lib/runtime/components/react/mpx-picker/time.tsx

@@ -8,48 +8,47 @@ import { TimeProps } from './type'
 // const { height: dHeight, width: dWidth } = Dimensions.get('window');
 //  modal属性: {"height": 298.33331298828125, "offsetLeft": 0, "offsetTop": 513.6666870117188, "width": 375, "x": 0, "y": 513.6666870117188}
 // const { height: sHeight, width: sWidth } = Dimensions.get('screen');
-// 	设备屏幕的大小。 screen
-
+// 设备屏幕的大小。 screen
 const styles: { [key: string]: Object } = {
   showModal: {
-    backgroundColor: "black",
+    backgroundColor: 'black',
     opacity: 0.5,
-    position: "absolute",
-    width: "100%"
+    position: 'absolute',
+    width: '100%'
   },
   hideModal: {
     opacity: 1,
     height: 0
   },
   modal: {
-    backgroundColor: "black",
+    backgroundColor: 'black',
     opacity: 0.5
   },
   centeredView: {
     position: 'absolute',
     bottom: 0,
-    width: "100%",
+    width: '100%',
     overflow: 'scroll'
   },
   btnLine: {
-    width: "100%",
+    width: '100%',
     flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-between",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     borderColor: 20,
     borderBottomWidth: 1,
-    backgroundColor: "white",
+    backgroundColor: 'white',
     paddingLeft: 40,
     paddingRight: 40
   },
   cancel: {
     height: 50,
-    display: "flex",
+    display: 'flex',
     justifyContent: 'center'
   },
   ok: {
     height: 50,
-    display: "flex",
+    display: 'flex',
     justifyContent: 'center'
   },
   btntext: {
@@ -58,12 +57,12 @@ const styles: { [key: string]: Object } = {
   }
 }
 
-function formatStrToInt(timestr: string) {
-  let [start, end] = timestr.split(':')
+function formatStrToInt (timestr: string) {
+  const [start, end] = timestr.split(':')
   return [parseInt(start), parseInt(end)]
 }
 // [9, 59] to 09:59
-function formatStr(arr: any[]) {
+function formatStr (arr: any[]) {
   let [hour, minute] = arr
   if (hour < 10) {
     hour = '0' + hour
@@ -74,10 +73,10 @@ function formatStr(arr: any[]) {
   return hour + ':' + minute
 }
 
-function generateMinute() {
-  let arrMinute: any[] = []
+function generateMinute () {
+  const arrMinute: any[] = []
   for (let i = 0; i <= 59; i++) {
-    let obj = {
+    const obj = {
       label: toSingleStr(i),
       value: i,
       children: []
@@ -86,10 +85,10 @@ function generateMinute() {
   }
   return arrMinute
 }
-function generateColumns(): any[] {
-  let pickData: any[] = []
+function generateColumns (): any[] {
+  const pickData: any[] = []
   for (let i = 0; i <= 23; i++) {
-    let obj = {
+    const obj = {
       label: toSingleStr(i),
       value: i,
       children: generateMinute()
@@ -100,18 +99,18 @@ function generateColumns(): any[] {
   return pickData
 }
 
-function toSingleStr(str: number) {
+function toSingleStr (str: number) {
   return str < 10 ? '0' + str : str
 }
 
-function toStr(time: string): string {
+function toStr (time: string): string {
   const [hour, minute]: any = formatStrToInt(time)
   const newHour = toSingleStr(hour)
   const newMinute = toSingleStr(minute)
   return '' + newHour + newMinute
 }
 
-function checkSelectedIsValid(strStart: string, strEnd: string, selected: number[]): Boolean {
+function checkSelectedIsValid (strStart: string, strEnd: string, selected: number[]): boolean {
   const strSel = '' + toSingleStr(selected[0]) + toSingleStr(selected[1])
   if (strSel < strStart || strSel > strEnd) return false
   return true
@@ -196,7 +195,6 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
     }
   }
 
-
   const onElementLayout = () => {
     viewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
       layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
@@ -211,7 +209,6 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
     })
   }
 
-
   const renderModalChildren = () => {
     const pickerProps = {
       data,
@@ -250,7 +247,7 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
       </TouchableWithoutFeedback>
     </View>
   }
-  const strStyle = visible ? styles['showModal'] : styles['hideModal']
+  const strStyle = visible ? styles.showModal : styles.hideModal
   const mheight = Math.floor(offsetTop)
 
   // Animated.View
@@ -271,4 +268,3 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
 _TimePicker.displayName = 'mpx-picker-time'
 
 export default _TimePicker
-

package/lib/runtime/components/react/mpx-picker/type.ts

@@ -34,7 +34,7 @@ export type MultiSelectorProps = {
   getInnerLayout: Function
 }
 
-export type TimeProps =  {
+export type TimeProps = {
   mode: string,
   // 表示选择了 range 中的第几个（下标从 0 开始）
   value: string,

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

@@ -1,28 +1,156 @@
 
-import { View } from 'react-native'
-import React, { forwardRef, useRef } from 'react'
-import useInnerProps from './getInnerListeners'
+import { View, Animated, SafeAreaView, NativeScrollEvent, NativeSyntheticEvent, LayoutChangeEvent, ScrollView } from 'react-native'
+import React, { forwardRef, useState, useEffect, ReactElement, ReactNode } from 'react'
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-
 interface ColumnProps {
-  children: React.ReactNode
+  children: React.ReactNode,
+  selectedIndex: number,
+  onColumnLayoutChange: Function,
+  getInnerLayout: Function,
+  onSelectChange: Function,
+  style: {
+    [key: string]: any
+  },
+  'enable-var': boolean
+  'external-var-context'?: Record<string, any>
+  wrapperStyle: {
+    height?: number,
+    itemHeight: string
+  },
+  prefix: number
 }
+const defaultItemHeight = 36
+// 每个Column 都有个外层的高度, 内部的元素高度
+// 默认的高度
+const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>, ColumnProps>((props: ColumnProps, ref) => {
+  const { children, selectedIndex, onColumnLayoutChange, onSelectChange, getInnerLayout, style, wrapperStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props
+  // PickerViewColumn
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext })
+  const { textStyle } = splitStyle(normalStyle)
+  const { textProps } = splitProps(props)
+  // const { innerStyle } = splitStyle(normalStyle)
+  // scrollView的ref
+  const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {})
+  // 每个元素的高度
+  let [itemH, setItemH] = useState(0)
 
-const _PickerViewColumn = forwardRef<HandlerRef<View, ColumnProps>, ColumnProps>((props: ColumnProps, ref) => {
-  const { children } = props
-  const layoutRef = useRef({})
-  const { nodeRef } = useNodesRef(props, ref, {})
-  const innerProps = useInnerProps(props, {}, [], { layoutRef })
-  return (
-    <View
-    ref={nodeRef}
-    {...innerProps}>
-    {children}
-    </View>
-  )
-})
+  useEffect(() => {
+    if (selectedIndex && itemH) {
+      const offsetY = selectedIndex * itemH
+      scrollViewRef.current?.scrollTo({ x: 0, y: offsetY, animated: true })
+    }
+  }, [selectedIndex, itemH])
 
-_PickerViewColumn.displayName = 'mpx-picker-view-column';
+  const onScrollViewLayout = () => {
+    getInnerLayout && getInnerLayout(layoutRef)
+  }
 
-export default _PickerViewColumn
+  const {
+    // 存储layout布局信息
+    layoutRef,
+    layoutProps
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onScrollViewLayout })
+
+  const onItemLayout = (e: LayoutChangeEvent) => {
+    const layout = e.nativeEvent.layout
+    if (layout.height && itemH !== layout.height) {
+      itemH = layout.height
+      setItemH(layout.height)
+      onColumnLayoutChange && onColumnLayoutChange({ height: layout.height * 5 })
+    }
+  }
+
+  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (scrollViewRef && itemH) {
+      const { y: scrollY } = e.nativeEvent.contentOffset
+      const selIndex = Math.floor(scrollY / itemH)
+      onSelectChange(selIndex)
+    }
+  }
+
+  const renderInnerchild = () => {
+    // Fragment 节点
+    let realElement: Array<ReactNode> = []
+    const getRealChilds = () => {
+      if (Array.isArray(children)) {
+        realElement = children
+      } else {
+        const tempChild = children as ReactElement
+        if (tempChild.props.children && tempChild.props.children) {
+          realElement = tempChild.props.children
+        } else {
+          realElement = [children]
+        }
+      }
+      return realElement
+    }
 
+    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
+      const arrHeight = (wrapperStyle.itemHeight + '').match(/\d+/g) || []
+      const iHeight = (arrHeight[0] || defaultItemHeight) as number
+      return <View key={strKey} {...InnerProps} style={[{ height: iHeight, width: '100%' }]}>
+        {wrapChildren(
+          {
+            children: item
+          },
+          {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+          }
+        )}
+      </View>
+    })
+    const totalHeight = itemH * 5
+    if (wrapperStyle.height && totalHeight !== wrapperStyle.height) {
+      const fix = Math.ceil((totalHeight - wrapperStyle.height) / 2)
+      arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH - fix }]}></View>)
+      arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>)
+      arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>)
+      arrChild.push(<View key="picker-column-3" style={[{ height: itemH - fix }]}></View>)
+    } else {
+      arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH }]}></View>)
+      arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>)
+      arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>)
+      arrChild.push(<View key="picker-column-3" style={[{ height: itemH }]}></View>)
+    }
+    return arrChild
+  }
+
+  const renderScollView = () => {
+    return (<Animated.ScrollView
+      horizontal={false}
+      ref={scrollViewRef}
+      bounces={false}
+      scrollsToTop={false}
+      removeClippedSubviews={true}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      pagingEnabled={false}
+      snapToInterval={itemH}
+      automaticallyAdjustContentInsets={false}
+      {...layoutProps}
+      onMomentumScrollEnd={onMomentumScrollEnd}>
+        {renderInnerchild()}
+    </Animated.ScrollView>)
+  }
+
+  return (<SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
+    { renderScollView() }
+  </SafeAreaView>)
+})
+
+_PickerViewColumn.displayName = 'mpx-picker-view-column'
+export default _PickerViewColumn