@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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

@@ -0,0 +1,220 @@
+import { View } from 'react-native'
+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.height > pick-view-column中的子元素设置的height
+ * ✘ indicator-class
+ * ✘ mask-style
+ * ✘ immediate-change
+ */
+
+interface PickerViewProps {
+  children: React.ReactNode
+  // 初始的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, 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 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 onColumnLayoutChange = (layoutConfig: PickerLayout) => {
+    pickH = layoutConfig.height
+    setPickH(layoutConfig.height)
+  }
+
+  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 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 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 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 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 renderSubChild = () => {
+    if (Array.isArray(children)) {
+      return children.map((item, index) => {
+        return cloneChild(item, index)
+      })
+    } else {
+      return cloneChild(children, 0)
+    }
+  }
+  return (<View {...innerProps}>
+    {renderTopMask()}
+    <View style={[styles.wrapper]}>
+      {renderSubChild()}
+    </View>
+    {renderBottomMask()}
+    {!isSetW && renderLine()}
+  </View>)
+})
+
+_PickerView.displayName = 'mpx-picker-view'
+
+export default _PickerView

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

@@ -0,0 +1,150 @@
+/**
+ * ✔ bindchange
+ */
+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 { useLayout, useTransformStyle, wrapChildren } from './utils'
+
+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
+>((props, ref): JSX.Element => {
+  const {
+    style = {},
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+    bindchange
+  } = props
+
+  const formContext = useContext(FormContext)
+
+  let formValuesMap: Map<string, FormFieldValue> | undefined
+
+  if (formContext) {
+    formValuesMap = formContext.formValuesMap
+  }
+
+  const groupValue: GroupValue = useRef({}).current
+
+  const defaultStyle = {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  }
+
+  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 (const key in groupValue) {
+      if (groupValue[key].checked) {
+        return key
+      }
+    }
+  }
+
+  const getValue = () => {
+    return getSelectionValue()
+  }
+
+  const resetValue = () => {
+    Object.keys(groupValue).forEach((key) => {
+      groupValue[key].checked = false
+      groupValue[key].setValue(false)
+    })
+  }
+
+  if (formValuesMap) {
+    if (!props.name) {
+      warn('If a form component is used, the name attribute is required.')
+    } else {
+      formValuesMap.set(props.name, { getValue, resetValue })
+    }
+  }
+
+  const notifyChange = (
+    evt: NativeSyntheticEvent<TouchEvent>
+  ) => {
+    bindchange &&
+      bindchange(
+        getCustomEvent(
+          'tap',
+          evt,
+          {
+            layoutRef,
+            detail: {
+              value: getSelectionValue()
+            }
+          },
+          props
+        )
+      )
+  }
+
+  const innerProps = useInnerProps(
+    props,
+    {
+      ref: nodeRef,
+      style: { ...normalStyle, ...layoutStyle },
+      ...layoutProps
+    },
+    [],
+    {
+      layoutRef
+    }
+  )
+
+  return (
+    <View {...innerProps}>
+      <RadioGroupContext.Provider value={{ groupValue, notifyChange }}>
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current
+            }
+          )
+        }
+      </RadioGroupContext.Provider>
+    </View>
+  )
+})
+
+radioGroup.displayName = 'mpx-radio-group'
+
+export default radioGroup

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

@@ -0,0 +1,230 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+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 { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import Icon from './mpx-icon'
+
+export interface RadioProps {
+  value?: string
+  checked?: boolean
+  disabled?: boolean
+  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
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    borderColor: '#D1D1D1',
+    borderWidth: 1,
+    borderRadius: 12,
+    backgroundColor: '#ffffff',
+    marginRight: 5,
+    overflow: 'hidden'
+  },
+  wrapperChecked: {
+    borderWidth: 0
+  },
+  wrapperDisabled: {
+    backgroundColor: '#E1E1E1'
+  },
+  icon: {
+    opacity: 0
+  },
+  iconDisabled: {
+    backgroundColor: '#ADADAD'
+  },
+  iconChecked: {
+    opacity: 1
+  }
+})
+
+const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
+  (radioProps, ref): JSX.Element => {
+    const { textProps, innerProps: props = {} } = splitProps(radioProps)
+
+    const {
+      value = '',
+      disabled = false,
+      checked = false,
+      color = '#09BB07',
+      style = [],
+      'enable-var': enableVar,
+      'external-var-context': externalVarContext,
+      'parent-font-size': parentFontSize,
+      'parent-width': parentWidth,
+      'parent-height': parentHeight,
+      bindtap,
+      catchtap
+    } = props
+
+    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
+
+    const labelContext = useContext(LabelContext)
+
+    const defaultStyle = {
+      ...styles.wrapper,
+      ...(isChecked && styles.wrapperChecked),
+      ...(disabled && styles.wrapperDisabled)
+    }
+
+    const styleObj = {
+      ...styles.container,
+      ...style
+    }
+
+    const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
+      if (disabled || isChecked) return
+      setIsChecked(!isChecked)
+      if (groupValue) {
+        for (const [key, radio] of Object.entries(groupValue)) {
+          if (!radio) continue
+          radio.setValue(key === value)
+          radio.checked = key === value
+        }
+      }
+      notifyChange && notifyChange(evt)
+    }
+
+    const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
+      if (disabled) return
+      bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
+      onChange(evt)
+    }
+
+    const catchTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
+      if (disabled) return
+      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 { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
+    if (groupContext) {
+      groupValue = groupContext.groupValue
+      notifyChange = groupContext.notifyChange
+    }
+
+    if (labelContext) {
+      labelContext.current.triggerChange = onChange
+    }
+
+    const innerProps = useInnerProps(
+      props,
+      {
+        ref: nodeRef,
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
+        bindtap: onTap,
+        catchtap: catchTap
+      },
+      [],
+      {
+        layoutRef
+      }
+    )
+
+    useEffect(() => {
+      if (groupValue) {
+        groupValue[value] = {
+          checked: checked,
+          setValue: setIsChecked
+        }
+      }
+      return () => {
+        if (groupValue) {
+          delete groupValue[value]
+        }
+      }
+    }, [])
+
+    useEffect(() => {
+      if (checked !== isChecked) {
+        setIsChecked(checked)
+        if (groupValue) {
+          groupValue[value].checked = checked
+        }
+      }
+    }, [checked])
+
+    return (
+      <View {...innerProps}>
+        <View style={defaultStyle}>
+          <Icon
+            type='success'
+            size={24}
+            color={disabled ? '#E1E1E1' : color}
+            style={{
+              ...styles.icon,
+              ...(isChecked && styles.iconChecked),
+              ...(disabled && styles.iconDisabled)
+            }}
+          />
+        </View>
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )
+        }
+      </View>
+    )
+  }
+)
+
+Radio.displayName = 'mpx-radio'
+
+export default Radio

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

@@ -0,0 +1,27 @@
+/**
+ * ✔ enable
+ */
+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
+  if (props.style) {
+    warn('The root-portal component does not support the style prop.')
+  }
+  return enable
+    ? <Portal>
+      {children}
+    </Portal>
+    : <>{children}</>
+}
+
+_RootPortal.displayName = 'mpx-root-portal'
+
+export default _RootPortal