@mpxjs/webpack-plugin 2.9.62 → 2.9.65

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

@@ -1,28 +1,157 @@
 
-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, useRef, 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 scrollViewRef = useRef<ScrollView>(null)
+  useNodesRef(props, ref, scrollViewRef, {})
+  // 每个元素的高度
+  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

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

@@ -1,16 +1,16 @@
 import { View } from 'react-native'
-import React, { forwardRef, useState, useRef, useEffect } from 'react'
-import { PickerView } from '@ant-design/react-native'
-import useInnerProps from './getInnerListeners'
-import { getCustomEvent } from './getInnerListeners'
+import { LinearGradient, LinearGradientProps } from 'react-native-linear-gradient'
+import React, { forwardRef, useState, useRef, ReactElement, JSX } from 'react'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
+import { parseInlineStyle, useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils'
 /**
  * ✔ value
  * ✔ bindchange
  * ✘ bindpickstart
  * ✘ bindpickend
  * ✘ mask-class
- * ✘ indicator-style
+ * ✔ indicator-style: 优先级indicator-style.height > pick-view-column中的子元素设置的height
  * ✘ indicator-class
  * ✘ mask-style
  * ✘ immediate-change
@@ -21,84 +21,201 @@ interface PickerViewProps {
   // 初始的defaultValue数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
   value?: Array<number>
   bindchange?: Function
+  style: {
+    [key: string]: any
+  }
+  'indicator-style'?: string
+  'enable-var': boolean
+  'external-var-context'?: Record<string, any>,
+  'enable-offset': boolean
+}
+
+interface PickerLayout {
+  height: number,
+  itemHeight: number
+}
+
+interface PosType {
+  height?: number,
+  top?: number
 }
 
+const styles: { [key: string]: Object } = {
+  wrapper: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    overflow: 'hidden',
+    alignItems: 'center'
+  },
+  maskTop: {
+    position: 'absolute',
+    width: 1000,
+    zIndex: 100
+  },
+  maskBottom: {
+    position: 'absolute',
+    width: 1000,
+    zIndex: 100
+  }
+}
 const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProps>((props: PickerViewProps, ref) => {
-  const { children, ...restProps } = props
-  const layoutRef = useRef({})
-  const { nodeRef } = useNodesRef(props, ref, {})
-  const [value, setValue] = useState(props.value)
-  useEffect(() => {
-    // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
-    setValue(props.value)
-  }, [props.value]);
+  const { children, value = [], bindchange, style, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props
+  // indicatorStyle 需要转换为rn的style
+  // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
+  const indicatorStyle = parseInlineStyle(props['indicator-style'])
+  const { height: indicatorH, width: indicatorW } = indicatorStyle
+  const nodeRef = useRef(null)
+  useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {})
+  //  picker-view 设置的color等textStyle,在小程序上的表现是可以继承到最内层的text样式, 但是RN内部column是slot无法设置, 需要业务自己在column内的元素上设置
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext })
+  const { textStyle } = splitStyle(normalStyle)
+  const { textProps } = splitProps(props)
+  const {
+    // 存储layout布局信息
+    layoutRef,
+    layoutProps,
+    layoutStyle
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
 
-  const onLayout = () => {
-    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-    })
+  const isSetW = indicatorW !== undefined ? 1 : 0
+  const cloneRef = useRef(null)
+  const maskPos: PosType = {}
+  let [pickH, setPickH] = useState(0)
+  const itemH = pickH / 5
+  if (normalStyle?.height && pickH && pickH !== normalStyle?.height) {
+    maskPos.height = itemH * 2 + Math.ceil((normalStyle.height - pickH) / 2)
+  } else {
+    maskPos.height = itemH * 2
   }
-  const innerProps = useInnerProps(props, {}, [], { layoutRef })
 
+  const onColumnLayoutChange = (layoutConfig: PickerLayout) => {
+    pickH = layoutConfig.height
+    setPickH(layoutConfig.height)
+  }
 
-  const onChange = (val: Array<number>): void => {
-    const eventData = getCustomEvent('change', {}, { detail: {value: val, source: 'touch' }, layoutRef: layoutRef })
-    setValue(val)
-    props.bindchange && props.bindchange(eventData)
+  const onSelectChange = (columnIndex: number, selIndex: number) => {
+    const changeValue = value.slice()
+    changeValue[columnIndex] = selIndex
+    const eventData = getCustomEvent('change', {}, { detail: { value: changeValue, source: 'change' }, layoutRef })
+    bindchange && bindchange(eventData)
   }
 
-  const joinString = (data: string | any[] | React.ReactElement): string => {
-    return (Array.isArray(data) ? data : [data]).join('')
+  const innerProps = useInnerProps(props, {
+    ref: nodeRef,
+    style: {
+      ...normalStyle,
+      ...layoutStyle,
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    ...layoutProps
+  }, [
+    'enable-offset'
+  ], { layoutRef })
+
+  const cloneChild = (child: React.ReactNode, index: number) => {
+    // const extraProps = index === 0 ? { getInnerLayout: getInnerLayout, innerProps } : {}
+    const extraProps = {}
+    const childProps = {
+      ...(child as ReactElement)?.props,
+      ref: cloneRef,
+      prefix: index,
+      key: 'pick-view' + index,
+      wrapperStyle: {
+        height: normalStyle?.height || 0,
+        itemHeight: indicatorH || 0
+      },
+      onColumnLayoutChange,
+      onSelectChange: onSelectChange.bind(null, index),
+      selectedIndex: value?.[index] || 0,
+      ...extraProps
+    }
+    const realElement = React.cloneElement(child as ReactElement, childProps)
+    return wrapChildren(
+      {
+        children: realElement
+      },
+      {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+      }
+    )
   }
 
-  const getLabelFromChildren = (child: React.ReactElement): string => {
-    return child.props && child.props.children ? getLabelFromChildren(child.props.children) : joinString(child)
+  const renderTopMask = () => {
+    const linearProps: LinearGradientProps = {
+      colors: ['rgba(255,255,255,0.8)', 'rgba(255,255,255,0.2)'],
+      style: [
+        styles.maskTop,
+        {
+          height: maskPos.height,
+          top: 0,
+          pointerEvents: 'none'
+        }
+      ]
+    }
+    return (<LinearGradient {...linearProps}/>)
   }
 
-  const handleChildren = (children: React.ReactNode[]): any[] => {
-    return children.map((child: any, index: number) => {
-      return {
-        label: getLabelFromChildren(child),
-        value: index
-      }
-    })
+  const renderBottomMask = () => {
+    const linearProps: LinearGradientProps = {
+      colors: ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.8)'],
+      style: [
+        styles.maskBottom,
+        {
+          height: maskPos.height,
+          bottom: 0,
+          pointerEvents: 'none'
+        }
+      ]
+    }
+    return <LinearGradient {...linearProps}></LinearGradient>
   }
 
-  const getDataFromChildren = (children: React.ReactNode): any[] => {
-    return (Array.isArray(children) ? children : [children]).map((child: any) => {
-      return handleChildren(child.props && child.props.children ? child.props.children : [child])
-    })
+  const renderLine = () => {
+    return <View style={[{
+      position: 'absolute',
+      top: '50%',
+      transform: [{ translateY: -(itemH / 2) }],
+      height: itemH,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderColor: '#f0f0f0',
+      width: '100%',
+      zIndex: 101
+    }]}></View>
   }
 
-  const columns = Array.isArray(children) ? children.length : 1
-  const originData = getDataFromChildren(children)
-  // 子节点默认的序号，这里是更新默认值的
-  const subChildLength = originData.map((item) => {
-    return item.length
-  })
-  const defaultValue = (props.value || []).map((item, index) => {
-    if (item > subChildLength[index]) {
-      return subChildLength[index] - 1
+  const renderSubChild = () => {
+    if (Array.isArray(children)) {
+      return children.map((item, index) => {
+        return cloneChild(item, index)
+      })
     } else {
-      return item
+      return cloneChild(children, 0)
     }
-  })
-
-  return (
-    <PickerView
-    {...restProps}
-    cols={columns}
-    // 默认选中项
-    defaultValue={defaultValue}
-    // 内部维护选中项
-    value={value}
-    // data数据源column
-    data={originData}
-    onChange={onChange}
-    cascade={false}/>
-  )
+  }
+  return (<View {...innerProps}>
+    {renderTopMask()}
+    <View style={[styles.wrapper]}>
+      {renderSubChild()}
+    </View>
+    {renderBottomMask()}
+    {!isSetW && renderLine()}
+  </View>)
 })
 
-_PickerView.displayName = 'mpx-picker-view';
+_PickerView.displayName = 'mpx-picker-view'
 
 export default _PickerView

package/lib/runtime/components/react/mpx-radio-group.tsx

@@ -1,47 +1,44 @@
 /**
  * ✔ bindchange
  */
-import {
-  JSX,
-  useRef,
-  forwardRef,
-  ReactNode,
-  useContext
-} from 'react'
-import {
-  View,
-  NativeSyntheticEvent,
-  ViewStyle
-} from 'react-native'
+import { JSX, useRef, forwardRef, ReactNode, useContext } from 'react'
+import { View, NativeSyntheticEvent, ViewStyle } from 'react-native'
+import { warn } from '@mpxjs/utils'
 import { FormContext, FormFieldValue, RadioGroupContext, GroupValue } from './context'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { throwReactWarning } from './utils'
+import { useLayout, useTransformStyle, wrapChildren } from './utils'
 
-export interface radioGroupProps {
+export interface RadioGroupProps {
   name: string
   style?: ViewStyle & Record<string, any>
   'enable-offset'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   children: ReactNode
   bindchange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 const radioGroup = forwardRef<
-  HandlerRef<View, radioGroupProps>,
-  radioGroupProps
+  HandlerRef<View, RadioGroupProps>,
+  RadioGroupProps
 >((props, ref): JSX.Element => {
   const {
     style = {},
-    'enable-offset': enableOffset,
-    children,
-    bindchange,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+    bindchange
   } = props
 
-  const layoutRef = useRef({})
-
   const formContext = useContext(FormContext)
 
-  let formValuesMap: Map<string, FormFieldValue> | undefined;
+  let formValuesMap: Map<string, FormFieldValue> | undefined
 
   if (formContext) {
     formValuesMap = formContext.formValuesMap
@@ -51,31 +48,30 @@ const radioGroup = forwardRef<
 
   const defaultStyle = {
     flexDirection: 'row',
-    flexWrap: 'wrap',
-    ...style
+    flexWrap: 'wrap'
   }
 
-  const { nodeRef } = useNodesRef(props, ref, {
-    defaultStyle
-  })
-
-  const onLayout = () => {
-    nodeRef.current?.measure(
-      (
-        x: number,
-        y: number,
-        width: number,
-        height: number,
-        offsetLeft: number,
-        offsetTop: number
-      ) => {
-        layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-      }
-    )
+  const styleObj = {
+    ...defaultStyle,
+    ...style
   }
 
+  const {
+    hasSelfPercent,
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef, { defaultStyle })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
   const getSelectionValue = (): string | undefined => {
-    for (let key in groupValue) {
+    for (const key in groupValue) {
       if (groupValue[key].checked) {
         return key
       }
@@ -95,7 +91,7 @@ const radioGroup = forwardRef<
 
   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 })
     }
@@ -124,10 +120,10 @@ const radioGroup = forwardRef<
     props,
     {
       ref: nodeRef,
-      style: defaultStyle,
-      ...(enableOffset ? { onLayout } : {})
+      style: { ...normalStyle, ...layoutStyle },
+      ...layoutProps
     },
-    ['enable-offset'],
+    [],
     {
       layoutRef
     }
@@ -136,7 +132,15 @@ const radioGroup = forwardRef<
   return (
     <View {...innerProps}>
       <RadioGroupContext.Provider value={{ groupValue, notifyChange }}>
-        {children}
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current
+            }
+          )
+        }
       </RadioGroupContext.Provider>
     </View>
   )