@mpxjs/webpack-plugin 2.9.62 → 2.9.64

package/lib/runtime/components/react/dist/mpx-image/index.jsx

@@ -11,9 +11,10 @@
  * ✔ DEFAULT_SIZE
  */
 import { useEffect, useMemo, useState, useRef, forwardRef } from 'react';
-import { Image as RNImage, View, StyleSheet, } from 'react-native';
+import { Image as RNImage, View, StyleSheet } from 'react-native';
 import useInnerProps, { getCustomEvent } from '../getInnerListeners';
 import useNodesRef from '../useNodesRef';
+import { useLayout, useTransformStyle } from '../utils';
 const DEFAULT_IMAGE_WIDTH = 320;
 const DEFAULT_IMAGE_HEIGHT = 240;
 // const REMOTE_SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i
@@ -35,7 +36,7 @@ const cropMode = [
     'top left',
     'top right',
     'bottom left',
-    'bottom right',
+    'bottom right'
 ];
 const ModeMap = new Map([
     ['scaleToFill', 'stretch'],
@@ -43,7 +44,7 @@ const ModeMap = new Map([
     ['aspectFill', 'cover'],
     ['widthFix', 'stretch'],
     ['heightFix', 'stretch'],
-    ...cropMode.map(mode => [mode, 'stretch']),
+    ...cropMode.map(mode => [mode, 'stretch'])
 ]);
 const isNumber = (value) => typeof value === 'number';
 const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2;
@@ -56,15 +57,26 @@ const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2
 const Image = forwardRef((props, ref) => {
     const { src = '', mode = 'scaleToFill', 
     // svg = false,
-    style = {}, 'enable-offset': enableOffset, bindload, binderror } = props;
-    const { width = DEFAULT_IMAGE_WIDTH, height = DEFAULT_IMAGE_HEIGHT } = style;
+    style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindload, binderror } = props;
+    const defaultStyle = {
+        width: DEFAULT_IMAGE_WIDTH,
+        height: DEFAULT_IMAGE_HEIGHT
+    };
+    const styleObj = {
+        ...defaultStyle,
+        ...style,
+        overflow: 'hidden'
+    };
     const { nodeRef } = useNodesRef(props, ref, {
-        defaultStyle: {
-            width: DEFAULT_IMAGE_WIDTH,
-            height: DEFAULT_IMAGE_HEIGHT
-        }
+        defaultStyle
     });
-    const layoutRef = useRef({});
+    const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
+        setViewWidth(width);
+        setViewHeight(height);
+    };
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout });
+    const { width, height } = normalStyle;
     const preSrc = useRef();
     const resizeMode = ModeMap.get(mode) || 'stretch';
     const isWidthFixMode = mode === 'widthFix';
@@ -138,15 +150,6 @@ const Image = forwardRef((props, ref) => {
                 layoutRef
             }, props));
     };
-    const onViewLayout = ({ nativeEvent: { layout: { width, height }, }, }) => {
-        setViewWidth(width);
-        setViewHeight(height);
-    };
-    const onImageLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
-    };
     useEffect(() => {
         if (!isWidthFixMode && !isHeightFixMode && !isCropMode) {
             setLoaded(true);
@@ -181,10 +184,14 @@ const Image = forwardRef((props, ref) => {
     }, [isWidthFixMode, isHeightFixMode, isCropMode, src]);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        ...(enableOffset ? { onLayout: onImageLayout } : {})
-    }, [
-        'enable-offset'
-    ], {
+        style: {
+            ...normalStyle,
+            ...layoutStyle,
+            ...(isHeightFixMode && { width: fixedWidth }),
+            ...(isWidthFixMode && { height: fixedHeight })
+        },
+        ...layoutProps
+    }, [], {
         layoutRef
     });
     // if (typeof src === 'string' && REMOTE_SVG_REGEXP.test(src)) {
@@ -205,17 +212,11 @@ const Image = forwardRef((props, ref) => {
     //     </Suspense>
     //   )
     // }
-    return (<View style={{
-            width, height,
-            ...style,
-            ...(isHeightFixMode && { width: fixedWidth }),
-            ...(isWidthFixMode && { height: fixedHeight }),
-            overflow: 'hidden',
-        }} onLayout={onViewLayout}>
-      {loaded && <RNImage {...innerProps} source={source} resizeMode={resizeMode} onLoad={onImageLoad} onError={onImageError} style={{
+    return (<View {...innerProps}>
+      {loaded && <RNImage source={source} resizeMode={resizeMode} onLoad={onImageLoad} onError={onImageError} style={{
                 ...StyleSheet.absoluteFillObject,
-                width: !isCropMode ? '100%' : imageWidth,
-                height: !isCropMode ? '100%' : imageHeight,
+                width: isCropMode ? imageWidth : '100%',
+                height: isCropMode ? imageHeight : '100%',
                 ...(isCropMode && cropModeStyle)
             }}/>}
     </View>);

package/lib/runtime/components/react/dist/mpx-image/svg.jsx

@@ -1,5 +1,7 @@
 import { SvgCssUri, WithLocalSvg } from 'react-native-svg/css';
 const Svg = ({ local = false, src, style, width, height }) => {
-    return local ? (<WithLocalSvg style={style} asset={src} width={width} height={height}/>) : (<SvgCssUri style={style} uri={src} width={width} height={height}/>);
+    return local
+        ? (<WithLocalSvg style={style} asset={src} width={width} height={height}/>)
+        : (<SvgCssUri style={style} uri={src} width={width} height={height}/>);
 };
 export default Svg;

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -39,7 +39,8 @@
  */
 import { forwardRef, useMemo, useRef, useState, useContext, useEffect } from 'react';
 import { Platform, TextInput } from 'react-native';
-import { parseInlineStyle, useUpdateEffect, throwReactWarning } from './utils';
+import { warn } from '@mpxjs/utils';
+import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext } from './context';
@@ -49,29 +50,37 @@ const keyboardTypeMap = {
     idcard: 'default',
     digit: Platform.select({
         ios: 'decimal-pad',
-        android: 'numeric',
-    }) || '',
+        android: 'numeric'
+    }) || ''
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-offset': enableOffset, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
-    multiline, 'auto-height': autoHeight, bindlinechange, } = props;
+    multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
     let formValuesMap;
     if (formContext) {
         formValuesMap = formContext.formValuesMap;
     }
-    const { nodeRef } = useNodesRef(props, ref);
     const keyboardType = keyboardTypeMap[type];
     const defaultValue = type === 'number' && value ? value + '' : value;
     const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color;
     const textAlignVertical = multiline ? 'top' : 'auto';
-    const layoutRef = useRef({});
     const tmpValue = useRef();
     const cursorIndex = useRef(0);
     const lineCount = useRef(0);
     const [inputValue, setInputValue] = useState(defaultValue);
     const [contentHeight, setContentHeight] = useState(0);
+    const styleObj = {
+        padding: 0,
+        ...style,
+        ...multiline && autoHeight && {
+            height: Math.max(style?.minHeight || 35, contentHeight)
+        }
+    };
+    const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { nodeRef } = useNodesRef(props, ref);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {
             setInputValue(value);
@@ -88,7 +97,7 @@ const Input = forwardRef((props, ref) => {
     const onTextInput = ({ nativeEvent }) => {
         if (!bindinput && !bindblur)
             return;
-        const { range: { start, end }, text, } = nativeEvent;
+        const { range: { start, end }, text } = nativeEvent;
         cursorIndex.current = start < end ? start : start + text.length;
     };
     const onChange = (evt) => {
@@ -98,7 +107,7 @@ const Input = forwardRef((props, ref) => {
         const result = bindinput(getCustomEvent('input', evt, {
             detail: {
                 value: evt.nativeEvent.text,
-                cursor: cursorIndex.current,
+                cursor: cursorIndex.current
             },
             layoutRef
         }, props));
@@ -114,7 +123,7 @@ const Input = forwardRef((props, ref) => {
         bindfocus &&
             bindfocus(getCustomEvent('focus', evt, {
                 detail: {
-                    value: tmpValue.current || '',
+                    value: tmpValue.current || ''
                 },
                 layoutRef
             }, props));
@@ -124,7 +133,7 @@ const Input = forwardRef((props, ref) => {
             bindblur(getCustomEvent('blur', evt, {
                 detail: {
                     value: tmpValue.current || '',
-                    cursor: cursorIndex.current,
+                    cursor: cursorIndex.current
                 },
                 layoutRef
             }, props));
@@ -134,7 +143,7 @@ const Input = forwardRef((props, ref) => {
             evt.nativeEvent.key === 'Enter' &&
             bindconfirm(getCustomEvent('confirm', evt, {
                 detail: {
-                    value: tmpValue.current || '',
+                    value: tmpValue.current || ''
                 },
                 layoutRef
             }, props));
@@ -144,7 +153,7 @@ const Input = forwardRef((props, ref) => {
             multiline &&
             bindconfirm(getCustomEvent('confirm', evt, {
                 detail: {
-                    value: tmpValue.current || '',
+                    value: tmpValue.current || ''
                 },
                 layoutRef
             }, props));
@@ -161,7 +170,7 @@ const Input = forwardRef((props, ref) => {
                     detail: {
                         height,
                         lineHeight,
-                        lineCount: lineCount.current,
+                        lineCount: lineCount.current
                     },
                     layoutRef
                 }, props));
@@ -173,16 +182,11 @@ const Input = forwardRef((props, ref) => {
             bindselectionchange(getCustomEvent('selectionchange', evt, {
                 detail: {
                     selectionStart: evt.nativeEvent.selection.start,
-                    selectionEnd: evt.nativeEvent.selection.end,
+                    selectionEnd: evt.nativeEvent.selection.end
                 },
                 layoutRef
             }, props));
     };
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
-    };
     const resetValue = () => {
         setInputValue('');
     };
@@ -191,7 +195,7 @@ const Input = 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 });
@@ -205,21 +209,21 @@ const Input = forwardRef((props, ref) => {
             ? nodeRef.current?.focus()
             : nodeRef.current?.blur();
     }, [focus]);
+    const composeStyle = { ...normalStyle, ...layoutStyle };
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        ...(enableOffset ? { onLayout } : {}),
-    }, [
-        'enable-offset'
-    ], {
-        layoutRef
-    });
-    return (<TextInput {...innerProps} keyboardType={keyboardType} secureTextEntry={!!password} defaultValue={defaultValue} value={inputValue} maxLength={maxlength === -1 ? undefined : maxlength} editable={!disabled} autoFocus={!!autoFocus || !!focus} returnKeyType={confirmType} selection={selection} selectionColor={cursorColor} blurOnSubmit={!multiline && !confirmHold} underlineColorAndroid="rgba(0,0,0,0)" textAlignVertical={textAlignVertical} placeholderTextColor={placeholderTextColor} multiline={!!multiline} onTextInput={onTextInput} onChange={onChange} onFocus={onInputFocus} onBlur={onInputBlur} onKeyPress={onKeyPress} onSubmitEditing={onSubmitEditing} onContentSizeChange={onContentSizeChange} onSelectionChange={onSelectionChange} style={{
+        style: {
             padding: 0,
-            ...style,
+            ...composeStyle,
             ...multiline && autoHeight && {
-                height: Math.max(style?.minHeight || 35, contentHeight)
+                height: Math.max(composeStyle?.minHeight || 35, contentHeight)
             }
-        }}/>);
+        },
+        ...layoutProps
+    }, [], {
+        layoutRef
+    });
+    return (<TextInput {...innerProps} keyboardType={keyboardType} secureTextEntry={!!password} defaultValue={defaultValue} value={inputValue} maxLength={maxlength === -1 ? undefined : maxlength} editable={!disabled} autoFocus={!!autoFocus || !!focus} returnKeyType={confirmType} selection={selection} selectionColor={cursorColor} blurOnSubmit={!multiline && !confirmHold} underlineColorAndroid="rgba(0,0,0,0)" textAlignVertical={textAlignVertical} placeholderTextColor={placeholderTextColor} multiline={!!multiline} onTextInput={onTextInput} onChange={onChange} onFocus={onInputFocus} onBlur={onInputBlur} onKeyPress={onKeyPress} onSubmitEditing={onSubmitEditing} onContentSizeChange={onContentSizeChange} onSelectionChange={onSelectionChange}/>);
 });
 Input.displayName = 'mpx-input';
 export default Input;

package/lib/runtime/components/react/dist/mpx-label.jsx

@@ -2,60 +2,52 @@
  * ✘ for
  */
 import { useRef, forwardRef } from 'react';
-import { View, Text, } from 'react-native';
+import { View } from 'react-native';
+import { noop, warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { every, splitStyle, splitProps, isText, throwReactWarning } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
 import { LabelContext } from './context';
-const Label = forwardRef((props, ref) => {
-    const { style = {}, 'enable-offset': enableOffset, children, bindtap } = props;
-    const { textStyle, imageStyle, innerStyle } = splitStyle(style);
-    if (imageStyle) {
-        throwReactWarning('[Mpx runtime warn]: Label does not support background image-related styles!');
-    }
+const Label = forwardRef((labelProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(labelProps);
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap } = props;
     const defaultStyle = {
-        flexDirection: 'row',
+        flexDirection: 'row'
+    };
+    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 { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Label does not support background image-related styles!');
+    }
     const contextRef = useRef({
-        triggerChange: () => { }
+        triggerChange: noop
     });
-    const layoutRef = useRef({});
-    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 onTap = (evt) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         contextRef.current.triggerChange?.(evt);
     };
-    const wrapChildren = (children, textStyle) => {
-        const { textProps } = splitProps(props);
-        if (every(children, (child) => isText(child))) {
-            if (textStyle || textProps) {
-                children = <Text key='labelTextWrap' style={textStyle || {}} {...(textProps || {})}>{children}</Text>;
-            }
-        }
-        else {
-            if (textStyle)
-                throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the Label is Text node!');
-        }
-        return children;
-    };
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: { ...defaultStyle, ...innerStyle },
-        bindtap: onTap,
-        ...(enableOffset ? { onLayout } : {})
-    }, ['enable-offset'], {
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
+        bindtap: onTap
+    }, [], {
         layoutRef
     });
     return <View {...innerProps}>
       <LabelContext.Provider value={contextRef}>
-        {wrapChildren(children, textStyle)}
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
       </LabelContext.Provider>
     </View>;
 });

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -2,43 +2,38 @@
  * ✘ scale-area
  */
 import { View } from 'react-native';
-import { useState, useEffect, useRef, forwardRef } from 'react';
+import { useState, useEffect, forwardRef } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
+import { useTransformStyle, wrapChildren, useLayout } from './utils';
 const _MovableArea = forwardRef((props, ref) => {
-    const { children, style = {}, width = 10, height = 10 } = props;
+    const { style = {}, width = 10, height = 10, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [areaWidth, setAreaWidth] = useState(0);
     const [areaHeight, setAreaHeight] = useState(0);
-    const layoutRef = useRef({});
     useEffect(() => {
         setAreaWidth(width);
         setAreaHeight(height);
     }, [width, height]);
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { nodeRef: movableViewRef } = useNodesRef(props, ref);
     const onLayout = (e) => {
         const { width = 10, height = 10 } = e.nativeEvent.layout;
         setAreaWidth(width);
         setAreaHeight(height);
-        movableViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
     };
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef, onLayout });
     const innerProps = useInnerProps(props, {
+        style: { height: areaHeight, width: areaWidth, overflow: 'hidden', ...normalStyle, ...layoutStyle },
         ref: movableViewRef,
-        onLayout
-    }, [
-        'children',
-        'style',
-    ], { layoutRef });
+        ...layoutProps
+    }, [], { layoutRef });
     return (<MovableAreaContext.Provider value={{ height: areaHeight, width: areaWidth }}>
-      <View {...innerProps} style={{
-            height: areaHeight,
-            width: areaWidth,
-            overflow: 'hidden',
-            ...style
-        }}>
-        {children}
+      <View {...innerProps}>
+      {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current
+        })}
       </View>
     </MovableAreaContext.Provider>);
 });

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

@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
         position: 'absolute',
         left: 0,
         top: 0
-    },
+    }
 });
 const _MovableView = forwardRef((props, ref) => {
     const { children, friction = 7, scale = false, direction = 'none', x = 0, y = 0, style = {}, 'scale-min': scaleMin = 0.1, 'scale-max': scaleMax = 10, 'scale-value': originScaleValue = 1, bindscale, bindchange } = props;
@@ -45,9 +45,9 @@ const _MovableView = forwardRef((props, ref) => {
         defaultStyle: styles.container
     });
     let panResponder = {};
-    let isFirstTouch = useRef(true);
-    let touchEvent = useRef('');
-    let initialDistance = useRef(0);
+    const isFirstTouch = useRef(true);
+    const touchEvent = useRef('');
+    const initialDistance = useRef(0);
     propsRef.current = props;
     useEffect(() => {
         if (scale && (scaleValue.current._value !== originScaleValue)) {
@@ -55,7 +55,7 @@ const _MovableView = forwardRef((props, ref) => {
             Animated.spring(scaleValue.current, {
                 toValue: clampedScale,
                 friction,
-                useNativeDriver: false,
+                useNativeDriver: false
             }).start(() => {
                 bindscale && bindscale(getCustomEvent('scale', {}, {
                     detail: {
@@ -186,7 +186,7 @@ const _MovableView = forwardRef((props, ref) => {
                         null,
                         {
                             dx: direction === 'all' || direction === 'horizontal' ? pan.current.x : new Animated.Value(0),
-                            dy: direction === 'all' || direction === 'vertical' ? pan.current.y : new Animated.Value(0),
+                            dy: direction === 'all' || direction === 'vertical' ? pan.current.y : new Animated.Value(0)
                         }
                     ], {
                         useNativeDriver: false
@@ -316,8 +316,8 @@ const _MovableView = forwardRef((props, ref) => {
         ref: nodeRef,
         ...panResponder.panHandlers,
         onLayout,
-        ...(hasTouchmove() ? { 'bindtouchmove': onTouchMove } : {}),
-        ...(hasCatchTouchmove() ? { 'catchtouchmove': onCatchTouchMove } : {}),
+        ...(hasTouchmove() ? { bindtouchmove: onTouchMove } : {}),
+        ...(hasCatchTouchmove() ? { catchtouchmove: onCatchTouchMove } : {})
     }, [
         'children',
         'style',

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

@@ -1,5 +1,6 @@
 import { View } from 'react-native';
 import React, { forwardRef, useRef, useContext, useState } from 'react';
+import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from '../getInnerListeners';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 import Selector from './selector';
@@ -8,7 +9,6 @@ import DateSelector from './date';
 import MultiSelector from './multiSelector';
 import RegionSelector from './region';
 import { FormContext } from '../context';
-import { throwReactWarning } from '../utils';
 /**
  * ✔ mode
  * ✔ disabled
@@ -29,7 +29,7 @@ import { throwReactWarning } from '../utils';
  */
 const _Picker = forwardRef((props, ref) => {
     const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props;
-    let innerLayout = useRef({});
+    const innerLayout = useRef({});
     const { nodeRef } = useNodesRef(props, ref, {});
     const innerProps = useInnerProps(props, {
         ref: nodeRef
@@ -57,7 +57,7 @@ const _Picker = 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 });
@@ -88,26 +88,26 @@ const _Picker = forwardRef((props, ref) => {
     const selectorProps = {
         ...commonProps,
         value: pickerValue,
-        range: props['range'],
+        range: props.range,
         'range-key': props['range-key']
     };
     const multiProps = {
         ...commonProps,
         value: pickerValue,
-        range: props['range'],
+        range: props.range,
         'range-key': props['range-key']
     };
     const timeProps = {
         ...commonProps,
         value: pickerValue,
-        start: props['start'],
-        end: props['end']
+        start: props.start,
+        end: props.end
     };
     const dateProps = {
         ...commonProps,
         value: pickerValue,
-        start: props['start'],
-        end: props['end'],
+        start: props.start,
+        end: props.end,
         fileds: props.fields || 'day'
     };
     const regionProps = {

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

@@ -17,7 +17,7 @@ function formatRangeFun(range = [], rangeKey) {
     });
     let tmp = result;
     for (let i = 1; i < range.length; i++) {
-        let child = Array.isArray(range[i]) ? range[i] : [];
+        const child = Array.isArray(range[i]) ? range[i] : [];
         const nextColData = child.map(item => {
             return convertToObj(item, rangeKey);
         });
@@ -44,7 +44,7 @@ function getIndexByValues(range = [], value = []) {
 function getInnerValueByIndex(range = [], value = []) {
     let tmp = range;
     return value.map(v => {
-        let current = tmp[v].value;
+        const current = tmp[v].value;
         tmp = tmp[v].children;
         return current;
     });
@@ -60,6 +60,7 @@ function getColumnIndexByValue(range = [], column, value = []) {
                 if (ritem.value === item) {
                     changeIndex = rindex;
                 }
+                return ritem;
             });
         }
         else {
@@ -67,16 +68,18 @@ function getColumnIndexByValue(range = [], column, value = []) {
                 if (citem.value === item) {
                     tmpRange = citem.children;
                 }
+                return citem;
             });
             curRange = tmpRange;
         }
+        return item;
     });
     return changeIndex;
 }
 const _MultiSelectorPicker = forwardRef((props, ref) => {
     const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange } = props;
-    let formatRange = formatRangeFun(range, props['range-key']);
-    let initValue = getInnerValueByIndex(formatRange, value);
+    const formatRange = formatRangeFun(range, props['range-key']);
+    const initValue = getInnerValueByIndex(formatRange, value);
     // 选中的索引值
     const [selected, setSelected] = useState(initValue);
     // range数据源