@mpxjs/webpack-plugin 2.9.69 → 2.9.70-alpha.0

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

@@ -0,0 +1,291 @@
+/**
+ * ✔ src
+ * ✔ mode
+ * ✘ show-menu-by-longpress
+ * ✔ binderror
+ * ✔ bindload
+ * ✘ fade-in
+ * ✔ webp
+ * ✘ lazy-load
+ * ✔ bindtap
+ * ✔ DEFAULT_SIZE
+ */
+import { useEffect, useMemo, useState, useRef, forwardRef, createElement } from 'react';
+import { Image as RNImage, View } from 'react-native';
+import { noop } from '@mpxjs/utils';
+import { SvgCssUri } from 'react-native-svg/css';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils';
+const DEFAULT_IMAGE_WIDTH = 320;
+const DEFAULT_IMAGE_HEIGHT = 240;
+const cropMode = [
+    'top',
+    'bottom',
+    'center',
+    'right',
+    'left',
+    'top left',
+    'top right',
+    'bottom left',
+    'bottom right'
+];
+const ModeMap = new Map([
+    ['scaleToFill', 'stretch'],
+    ['aspectFit', 'contain'],
+    ['aspectFill', 'cover'],
+    ['widthFix', 'stretch'],
+    ['heightFix', 'stretch'],
+    ...cropMode.map(mode => [mode, 'stretch'])
+]);
+const isNumber = (value) => typeof value === 'number';
+const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2;
+function noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio) {
+    const isMeetSize = viewWidth && viewHeight && ratio;
+    if (isSvg && !isMeetSize)
+        return true;
+    if (!isSvg && !['scaleToFill', 'aspectFit', 'aspectFill'].includes(mode) && !isMeetSize)
+        return true;
+    return false;
+}
+const Image = forwardRef((props, ref) => {
+    const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, bindload, binderror } = props;
+    const defaultStyle = {
+        width: DEFAULT_IMAGE_WIDTH,
+        height: DEFAULT_IMAGE_HEIGHT
+    };
+    const styleObj = extendObject({}, defaultStyle, style, { overflow: 'hidden' });
+    const state = useRef({});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        defaultStyle
+    });
+    const isSvg = SVG_REGEXP.test(src);
+    const isWidthFixMode = mode === 'widthFix';
+    const isHeightFixMode = mode === 'heightFix';
+    const isCropMode = cropMode.includes(mode);
+    const isLayoutMode = isWidthFixMode || isHeightFixMode || isCropMode;
+    const resizeMode = ModeMap.get(mode) || 'stretch';
+    const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
+        state.current.viewWidth = width;
+        state.current.viewHeight = height;
+        if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
+            setViewWidth(width);
+            setViewHeight(height);
+            setRatio(state.current.ratio);
+            setImageWidth(state.current.imageWidth);
+            setImageHeight(state.current.imageHeight);
+            state.current = {};
+            setLoaded(true);
+        }
+    };
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef,
+        onLayout: isLayoutMode ? onLayout : noop
+    });
+    const { width, height } = normalStyle;
+    const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0);
+    const [viewHeight, setViewHeight] = useState(isNumber(height) ? height : 0);
+    const [imageWidth, setImageWidth] = useState(0);
+    const [imageHeight, setImageHeight] = useState(0);
+    const [ratio, setRatio] = useState(0);
+    const [loaded, setLoaded] = useState(!isLayoutMode);
+    const fixedHeight = useMemo(() => {
+        const fixed = viewWidth * ratio;
+        return !fixed ? viewHeight : fixed;
+    }, [ratio, viewWidth, viewHeight]);
+    const fixedWidth = useMemo(() => {
+        if (!ratio)
+            return viewWidth;
+        const fixed = viewHeight / ratio;
+        return !fixed ? viewWidth : fixed;
+    }, [ratio, viewWidth, viewHeight]);
+    const modeStyle = useMemo(() => {
+        if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio))
+            return {};
+        switch (mode) {
+            case 'scaleToFill':
+            case 'aspectFit':
+                if (isSvg) {
+                    const scale = ratio <= 1
+                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
+                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
+                    return {
+                        transform: [
+                            { scale },
+                            ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+                        ]
+                    };
+                }
+                return {};
+            case 'aspectFill':
+                if (isSvg) {
+                    const scale = ratio >= 1
+                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
+                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
+                    return {
+                        transform: [
+                            { scale },
+                            ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+                        ]
+                    };
+                }
+                return {};
+            case 'widthFix':
+            case 'heightFix':
+                if (isSvg) {
+                    const scale = ratio >= 1
+                        ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth
+                        : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight;
+                    return {
+                        transform: [{ scale }]
+                    };
+                }
+                return {};
+            case 'top':
+                return {
+                    transform: [
+                        { translateX: relativeCenteredSize(viewWidth, imageWidth) }
+                    ]
+                };
+            case 'bottom':
+                return {
+                    transform: [
+                        { translateY: viewHeight - imageHeight },
+                        { translateX: relativeCenteredSize(viewWidth, imageWidth) }
+                    ]
+                };
+            case 'center':
+                return {
+                    transform: [
+                        { translateY: relativeCenteredSize(viewHeight, imageHeight) },
+                        { translateX: relativeCenteredSize(viewWidth, imageWidth) }
+                    ]
+                };
+            case 'left':
+                return {
+                    transform: [
+                        { translateY: relativeCenteredSize(viewHeight, imageHeight) }
+                    ]
+                };
+            case 'right':
+                return {
+                    transform: [
+                        { translateY: relativeCenteredSize(viewHeight, imageHeight) },
+                        { translateX: viewWidth - imageWidth }
+                    ]
+                };
+            case 'top left':
+                return {};
+            case 'top right':
+                return {
+                    transform: [
+                        { translateX: viewWidth - imageWidth }
+                    ]
+                };
+            case 'bottom left':
+                return {
+                    transform: [
+                        { translateY: viewHeight - imageHeight }
+                    ]
+                };
+            case 'bottom right':
+                return {
+                    transform: [
+                        { translateY: viewHeight - imageHeight },
+                        { translateX: viewWidth - imageWidth }
+                    ]
+                };
+            default:
+                return {};
+        }
+    }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight]);
+    const onSvgLoad = (evt) => {
+        const { width, height } = evt.nativeEvent.layout;
+        setRatio(!width ? 0 : height / width);
+        setImageWidth(width);
+        setImageHeight(height);
+        bindload && bindload(getCustomEvent('load', evt, {
+            detail: { width, height },
+            layoutRef
+        }, props));
+    };
+    const onSvgError = (evt) => {
+        binderror(getCustomEvent('error', evt, {
+            detail: { errMsg: evt?.message },
+            layoutRef
+        }, props));
+    };
+    const onImageLoad = (evt) => {
+        evt.persist();
+        RNImage.getSize(src, (width, height) => {
+            bindload(getCustomEvent('load', evt, {
+                detail: { width, height },
+                layoutRef
+            }, props));
+        });
+    };
+    const onImageError = (evt) => {
+        binderror(getCustomEvent('error', evt, {
+            detail: { errMsg: evt.nativeEvent.error },
+            layoutRef
+        }, props));
+    };
+    useEffect(() => {
+        if (!isSvg && isLayoutMode) {
+            RNImage.getSize(src, (width, height) => {
+                state.current.imageWidth = width;
+                state.current.imageHeight = height;
+                state.current.ratio = !width ? 0 : height / width;
+                if (isWidthFixMode
+                    ? state.current.viewWidth
+                    : isHeightFixMode
+                        ? state.current.viewHeight
+                        : state.current.viewWidth && state.current.viewHeight) {
+                    state.current.viewWidth && setViewWidth(state.current.viewWidth);
+                    state.current.viewHeight && setViewHeight(state.current.viewHeight);
+                    setRatio(!width ? 0 : height / width);
+                    setImageWidth(width);
+                    setImageHeight(height);
+                    state.current = {};
+                    setLoaded(true);
+                }
+            });
+        }
+    }, [src, isSvg, isLayoutMode]);
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, isWidthFixMode ? { height: fixedHeight } : {})
+    }, layoutProps), [
+        'src',
+        'mode',
+        'svg'
+    ], {
+        layoutRef
+    });
+    return createElement(View, innerProps, isSvg
+        ? createElement(SvgCssUri, {
+            uri: src,
+            onLayout: onSvgLoad,
+            onError: binderror && onSvgError,
+            style: extendObject({ transformOrigin: 'top left' }, modeStyle)
+        })
+        : loaded && renderImage({
+            source: { uri: src },
+            resizeMode: resizeMode,
+            onLoad: bindload && onImageLoad,
+            onError: binderror && onImageError,
+            style: extendObject({
+                transformOrigin: 'top left',
+                width: isCropMode ? imageWidth : '100%',
+                height: isCropMode ? imageHeight : '100%'
+            }, isCropMode ? modeStyle : {})
+        }, enableFastImage));
+});
+Image.displayName = 'mpx-image';
+export default Image;

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

@@ -17,7 +17,7 @@
  * ✔ cursor-color
  * ✔ selection-start
  * ✔ selection-end
- * ✘ adjust-position
+ * ✔ adjust-position
  * ✘ hold-keyboard
  * ✘ safe-password-cert-path
  * ✘ safe-password-length
@@ -37,13 +37,13 @@
  * ✘ bind:keyboardcompositionend
  * ✘ bind:onkeyboardheightchange
  */
-import { forwardRef, useMemo, useRef, useState, useContext, useEffect } from 'react';
+import { forwardRef, useMemo, useRef, useState, useContext, useEffect, createElement } from 'react';
 import { Platform, TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout } from './utils';
+import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { FormContext } from './context';
+import { FormContext, KeyboardAvoidContext } from './context';
 const keyboardTypeMap = {
     text: 'default',
     number: 'numeric',
@@ -54,10 +54,11 @@ const keyboardTypeMap = {
     }) || ''
 };
 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-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling = false, 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, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
+    const setKeyboardAvoidEnabled = useContext(KeyboardAvoidContext);
     let formValuesMap;
     if (formContext) {
         formValuesMap = formContext.formValuesMap;
@@ -66,21 +67,19 @@ const Input = forwardRef((props, ref) => {
     const defaultValue = type === 'number' && value ? value + '' : value;
     const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color;
     const textAlignVertical = multiline ? 'top' : 'auto';
-    const tmpValue = useRef();
+    const tmpValue = useRef(defaultValue);
     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 styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
+        ? { minHeight: Math.max(style?.minHeight || 35, contentHeight) }
+        : {});
     const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {
@@ -203,6 +202,9 @@ const Input = forwardRef((props, ref) => {
             }
         };
     }, []);
+    useEffect(() => {
+        setKeyboardAvoidEnabled?.(adjustPosition);
+    }, [adjustPosition]);
     useUpdateEffect(() => {
         if (!nodeRef?.current) {
             return;
@@ -211,26 +213,51 @@ const Input = forwardRef((props, ref) => {
             ? nodeRef.current?.focus()
             : nodeRef.current?.blur();
     }, [focus]);
-    const composeStyle = { ...normalStyle, ...layoutStyle };
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: {
-            padding: 0,
-            ...composeStyle,
-            ...multiline && autoHeight && {
-                height: Math.max(composeStyle?.minHeight || 35, contentHeight)
-            }
-        },
-        ...layoutProps,
+        style: extendObject({}, normalStyle, layoutStyle),
+        allowFontScaling,
+        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
+    }, layoutProps, {
         onFocus: bindfocus && onInputFocus,
         onBlur: bindblur && onInputBlur,
         onKeyPress: bindconfirm && onKeyPress,
         onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-        onSelectionChange: bindselectionchange && onSelectionChange
-    }, [], {
+        onSelectionChange: bindselectionchange && onSelectionChange,
+        onTextInput: onTextInput,
+        onChange: onChange,
+        onContentSizeChange: onContentSizeChange
+    }), [
+        'type',
+        'password',
+        'placeholder-style',
+        'disabled',
+        'auto-focus',
+        'focus',
+        'confirm-type',
+        'confirm-hold',
+        'cursor',
+        'cursor-color',
+        'selection-start',
+        'selection-end'
+    ], {
         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} onContentSizeChange={onContentSizeChange}/>);
+    return createElement(TextInput, innerProps);
 });
 Input.displayName = 'MpxInput';
 export default Input;

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

@@ -1,12 +1,12 @@
 /**
  * ✘ for
  */
-import { useRef, forwardRef, useCallback } from 'react';
+import { useRef, forwardRef, useCallback, createElement } from 'react';
 import { View } from 'react-native';
 import { noop, warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import { LabelContext } from './context';
 const Label = forwardRef((labelProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps);
@@ -16,15 +16,12 @@ const Label = forwardRef((labelProps, ref) => {
     const defaultStyle = {
         flexDirection: 'row'
     };
-    const styleObj = {
-        ...defaultStyle,
-        ...style
-    };
+    const styleObj = extendObject({}, defaultStyle, style);
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, { defaultStyle });
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
     if (backgroundStyle) {
         warn('Label does not support background image-related styles!');
     }
@@ -36,24 +33,20 @@ const Label = forwardRef((labelProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }));
         contextRef.current.triggerChange(evt);
     }, []);
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
+        style: extendObject({}, innerStyle, layoutStyle)
+    }, layoutProps, {
         bindtap: onTap
-    }, [], {
+    }), [], {
         layoutRef
     });
-    return <View {...innerProps}>
-      <LabelContext.Provider value={contextRef}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-      </LabelContext.Provider>
-    </View>;
+    return createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
 });
 Label.displayName = 'MpxLabel';
 export default Label;

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

@@ -2,34 +2,31 @@
  * ✘ scale-area
  */
 import { View } from 'react-native';
-import { forwardRef, useRef, useMemo } from 'react';
+import { forwardRef, useRef, useMemo, createElement } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, wrapChildren, useLayout } from './utils';
+import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
 const _MovableArea = forwardRef((props, ref) => {
     const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const movableViewRef = useRef(null);
-    useNodesRef(props, ref, movableViewRef);
+    useNodesRef(props, ref, movableViewRef, {
+        style: normalStyle
+    });
     const contextValue = useMemo(() => ({
         height: normalStyle.height || 10,
         width: normalStyle.width || 10
     }), [normalStyle.width, normalStyle.height]);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
-    const innerProps = useInnerProps(props, {
-        style: { height: contextValue.height, width: contextValue.width, overflow: 'hidden', ...normalStyle, ...layoutStyle },
-        ref: movableViewRef,
-        ...layoutProps
-    }, [], { layoutRef });
-    return (<MovableAreaContext.Provider value={contextValue}>
-      <View {...innerProps}>
-      {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        })}
-      </View>
-    </MovableAreaContext.Provider>);
+    const innerProps = useInnerProps(props, extendObject({
+        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+        ref: movableViewRef
+    }, layoutProps), [], { layoutRef });
+    return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    })));
 });
 _MovableArea.displayName = 'MpxMovableArea';
 export default _MovableArea;

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

@@ -17,12 +17,12 @@
  * ✔ htouchmove
  * ✔ vtouchmove
  */
-import { useEffect, forwardRef, useContext, useCallback, useRef, useMemo } from 'react';
+import { useEffect, forwardRef, useContext, useCallback, useRef, useMemo, createElement } from 'react';
 import { StyleSheet } from 'react-native';
 import { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture } from './utils';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, useAnimatedReaction, withSpring } from 'react-native-reanimated';
 const styles = StyleSheet.create({
@@ -64,7 +64,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const waitForHandlers = flatGesture(waitFor);
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        defaultStyle: styles.container,
+        style: normalStyle,
         gestureRef: movableGestureRef
     });
     const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
@@ -416,16 +416,16 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     };
     const catchEventHandlers = injectCatchEvent(props);
     const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
-    return (<GestureDetector gesture={gesture}>
-      <Animated.View ref={nodeRef} onLayout={onLayout} style={[innerStyle, animatedStyles, layoutStyle]} {...catchEventHandlers}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-      </Animated.View>
-    </GestureDetector>);
+    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, extendObject({
+        ref: nodeRef,
+        onLayout: onLayout,
+        style: [innerStyle, animatedStyles, layoutStyle]
+    }, catchEventHandlers), wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
 });
 _MovableView.displayName = 'MpxMovableView';
 export default _MovableView;

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

@@ -1,4 +1,4 @@
-import { useCallback, forwardRef } from 'react';
+import { useCallback, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import MpxView from './mpx-view';
@@ -27,9 +27,7 @@ const _Navigator = forwardRef((props, ref) => {
         ref,
         bindtap: handleClick
     });
-    return (<MpxView {...innerProps}>
-      {children}
-    </MpxView>);
+    return createElement(MpxView, innerProps, children);
 });
 _Navigator.displayName = 'MpxNavigator';
 export default _Navigator;

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

@@ -23,12 +23,15 @@ function dateToString(date, fields = 'day') {
     return ret;
 }
 const _DatePicker = forwardRef((props, ref) => {
-    const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields } = props;
+    const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields, style } = props;
     const [datevalue, setDateValue] = useState(value);
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     useEffect(() => {
         value && setDateValue(value);
     }, [value]);
@@ -48,6 +51,7 @@ const _DatePicker = forwardRef((props, ref) => {
         });
     };
     const dateProps = {
+        ref: nodeRef,
         precision: fields,
         value: formatTimeStr(datevalue),
         minDate: formatTimeStr(start),

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

@@ -28,10 +28,12 @@ import { FormContext } from '../context';
  * ✘ bindcolumnchange
  */
 const _Picker = forwardRef((props, ref) => {
-    const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props;
+    const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange, style } = props;
     const innerLayout = useRef({});
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {});
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     const innerProps = useInnerProps(props, {
         ref: nodeRef
     }, [], { layoutRef: innerLayout });
@@ -78,7 +80,7 @@ const _Picker = forwardRef((props, ref) => {
         bindcolumnchange && bindcolumnchange(eventData);
     };
     const commonProps = {
-        ...{ innerProps },
+        ...innerProps,
         mode,
         children,
         bindchange: onChange,