@mpxjs/webpack-plugin 2.9.62 → 2.9.64

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,200 @@ 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 } = useNodesRef<View, PickerViewProps>(props, ref, {})
+  //  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,29 @@ 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 } = useNodesRef(props, ref, { 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 +90,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 +119,10 @@ const radioGroup = forwardRef<
     props,
     {
       ref: nodeRef,
-      style: defaultStyle,
-      ...(enableOffset ? { onLayout } : {})
+      style: { ...normalStyle, ...layoutStyle },
+      ...layoutProps
     },
-    ['enable-offset'],
+    [],
     {
       layoutRef
     }
@@ -136,7 +131,15 @@ const radioGroup = forwardRef<
   return (
     <View {...innerProps}>
       <RadioGroupContext.Provider value={{ groupValue, notifyChange }}>
-        {children}
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current
+            }
+          )
+        }
       </RadioGroupContext.Provider>
     </View>
   )

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

@@ -4,19 +4,13 @@
  * ✔ checked
  * ✔ color
  */
-import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react'
-import {
-  View,
-  Text,
-  StyleSheet,
-  ViewStyle,
-  NativeSyntheticEvent,
-  TextStyle
-} from 'react-native'
+import { JSX, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react'
+import { View, StyleSheet, ViewStyle, NativeSyntheticEvent } from 'react-native'
+import { warn } from '@mpxjs/utils'
 import { LabelContext, RadioGroupContext } from './context'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { every, splitStyle, splitProps, isText, throwReactWarning } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
 import Icon from './mpx-icon'
 
 export interface RadioProps {
@@ -26,6 +20,11 @@ export interface RadioProps {
   color?: 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
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
   catchtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
@@ -66,44 +65,41 @@ const styles = StyleSheet.create({
 })
 
 const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
-  (props, ref): JSX.Element => {
+  (radioProps, ref): JSX.Element => {
+    const { textProps, innerProps: props = {} } = splitProps(radioProps)
+
     const {
       value = '',
       disabled = false,
       checked = false,
       color = '#09BB07',
       style = [],
-      'enable-offset': enableOffset,
-      children,
+      'enable-var': enableVar,
+      'external-var-context': externalVarContext,
+      'parent-font-size': parentFontSize,
+      'parent-width': parentWidth,
+      'parent-height': parentHeight,
       bindtap,
-      catchtap,
+      catchtap
     } = props
 
-    const layoutRef = useRef({})
-
     const [isChecked, setIsChecked] = useState<boolean>(!!checked)
 
     const groupContext = useContext(RadioGroupContext)
-    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined;
-    let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined;
+    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined
+    let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
     const labelContext = useContext(LabelContext)
 
-    const { textStyle, imageStyle, innerStyle } = splitStyle(style)
-
-    if (imageStyle) {
-      throwReactWarning('[Mpx runtime warn]: Radio does not support background image-related styles!')
-    }
-
     const defaultStyle = {
       ...styles.wrapper,
       ...(isChecked && styles.wrapperChecked),
-      ...(disabled && styles.wrapperDisabled),
+      ...(disabled && styles.wrapperDisabled)
     }
 
-    const viewStyle = {
-      ...defaultStyle,
-      ...innerStyle
+    const styleObj = {
+      ...styles.container,
+      ...style
     }
 
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
@@ -130,49 +126,27 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props))
     }
 
+    const {
+      hasSelfPercent,
+      normalStyle,
+      hasVarDec,
+      varContextRef,
+      setWidth,
+      setHeight
+    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+
+    if (backgroundStyle) {
+      warn('Radio does not support background image-related styles!')
+    }
+
     const { nodeRef } = useNodesRef(props, ref, {
       defaultStyle,
       change: onChange
     })
 
-    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 wrapChildren = (
-      children: ReactNode,
-      textStyle?: TextStyle
-    ) => {
-      if (!children) return children
-      const { textProps } = splitProps(props)
-
-      if (every(children, (child) => isText(child))) {
-        if (textStyle || textProps) {
-          children = <Text key='radioTextWrap' style={textStyle || {}} {...(textProps || {})}>
-            {children}
-          </Text>
-        }
-      } else {
-        if (textStyle) {
-          throwReactWarning(
-            '[Mpx runtime warn]: Text style will be ignored unless every child of the Radio is Text node!'
-          )
-        }
-      }
-
-      return children
-    }
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
     if (groupContext) {
       groupValue = groupContext.groupValue
@@ -187,12 +161,12 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       props,
       {
         ref: nodeRef,
-        style: styles.container,
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
         bindtap: onTap,
-        catchtap: catchTap,
-        ...(enableOffset ? { onLayout } : {})
+        catchtap: catchTap
       },
-      ['enable-offset'],
+      [],
       {
         layoutRef
       }
@@ -223,7 +197,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
 
     return (
       <View {...innerProps}>
-        <View style={viewStyle}>
+        <View style={defaultStyle}>
           <Icon
             type='success'
             size={24}
@@ -235,7 +209,17 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
             }}
           />
         </View>
-        {wrapChildren(children, textStyle)}
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )
+        }
       </View>
     )
   }

package/lib/runtime/components/react/mpx-root-portal.tsx

@@ -3,23 +3,25 @@
  */
 import { ReactNode } from 'react'
 import { Portal } from '@ant-design/react-native'
-
+import { warn } from '@mpxjs/utils'
 interface RootPortalProps {
   enable?: boolean
   children: ReactNode
+  [x: string]: any
 }
+
 const _RootPortal = (props: RootPortalProps) => {
   const { children, enable = true } = props
-  return enable ? (
-    // @ts-ignore
-    <Portal>
+  if (props.style) {
+    warn('The root-portal component does not support the style prop.')
+  }
+  return enable
+    ? <Portal>
       {children}
     </Portal>
-  ) : (
-    <>{children}</>
-  );
+    : <>{children}</>
 }
 
 _RootPortal.displayName = 'mpx-root-portal'
 
-export default _RootPortal
+export default _RootPortal