@mpxjs/webpack-plugin 2.9.59 → 2.9.64

package/lib/runtime/components/react/dist/mpx-picker/selector.jsx

@@ -0,0 +1,76 @@
+/**
+ * 普通选择器，range可以是Array<Obj> 也可以是Array
+ */
+import { View, TouchableWithoutFeedback } from 'react-native';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { Picker } from '@ant-design/react-native';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+const formatRangeFun = (range, rangeKey = '') => {
+    let newRange = [];
+    newRange = (range || []).map((item, index) => {
+        if (typeof item === 'object') {
+            return { value: index, label: item[rangeKey] };
+        }
+        else {
+            return { value: index, label: item };
+        }
+    });
+    return newRange;
+};
+const _SelectorPicker = forwardRef((props, ref) => {
+    const { range, children, value, disabled, bindchange, bindcancel } = props;
+    // 格式化数据为Array<*>
+    const formatRange = formatRangeFun(range, props['range-key']);
+    // 选中的索引值
+    const [selected, setSelected] = useState(value || 0);
+    // range数据源
+    const [data, setData] = useState(formatRange || []);
+    // 存储layout布局信息
+    const layoutRef = useRef({});
+    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    useEffect(() => {
+        if (range) {
+            const newFormatRange = formatRangeFun(range, props['range-key']);
+            setData(newFormatRange);
+        }
+        setSelected(() => {
+            return value;
+        });
+    }, [range, value]);
+    const defaultValue = [value];
+    const onChange = (value) => {
+        bindchange && bindchange({
+            detail: {
+                value: value && value[0]
+            }
+        });
+    };
+    const onElementLayout = (layout) => {
+        viewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            props.getInnerLayout && props.getInnerLayout(layoutRef);
+        });
+    };
+    const antPickerProps = {
+        data,
+        value: [selected],
+        cols: 1,
+        defaultValue,
+        itemHeight: 40,
+        onChange,
+        onDismiss: bindcancel && bindcancel
+    };
+    const touchProps = {
+        onLayout: onElementLayout,
+        ref: viewRef
+    };
+    return (<Picker {...antPickerProps}>
+        <TouchableWithoutFeedback>
+          <View {...touchProps}>
+            {children}
+          </View>
+        </TouchableWithoutFeedback>
+    </Picker>);
+});
+_SelectorPicker.displayName = 'mpx-picker-selector';
+export default _SelectorPicker;

package/lib/runtime/components/react/dist/mpx-picker/time.jsx

@@ -0,0 +1,244 @@
+import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native';
+import { PickerView } from '@ant-design/react-native';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+// 可见应用窗口的大小。
+// 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
+const styles = {
+    showModal: {
+        backgroundColor: 'black',
+        opacity: 0.5,
+        position: 'absolute',
+        width: '100%'
+    },
+    hideModal: {
+        opacity: 1,
+        height: 0
+    },
+    modal: {
+        backgroundColor: 'black',
+        opacity: 0.5
+    },
+    centeredView: {
+        position: 'absolute',
+        bottom: 0,
+        width: '100%',
+        overflow: 'scroll'
+    },
+    btnLine: {
+        width: '100%',
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        borderColor: 20,
+        borderBottomWidth: 1,
+        backgroundColor: 'white',
+        paddingLeft: 40,
+        paddingRight: 40
+    },
+    cancel: {
+        height: 50,
+        display: 'flex',
+        justifyContent: 'center'
+    },
+    ok: {
+        height: 50,
+        display: 'flex',
+        justifyContent: 'center'
+    },
+    btntext: {
+        color: '#0ae',
+        fontSize: 18
+    }
+};
+function formatStrToInt(timestr) {
+    const [start, end] = timestr.split(':');
+    return [parseInt(start), parseInt(end)];
+}
+// [9, 59] to 09:59
+function formatStr(arr) {
+    let [hour, minute] = arr;
+    if (hour < 10) {
+        hour = '0' + hour;
+    }
+    if (minute < 10) {
+        minute = '0' + minute;
+    }
+    return hour + ':' + minute;
+}
+function generateMinute() {
+    const arrMinute = [];
+    for (let i = 0; i <= 59; i++) {
+        const obj = {
+            label: toSingleStr(i),
+            value: i,
+            children: []
+        };
+        arrMinute.push(obj);
+    }
+    return arrMinute;
+}
+function generateColumns() {
+    const pickData = [];
+    for (let i = 0; i <= 23; i++) {
+        const obj = {
+            label: toSingleStr(i),
+            value: i,
+            children: generateMinute()
+        };
+        pickData.push(obj);
+    }
+    return pickData;
+}
+function toSingleStr(str) {
+    return str < 10 ? '0' + str : str;
+}
+function toStr(time) {
+    const [hour, minute] = formatStrToInt(time);
+    const newHour = toSingleStr(hour);
+    const newMinute = toSingleStr(minute);
+    return '' + newHour + newMinute;
+}
+function checkSelectedIsValid(strStart, strEnd, selected) {
+    const strSel = '' + toSingleStr(selected[0]) + toSingleStr(selected[1]);
+    if (strSel < strStart || strSel > strEnd)
+        return false;
+    return true;
+}
+/**
+ * [{label:'', value: '', key: '', children: []}]
+  label: string | ReactNode
+  value: string | number
+  key?: string | number
+  children?: PickerColumnItem[]
+*/
+// start="02:10" end = 23:01
+const _TimePicker = forwardRef((props, ref) => {
+    const { children, start, end, value, bindchange, bindcancel, disabled } = props;
+    const defaultProps = {
+        start: '00:10',
+        end: '23:59'
+    };
+    const defaultValue = formatStrToInt(value);
+    const [timevalue, setTimeValue] = useState(defaultValue);
+    // 存储layout布局信息
+    const layoutRef = useRef({});
+    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    // 存储modal的布局信息
+    const modalLayoutRef = useRef({});
+    const { nodeRef: modalRef } = useNodesRef(props, ref, {});
+    const [visible, setVisible] = useState(false);
+    const columnData = generateColumns();
+    const [data, setData] = useState(columnData);
+    const [offsetTop, setOffsetTop] = useState(0);
+    const strStart = toStr(start);
+    const strEnd = toStr(end);
+    useEffect(() => {
+        const newColumnData = generateColumns();
+        setData(newColumnData);
+    }, [start, end]);
+    useEffect(() => {
+        if (value) {
+            const nValue = formatStrToInt(value);
+            nValue && setTimeValue(nValue);
+        }
+    }, [value]);
+    // console.log('---------------visible---', visible, JSON.stringify(columnData))
+    const handleModalStatus = (status) => {
+        setVisible(status);
+    };
+    const handleConfirm = () => {
+        handleModalStatus(false);
+        bindchange && bindchange({
+            detail: {
+                value: formatStr(timevalue)
+            }
+        });
+    };
+    const handleCancel = () => {
+        handleModalStatus(false);
+        bindcancel && bindcancel();
+    };
+    const handleChildClick = () => {
+        handleModalStatus(true);
+    };
+    const handlePickChange = (date) => {
+        // 不是有效的值
+        if (!checkSelectedIsValid(strStart, strEnd, date)) {
+            setTimeValue(timevalue);
+        }
+        else {
+            // [9, 13]
+            setTimeValue(date);
+            const strDate = formatStr(date);
+            bindchange && bindchange({
+                detail: {
+                    value: strDate
+                }
+            });
+        }
+    };
+    const onElementLayout = () => {
+        viewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            props.getInnerLayout && props.getInnerLayout(layoutRef);
+        });
+    };
+    const onModalLayout = () => {
+        modalRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            modalLayoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            setOffsetTop(offsetTop);
+        });
+    };
+    const renderModalChildren = () => {
+        const pickerProps = {
+            data,
+            value: timevalue,
+            defaultValue: timevalue,
+            cols: 2,
+            onChange: handlePickChange
+        };
+        return (<View style={styles.centeredView} ref={modalRef} onLayout={onModalLayout}>
+        <View style={styles.btnLine}>
+          <View style={styles.cancel}>
+            <TouchableWithoutFeedback onPress={handleCancel}>
+              <Text style={styles.btntext}>取消</Text>
+            </TouchableWithoutFeedback>
+          </View>
+          <View style={styles.ok}>
+            <TouchableWithoutFeedback onPress={handleConfirm}>
+              <Text style={styles.btntext}>确定</Text>
+            </TouchableWithoutFeedback>
+          </View>
+        </View>
+        <PickerView {...pickerProps}></PickerView>
+      </View>);
+    };
+    const renderChildren = () => {
+        const touchProps = {
+            onLayout: onElementLayout,
+            ref: viewRef
+        };
+        return <View>
+      <TouchableWithoutFeedback onPress={handleChildClick}>
+        <View {...touchProps}>{children}</View>
+      </TouchableWithoutFeedback>
+    </View>;
+    };
+    const strStyle = visible ? styles.showModal : styles.hideModal;
+    const mheight = Math.floor(offsetTop);
+    // Animated.View
+    return (<>
+    <View style={{ ...strStyle, height: visible ? mheight : 0, bottom: 0 }}>
+      <Modal animationType="slide" transparent={true} visible={visible}>
+        {renderModalChildren()}
+      </Modal>
+    </View>
+    {renderChildren()}
+  </>);
+});
+_TimePicker.displayName = 'mpx-picker-time';
+export default _TimePicker;

package/lib/runtime/components/react/dist/mpx-picker/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,107 @@
+import { View, Animated, SafeAreaView } from 'react-native';
+import React, { forwardRef, useState, useEffect } from 'react';
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+const defaultItemHeight = 36;
+// 每个Column 都有个外层的高度, 内部的元素高度
+// 默认的高度
+const _PickerViewColumn = forwardRef((props, 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);
+    useEffect(() => {
+        if (selectedIndex && itemH) {
+            const offsetY = selectedIndex * itemH;
+            scrollViewRef.current?.scrollTo({ x: 0, y: offsetY, animated: true });
+        }
+    }, [selectedIndex, itemH]);
+    const onScrollViewLayout = () => {
+        getInnerLayout && getInnerLayout(layoutRef);
+    };
+    const { 
+    // 存储layout布局信息
+    layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onScrollViewLayout });
+    const onItemLayout = (e) => {
+        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) => {
+        if (scrollViewRef && itemH) {
+            const { y: scrollY } = e.nativeEvent.contentOffset;
+            const selIndex = Math.floor(scrollY / itemH);
+            onSelectChange(selIndex);
+        }
+    };
+    const renderInnerchild = () => {
+        // Fragment 节点
+        let realElement = [];
+        const getRealChilds = () => {
+            if (Array.isArray(children)) {
+                realElement = children;
+            }
+            else {
+                const tempChild = children;
+                if (tempChild.props.children && tempChild.props.children) {
+                    realElement = tempChild.props.children;
+                }
+                else {
+                    realElement = [children];
+                }
+            }
+            return realElement;
+        };
+        const realChilds = getRealChilds();
+        const arrChild = realChilds.map((item, index) => {
+            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);
+            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/dist/mpx-picker-view.jsx

@@ -0,0 +1,162 @@
+import { View } from 'react-native';
+import { LinearGradient } from 'react-native-linear-gradient';
+import React, { forwardRef, useState, useRef } from 'react';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+import { parseInlineStyle, useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils';
+const styles = {
+    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((props, 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(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 = {};
+    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) => {
+        pickH = layoutConfig.height;
+        setPickH(layoutConfig.height);
+    };
+    const onSelectChange = (columnIndex, selIndex) => {
+        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, index) => {
+        // const extraProps = index === 0 ? { getInnerLayout: getInnerLayout, innerProps } : {}
+        const extraProps = {};
+        const childProps = {
+            ...child?.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, childProps);
+        return wrapChildren({
+            children: realElement
+        }, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        });
+    };
+    const renderTopMask = () => {
+        const linearProps = {
+            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 = {
+            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/dist/mpx-radio-group.jsx

@@ -0,0 +1,80 @@
+/**
+ * ✔ bindchange
+ */
+import { useRef, forwardRef, useContext } from 'react';
+import { View } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import { FormContext, RadioGroupContext } from './context';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { useLayout, useTransformStyle, wrapChildren } from './utils';
+const radioGroup = forwardRef((props, ref) => {
+    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;
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    const 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 = () => {
+        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) => {
+        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;