@mpxjs/webpack-plugin 2.9.62 → 2.9.64

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

@@ -5,6 +5,8 @@ import React, { forwardRef, useState, useRef } from 'react';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 function formateRegionData(clObj = [], customItem, depth = 2) {
     const l = depth;
+    // 'PickerData[]' is not assignable to type 'PickerColumn | PickerColumn[]'.
+    // const obj: PickerColumnItem[] = []
     const obj = [];
     if (customItem) {
         const objClone = {
@@ -23,7 +25,7 @@ function formateRegionData(clObj = [], customItem, depth = 2) {
     for (let i = 0; i < clObj.length; i++) {
         const region = {
             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);
@@ -34,7 +36,7 @@ function formateRegionData(clObj = [], customItem, depth = 2) {
 }
 const _RegionPicker = forwardRef((props, ref) => {
     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布局信息
     const layoutRef = useRef({});
@@ -52,6 +54,7 @@ const _RegionPicker = forwardRef((props, ref) => {
                     return code;
                 }
             }
+            return item;
         }).filter(code => !!code);
         const detail = { value, code };
         if (postcode[2])
@@ -67,24 +70,25 @@ const _RegionPicker = forwardRef((props, ref) => {
             props.getInnerLayout && props.getInnerLayout(layoutRef);
         });
     };
+    const onDismiss = () => {
+        bindcancel && bindcancel();
+    };
     const regionProps = {
         data: formatRegionData,
         value: regionvalue,
         onChange,
         disabled,
-        onDismiss: bindcancel && bindcancel
+        onDismiss
     };
     const touchProps = {
         onLayout: onElementLayout,
         ref: viewRef
     };
-    return (
-    // @ts-ignore
-    <Picker {...regionProps}>
+    return (<Picker {...regionProps}>
       <TouchableWithoutFeedback>
         <View {...touchProps}>{children}</View>
       </TouchableWithoutFeedback>
     </Picker>);
 });
-_RegionPicker.displayName === 'mpx-picker-region';
+_RegionPicker.displayName = 'mpx-picker-region';
 export default _RegionPicker;

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

@@ -20,7 +20,7 @@ const formatRangeFun = (range, rangeKey = '') => {
 const _SelectorPicker = forwardRef((props, ref) => {
     const { range, children, value, disabled, bindchange, bindcancel } = props;
     // 格式化数据为Array<*>
-    let formatRange = formatRangeFun(range, props['range-key']);
+    const formatRange = formatRangeFun(range, props['range-key']);
     // 选中的索引值
     const [selected, setSelected] = useState(value || 0);
     // range数据源

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

@@ -6,47 +6,47 @@ 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
+// 设备屏幕的大小。 screen
 const styles = {
     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: {
@@ -55,7 +55,7 @@ const styles = {
     }
 };
 function formatStrToInt(timestr) {
-    let [start, end] = timestr.split(':');
+    const [start, end] = timestr.split(':');
     return [parseInt(start), parseInt(end)];
 }
 // [9, 59] to 09:59
@@ -70,9 +70,9 @@ function formatStr(arr) {
     return hour + ':' + minute;
 }
 function generateMinute() {
-    let arrMinute = [];
+    const arrMinute = [];
     for (let i = 0; i <= 59; i++) {
-        let obj = {
+        const obj = {
             label: toSingleStr(i),
             value: i,
             children: []
@@ -82,9 +82,9 @@ function generateMinute() {
     return arrMinute;
 }
 function generateColumns() {
-    let pickData = [];
+    const pickData = [];
     for (let i = 0; i <= 23; i++) {
-        let obj = {
+        const obj = {
             label: toSingleStr(i),
             value: i,
             children: generateMinute()
@@ -228,7 +228,7 @@ const _TimePicker = forwardRef((props, ref) => {
       </TouchableWithoutFeedback>
     </View>;
     };
-    const strStyle = visible ? styles['showModal'] : styles['hideModal'];
+    const strStyle = visible ? styles.showModal : styles.hideModal;
     const mheight = Math.floor(offsetTop);
     // Animated.View
     return (<>

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

@@ -1,15 +1,107 @@
-import { View } from 'react-native';
-import React, { forwardRef, useRef } from 'react';
-import useInnerProps from './getInnerListeners';
+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 } = props;
-    const layoutRef = useRef({});
-    const { nodeRef } = useNodesRef(props, ref, {});
-    const innerProps = useInnerProps(props, {}, [], { layoutRef });
-    return (<View ref={nodeRef} {...innerProps}>
-    {children}
-    </View>);
+    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

@@ -1,68 +1,162 @@
-import React, { forwardRef, useState, useRef, useEffect } from 'react';
-import { PickerView } from '@ant-design/react-native';
-import useInnerProps from './getInnerListeners';
-import { getCustomEvent } from './getInnerListeners';
+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, ...restProps } = props;
-    const layoutRef = useRef({});
+    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, {});
-    const [value, setValue] = useState(props.value);
-    useEffect(() => {
-        // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
-        setValue(props.value);
-    }, [props.value]);
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
+    //  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 innerProps = useInnerProps(props, {}, [], { layoutRef });
-    const onChange = (val) => {
-        const eventData = getCustomEvent('change', {}, { detail: { value: val, source: 'touch' }, layoutRef: layoutRef });
-        setValue(val);
-        props.bindchange && props.bindchange(eventData);
+    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 joinString = (data) => {
-        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, 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 getLabelFromChildren = (child) => {
-        return child.props && child.props.children ? getLabelFromChildren(child.props.children) : joinString(child);
+    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 handleChildren = (children) => {
-        return children.map((child, index) => {
-            return {
-                label: getLabelFromChildren(child),
-                value: index
-            };
-        });
+    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 getDataFromChildren = (children) => {
-        return (Array.isArray(children) ? children : [children]).map((child) => {
-            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';
 export default _PickerView;

package/lib/runtime/components/react/dist/mpx-radio-group.jsx

@@ -3,13 +3,13 @@
  */
 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 { throwReactWarning } from './utils';
+import { useLayout, useTransformStyle, wrapChildren } from './utils';
 const radioGroup = forwardRef((props, ref) => {
-    const { style = {}, 'enable-offset': enableOffset, children, bindchange, } = props;
-    const layoutRef = useRef({});
+    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) {
@@ -18,19 +18,17 @@ const radioGroup = forwardRef((props, ref) => {
     const groupValue = useRef({}).current;
     const defaultStyle = {
         flexDirection: 'row',
-        flexWrap: 'wrap',
-        ...style
+        flexWrap: 'wrap'
     };
-    const { nodeRef } = useNodesRef(props, ref, {
-        defaultStyle
-    });
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            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 = () => {
-        for (let key in groupValue) {
+        for (const key in groupValue) {
             if (groupValue[key].checked) {
                 return key;
             }
@@ -47,7 +45,7 @@ const radioGroup = forwardRef((props, ref) => {
     };
     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 });
@@ -64,14 +62,17 @@ const radioGroup = forwardRef((props, ref) => {
     };
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: defaultStyle,
-        ...(enableOffset ? { onLayout } : {})
-    }, ['enable-offset'], {
+        style: { ...normalStyle, ...layoutStyle },
+        ...layoutProps
+    }, [], {
         layoutRef
     });
     return (<View {...innerProps}>
       <RadioGroupContext.Provider value={{ groupValue, notifyChange }}>
-        {children}
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current
+        })}
       </RadioGroupContext.Provider>
     </View>);
 });