@mpxjs/webpack-plugin 2.10.17 → 2.10.18-beta.1

package/lib/runtime/components/react/dist/animationHooks/utils.js

@@ -0,0 +1,151 @@
+import { Easing, withTiming, withDelay } from 'react-native-reanimated';
+import { hasOwn } from '@mpxjs/utils';
+// ms s 单位匹配
+export const secondRegExp = /^\s*(\d*(?:\.\d+)?)(s|ms)?\s*$/;
+export const cubicBezierExp = /cubic-bezier\(["']?(.*?)["']?\)/;
+export const percentExp = /^((-?(\d+(\.\d+)?|\.\d+))%)$/;
+// export const PropNameColorExp = /^c|Color$/
+// export const NumberExp = /^((opacity|flex-grow|flex-shrink|gap|left|right|top|bottom)|(.+-(width|height|left|right|top|bottom|radius|spacing|size|gap|index|offset|opacity)))$/
+// export const ColorExp = /^(color|(.+Color))$/
+// transform
+// export const transform = 'transform'
+// export const transformOrigin = 'transformOrigin'
+// export const transition = 'transition'
+// 微信 timingFunction 和 RN Easing 对应关系
+export const easingKey = {
+    linear: Easing.linear,
+    ease: Easing.inOut(Easing.ease),
+    'ease-in': Easing.in(Easing.poly(3)),
+    'ease-in-out': Easing.inOut(Easing.poly(3)),
+    'ease-out': Easing.out(Easing.poly(3))
+    // 'step-start': '',
+    // 'step-end': ''
+};
+export const transformInitial = {
+    // matrix: 0,
+    // matrix3d: 0,
+    // rotate: '0deg',
+    rotateX: '0deg',
+    rotateY: '0deg',
+    rotateZ: '0deg',
+    // rotate3d:[0,0,0]
+    // scale: 1,
+    // scale3d: [1, 1, 1],
+    scaleX: 1,
+    scaleY: 1,
+    // scaleZ: 1,
+    // skew: 0,
+    skewX: '0deg',
+    skewY: '0deg',
+    // translate: 0,
+    // translate3d: 0,
+    translateX: 0,
+    translateY: 0
+    // translateZ: 0,
+};
+// animation api 动画默认初始值
+export const animationAPIInitialValue = Object.assign({
+    opacity: 1,
+    backgroundColor: 'transparent',
+    // fixme 未设置 height 初始值定义了 transition-property height 时把动画高度值把原由子元素撑开的高度给覆盖的问题
+    width: 'auto',
+    height: 'auto',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    transformOrigin: ['50%', '50%', 0]
+}, transformInitial);
+// transition property
+export const transitionSupportedProperty = Object.assign({
+    color: 'transparent',
+    borderColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: 'transparent',
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderRadius: 0,
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    borderWidth: 0,
+    margin: 0,
+    marginBottom: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 0,
+    marginHorizontal: 0,
+    marginVertical: 0,
+    maxHeight: 0,
+    maxWidth: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    fontSize: 0,
+    letterSpacing: 0 // Todo
+}, animationAPIInitialValue);
+// export type PropertyType = keyof transitionSupportedProperty
+// transform
+export const isTransform = (key) => hasOwn(transformInitial, key);
+// transform 数组转对象
+export function getTransformObj(transforms) {
+    'worklet';
+    return (transforms || []).reduce((transformObj, item) => {
+        return Object.assign(transformObj, item);
+    }, {});
+}
+// 获取样式初始值（prop style or 默认值）
+export function getInitialVal(style, key) {
+    if (isTransform(key) && Array.isArray(style.transform)) {
+        let initialVal = transitionSupportedProperty[key];
+        // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
+        style.transform.forEach(item => {
+            if (item[key] !== undefined)
+                initialVal = item[key];
+        });
+        return initialVal;
+    }
+    return style[key] === undefined ? transitionSupportedProperty[key] : style[key];
+}
+// animated key transform 格式化
+export function formatAnimatedKeys(keys) {
+    // console.log('formatAnimatedKeys keys=', keys)
+    const animatedKeys = [];
+    const transforms = [];
+    keys.forEach(key => {
+        if (isTransform(key)) {
+            transforms.push(key);
+        }
+        else {
+            animatedKeys.push(key);
+        }
+    });
+    if (transforms.length)
+        animatedKeys.push(transforms);
+    // console.log('formatAnimatedKeys animatedKeys=', animatedKeys)
+    return animatedKeys;
+}
+// 解析动画时长
+export function getUnit(duration) {
+    const match = secondRegExp.exec(duration);
+    return match ? match[2] === 's' ? +match[1] * 1000 : +match[1] : 0;
+}
+// 根据动画数据创建单个animation
+export function getAnimation({ key, value }, { delay = 0, duration, easing }, callback) {
+    // console.log('getAnimation', key, value, delay, duration, easing)
+    const animation = typeof callback === 'function'
+        ? withTiming(value, { duration, easing }, callback)
+        : withTiming(value, { duration, easing });
+    return delay ? withDelay(delay, animation) : animation;
+}

package/lib/runtime/components/react/dist/context.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, MutableRefObject, SetStateAction } from 'react';
-import { NativeSyntheticEvent, Animated } from 'react-native';
+import type { NativeSyntheticEvent, Animated, ScaledSize } from 'react-native';
 export type LabelContextValue = MutableRefObject<{
     triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void;
 }>;
@@ -7,8 +7,12 @@ export type KeyboardAvoidContextValue = MutableRefObject<{
     cursorSpacing: number;
     ref: MutableRefObject<any>;
     adjustPosition: boolean;
+    holdKeyboard?: boolean;
     keyboardHeight?: number;
+    /** @internal bindfocus 异步延迟上报方法 */
     onKeyboardShow?: () => void;
+    /** @internal 多个 Input 切换聚焦场景标记位 */
+    readyToShow?: boolean;
 } | null>;
 export interface GroupValue {
     [key: string]: {
@@ -44,12 +48,16 @@ export interface PortalContextValue {
 }
 export interface ScrollViewContextValue {
     gestureRef: React.RefObject<any> | null;
-    scrollOffset: Animated.Value;
+    scrollOffset: Animated.Value | null;
 }
 export interface RouteContextValue {
     pageId: number;
     navigation: Record<string, any>;
 }
+export interface DimensionsValue {
+    window: ScaledSize;
+    screen: ScaledSize;
+}
 export interface StickyContextValue {
     registerStickyHeader: Function;
     unregisterStickyHeader: Function;
@@ -72,4 +80,3 @@ export declare const ScrollViewContext: import("react").Context<ScrollViewContex
 export declare const PortalContext: import("react").Context<PortalContextValue>;
 export declare const StickyContext: import("react").Context<StickyContextValue>;
 export declare const ProviderContext: import("react").Context<null>;
-//# sourceMappingURL=context.d.ts.map

package/lib/runtime/components/react/dist/context.js

@@ -1,5 +1,4 @@
 import { createContext } from 'react';
-import { Animated } from 'react-native';
 import { noop } from '@mpxjs/utils';
 export const MovableAreaContext = createContext({ width: 0, height: 0 });
 export const FormContext = createContext(null);
@@ -12,7 +11,7 @@ export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
-export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
+export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: null });
 export const PortalContext = createContext(null);
 export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });
 export const ProviderContext = createContext(null);

package/lib/runtime/components/react/dist/event.config.d.ts

@@ -5,4 +5,3 @@ declare const eventConfigMap: {
     };
 };
 export default eventConfigMap;
-//# sourceMappingURL=event.config.d.ts.map

package/lib/runtime/components/react/dist/getInnerListeners.d.ts

@@ -5,4 +5,3 @@ export declare const getCustomEvent: (type: string | undefined, oe: any, { detai
 }, props?: Props) => any;
 declare const useInnerProps: (props?: Props, userRemoveProps?: RemoveProps, rawConfig?: RawConfig) => Record<string, (e: ExtendedNativeTouchEvent) => void> & Omit<Props, string>;
 export default useInnerProps;
-//# sourceMappingURL=getInnerListeners.d.ts.map

package/lib/runtime/components/react/dist/mpx-async-suspense.d.ts

@@ -10,4 +10,3 @@ interface AsyncSuspenseProps {
 }
 declare const AsyncSuspense: React.FC<AsyncSuspenseProps>;
 export default AsyncSuspense;
-//# sourceMappingURL=mpx-async-suspense.d.ts.map

package/lib/runtime/components/react/dist/mpx-async-suspense.jsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback, useRef, createElement } from 'react';
 import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
-import FastImage from '@d11/react-native-fast-image';
 const asyncChunkMap = new Map();
 const styles = StyleSheet.create({
     container: {
@@ -63,6 +62,9 @@ const DefaultFallback = ({ onReload }) => {
     </View>);
 };
 const DefaultLoading = () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const FastImageModule = require('@d11/react-native-fast-image');
+    const FastImage = FastImageModule.default || FastImageModule;
     return (<View style={styles.container}>
       <FastImage style={styles.loadingImage} source={{
             uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif'

package/lib/runtime/components/react/dist/mpx-button.d.ts

@@ -66,4 +66,3 @@ export interface ButtonProps {
 }
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HandlerRef<View, ButtonProps>>>;
 export default Button;
-//# sourceMappingURL=mpx-button.d.ts.map

package/lib/runtime/components/react/dist/mpx-camera.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+interface CameraProps {
+    mode?: 'normal' | 'scanCode';
+    resolution?: 'low' | 'medium' | 'high';
+    devicePosition?: 'front' | 'back';
+    flash?: 'auto' | 'on' | 'off';
+    frameSize?: 'small' | 'medium' | 'large';
+    style?: Record<string, any>;
+    bindstop?: () => void;
+    binderror?: (error: {
+        message: string;
+    }) => void;
+    bindinitdone?: (result: {
+        type: string;
+        data: string;
+    }) => void;
+    bindscancode?: (result: {
+        type: string;
+        data: string;
+    }) => void;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'enable-var'?: boolean;
+    'external-var-context'?: any;
+}
+type HandlerRef<T, P> = {
+    current: T | null;
+};
+declare const _camera: React.ForwardRefExoticComponent<CameraProps & React.RefAttributes<HandlerRef<any, CameraProps>>>;
+export default _camera;

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

@@ -0,0 +1,236 @@
+import { createElement, forwardRef, useRef, useCallback, useContext, useState, useEffect } from 'react';
+import { useTransformStyle, useLayout, extendObject } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { noop } from '@mpxjs/utils';
+import { RouteContext } from './context';
+const qualityValue = {
+    high: 90,
+    normal: 75,
+    low: 50,
+    original: 100
+};
+let RecordRes = null;
+const _camera = forwardRef((props, ref) => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { Camera, useCameraDevice, useCodeScanner, useCameraFormat } = require('react-native-vision-camera');
+    const cameraRef = useRef(null);
+    const { mode = 'normal', resolution = 'medium', devicePosition = 'back', flash = 'auto', frameSize = 'medium', bindinitdone, bindstop, bindscancode, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-var': enableVar, 'external-var-context': externalVarContext, style = {} } = props;
+    const styleObj = extendObject({}, style);
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: cameraRef });
+    const isPhoto = mode === 'normal';
+    const device = useCameraDevice(devicePosition || 'back');
+    const { navigation } = useContext(RouteContext) || {};
+    const [zoomValue, setZoomValue] = useState(1);
+    const [hasPermission, setHasPermission] = useState(null);
+    const hasCamera = useRef(false);
+    // 先定义常量，避免在条件判断后使用
+    const maxZoom = device?.maxZoom || 1;
+    const RESOLUTION_MAPPING = {
+        low: { width: 640, height: 480 },
+        medium: { width: 1280, height: 720 },
+        high: { width: 1920, height: 1080 }
+    };
+    const FRAME_SIZE_MAPPING = {
+        small: { width: 480, height: 360 },
+        medium: { width: 720, height: 540 },
+        large: { width: 1080, height: 810 }
+    };
+    const format = useCameraFormat(device, [
+        {
+            photoResolution: RESOLUTION_MAPPING[resolution],
+            videoResolution: FRAME_SIZE_MAPPING[frameSize] || RESOLUTION_MAPPING[resolution]
+        }
+    ]);
+    const codeScanner = useCodeScanner({
+        codeTypes: ['qr', 'ean-13'],
+        onCodeScanned: (codes) => {
+            const result = codes.map(code => code.value).join(',');
+            bindscancode && bindscancode(getCustomEvent('scancode', {}, {
+                detail: {
+                    result: codes.map(code => code.value).join(',')
+                }
+            }));
+        }
+    });
+    const onInitialized = useCallback(() => {
+        bindinitdone && bindinitdone(getCustomEvent('initdone', {}, {
+            detail: {
+                maxZoom
+            }
+        }));
+    }, [bindinitdone, maxZoom]);
+    const onStopped = useCallback(() => {
+        bindstop && bindstop();
+    }, [bindstop]);
+    const camera = {
+        setZoom: (zoom) => {
+            setZoomValue(zoom);
+        },
+        takePhoto: (options = {}) => {
+            const { success = noop, fail = noop, complete = noop } = options;
+            cameraRef.current?.takePhoto?.({
+                flash,
+                quality: qualityValue[options.quality || 'normal']
+            }).then((res) => {
+                const result = {
+                    errMsg: 'takePhoto:ok',
+                    tempImagePath: res.path
+                };
+                success(result);
+                complete(result);
+            }).catch(() => {
+                const result = {
+                    errMsg: 'takePhoto:fail'
+                };
+                fail(result);
+                complete(result);
+            });
+        },
+        startRecord: (options = {}) => {
+            let { timeout = 30, success = noop, fail = noop, complete = noop, timeoutCallback = noop } = options;
+            timeout = timeout > 300 ? 300 : timeout;
+            let recordTimer = null;
+            let isTimeout = false;
+            try {
+                const result = {
+                    errMsg: 'startRecord:ok'
+                };
+                success(result);
+                complete(result);
+                cameraRef.current?.startRecording?.({
+                    flash,
+                    onRecordingError: (error) => {
+                        if (recordTimer)
+                            clearTimeout(recordTimer);
+                        const errorResult = {
+                            errMsg: 'startRecord:fail during recording',
+                            error: error
+                        };
+                        timeoutCallback(errorResult);
+                    },
+                    onRecordingFinished: (video) => {
+                        RecordRes = video;
+                        if (recordTimer)
+                            clearTimeout(recordTimer);
+                    }
+                });
+                recordTimer = setTimeout(() => {
+                    isTimeout = true;
+                    cameraRef.current?.stopRecording().catch(() => {
+                        // 忽略停止录制时的错误
+                    });
+                }, timeout * 1000);
+            }
+            catch (error) {
+                if (recordTimer)
+                    clearTimeout(recordTimer);
+                const result = {
+                    errMsg: 'startRecord:fail ' + (error.message || 'unknown error')
+                };
+                fail(result);
+                complete(result);
+            }
+        },
+        stopRecord: (options = {}) => {
+            const { success = noop, fail = noop, complete = noop } = options;
+            try {
+                cameraRef.current?.stopRecording().then(() => {
+                    setTimeout(() => {
+                        if (RecordRes) {
+                            const result = {
+                                errMsg: 'stopRecord:ok',
+                                tempVideoPath: RecordRes?.path,
+                                duration: RecordRes.duration * 1000 // 转成ms
+                            };
+                            RecordRes = null;
+                            success(result);
+                            complete(result);
+                        }
+                    }, 200); // 延时200ms，确保录制结果已准备好
+                }).catch((e) => {
+                    const result = {
+                        errMsg: 'stopRecord:fail ' + (e.message || 'promise rejected')
+                    };
+                    fail(result);
+                    complete(result);
+                });
+            }
+            catch (error) {
+                const result = {
+                    errMsg: 'stopRecord:fail ' + (error.message || 'unknown error')
+                };
+                fail(result);
+                complete(result);
+            }
+        }
+    };
+    useEffect(() => {
+        if (navigation) {
+            if (navigation && !navigation.camera) {
+                navigation.camera = camera;
+            }
+            else {
+                hasCamera.current = true;
+                navigation.camera.multi = true;
+            }
+        }
+        const checkCameraPermission = async () => {
+            try {
+                const cameraPermission = global?.__mpx?.config?.rnConfig?.cameraPermission;
+                if (typeof cameraPermission === 'function') {
+                    const permissionResult = await cameraPermission();
+                    setHasPermission(permissionResult === true);
+                }
+                else {
+                    setHasPermission(true);
+                }
+            }
+            catch (error) {
+                setHasPermission(false);
+            }
+        };
+        checkCameraPermission();
+        return () => {
+            if (navigation && navigation.camera) {
+                navigation.camera = null;
+            }
+        };
+    }, []);
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
+        ref: cameraRef,
+        style: extendObject({}, normalStyle, layoutStyle),
+        isActive: true,
+        photo: true,
+        video: true,
+        onInitialized,
+        onStopped,
+        device,
+        format,
+        codeScanner: !isPhoto ? codeScanner : undefined,
+        zoom: zoomValue
+    }), [
+        'mode',
+        'resolution',
+        'frame-size',
+        'bindinitdone',
+        'bindstop',
+        'flash',
+        'bindscancode',
+        'binderror'
+    ], {
+        layoutRef
+    });
+    if (!hasPermission || hasCamera.current || !device) {
+        return null;
+    }
+    return createElement(Camera, innerProps);
+});
+_camera.displayName = 'MpxCamera';
+export default _camera;

package/lib/runtime/components/react/dist/mpx-canvas/Bus.d.ts

@@ -21,4 +21,3 @@ export default class Bus {
     clearBatchingTimeout(): void;
 }
 export {};
-//# sourceMappingURL=Bus.d.ts.map

package/lib/runtime/components/react/dist/mpx-canvas/CanvasGradient.d.ts

@@ -5,4 +5,3 @@ export default class CanvasGradient {
     constructor(canvas: CanvasInstance, noOnConstruction?: boolean);
     postMessage(message: WebviewMessage): Promise<any>;
 }
-//# sourceMappingURL=CanvasGradient.d.ts.map

package/lib/runtime/components/react/dist/mpx-canvas/CanvasRenderingContext2D.d.ts

@@ -4,4 +4,3 @@ export default class CanvasRenderingContext2D {
     constructor(canvas: CanvasInstance);
     postMessage(message: WebviewMessage): Promise<any>;
 }
-//# sourceMappingURL=CanvasRenderingContext2D.d.ts.map

package/lib/runtime/components/react/dist/mpx-canvas/Image.d.ts

@@ -18,4 +18,3 @@ export declare class Image {
     get onerror(): ((...args: any[]) => void);
 }
 export declare function createImage(canvas: CanvasInstance, width?: number, height?: number): Image;
-//# sourceMappingURL=Image.d.ts.map

package/lib/runtime/components/react/dist/mpx-canvas/ImageData.d.ts

@@ -6,4 +6,3 @@ export default class ImageData {
     postMessage: (message: WebviewMessage) => Promise<any>;
 }
 export declare function createImageData(canvas: CanvasInstance, dataArray: number[], width: number, height: number): ImageData;
-//# sourceMappingURL=ImageData.d.ts.map

package/lib/runtime/components/react/dist/mpx-canvas/constructorsRegistry.d.ts

@@ -8,4 +8,3 @@ export declare function useConstructorsRegistry(): {
     register: (registerWebviewConstructor: Function) => void;
     getConstructor: (type: ConstructorType) => WebviewConstructor | undefined;
 };
-//# sourceMappingURL=constructorsRegistry.d.ts.map

package/lib/runtime/components/react/dist/mpx-canvas/html.d.ts

@@ -1,3 +1,2 @@
 declare const _default: "<html><head>\n    <meta content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no\" name=\"viewport\">\n    <style>\n      html {\n        -ms-content-zooming: none;\n        -ms-touch-action: pan-x pan-y;\n      }\n      body {\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        margin: 0;\n        padding: 0;\n        overflow: hidden;\n      }\n      * {\n        user-select: none;\n        -ms-user-select: none;\n        -moz-user-select: none;\n        -webkit-user-select: none;\n      }\n    </style>\n  </head>\n  <body>\n  <script>\n  var scale = function (ratio) {\n    return function (item) {\n        if (typeof item === \"number\") {\n            return item * ratio;\n        }\n        return item;\n    };\n};\nfunction autoScaleCanvas(canvas) {\n    var ctx = canvas.getContext(\"2d\");\n    var ratio = window.devicePixelRatio || 1;\n    if (ratio !== 1) {\n        canvas.width *= ratio;\n        canvas.height *= ratio;\n        ctx.scale(ratio, ratio);\n        ctx.isPointInPath = function () {\n            var args = [];\n            for (var _i = 0; _i < arguments.length; _i++) {\n                args[_i] = arguments[_i];\n            }\n            return CanvasRenderingContext2D.prototype.isPointInPath.apply(ctx, args.map(scale(ratio)));\n        };\n    }\n    return canvas;\n}\nwindow.autoScaleCanvas = autoScaleCanvas;\n</script>\n<script>\n\nvar WEBVIEW_TARGET = '@@WEBVIEW_TARGET';\n\nvar ID = function () {\n  return Math.random().toString(32).slice(2);\n};\n\nvar flattenObjectCopyValue = function (flatObj, srcObj, key) {\n  var value = srcObj[key];\n  if (typeof value === 'function') {\n    return;\n  }\n  if (typeof value === 'object' && value instanceof Node) {\n    return;\n  }\n  flatObj[key] = flattenObject(value);\n};\n\nvar flattenObject = function (object) {\n  if (typeof object !== 'object' || object === null) {\n    return object;\n  }\n  // Handle TypedArray\n  if (object instanceof Uint8ClampedArray) {\n    return Array.from(object);\n  }\n  var flatObject = {};\n  for (var key in object) {\n    flattenObjectCopyValue(flatObject, object, key);\n  }\n  for (var key in Object.getOwnPropertyNames(object)) {\n    flattenObjectCopyValue(flatObject, object, key);\n  }\n  return flatObject;\n};\n\nvar AutoScaledCanvas = function (element) {\n  this.element = element;\n};\n\nAutoScaledCanvas.prototype.toDataURL = function () {\n  return this.element.toDataURL.apply(this.element, arguments);\n};\n\nAutoScaledCanvas.prototype.autoScale = function () {\n  if (this.savedHeight !== undefined) {\n    this.element.height = this.savedHeight;\n  }\n  if (this.savedWidth !== undefined) {\n    this.element.width = this.savedWidth;\n  }\n  window.autoScaleCanvas(this.element);\n};\n\nObject.defineProperty(AutoScaledCanvas.prototype, 'width', {\n  get: function () {\n    return this.element.width;\n  },\n  set: function (value) {\n    this.savedWidth = value;\n    this.autoScale();\n    return value;\n  },\n});\n\nObject.defineProperty(AutoScaledCanvas.prototype, 'height', {\n  get: function () {\n    return this.element.height;\n  },\n  set: function (value) {\n    this.savedHeight = value;\n    this.autoScale();\n    return value;\n  },\n});\nvar toMessage = function (result) {\n  if (result instanceof Blob) {\n    return {\n      type: 'blob',\n      payload: btoa(result),\n      meta: {},\n    };\n  }\n  if (result instanceof Object) {\n    if (!result[WEBVIEW_TARGET]) {\n      var id = ID();\n      result[WEBVIEW_TARGET] = id;\n      targets[id] = result;\n    }\n    return {\n      type: 'json',\n      payload: flattenObject(result),\n      args: toArgs(flattenObject(result)),\n      meta: {\n        target: result[WEBVIEW_TARGET],\n        constructor: result.__constructorName__ || result.constructor.name,\n      },\n    };\n  }\n  return {\n    type: 'json',\n    payload: typeof result === 'string' ? result : JSON.stringify(result),\n    meta: {},\n  };\n};\nvar toArgs = function (result) {\n    var args = [];\n    for (var key in result) {\n        if (result[key] !== undefined && key !== '@@WEBVIEW_TARGET') {\n            args.push(result[key]);\n        }\n    }\n    return args;\n};\n\nvar createObjectsFromArgs = function (args) {\n    for (var index = 0; index < args.length; index += 1) {\n        var currentArg = args[index];\n        if (currentArg && currentArg.className !== undefined) {\n            var className = currentArg.className, classArgs = currentArg.classArgs;\n            // new ImageData，第一个参数需要是 Uint8ClampedArray\n            var object = new (Function.prototype.bind.apply(constructors[className], [null].concat(classArgs)))();\n            args[index] = object;\n        }\n    }\n    return args;\n};\n\nvar canvas = document.createElement('canvas');\ncanvas.style.width = '100%';\ncanvas.style.height = '100%';\nvar autoScaledCanvas = new AutoScaledCanvas(canvas);\n\nvar targets = {\n  canvas: autoScaledCanvas,\n  context2D: canvas.getContext('2d'),\n};\n\nvar constructors = {\n  CanvasGradient: CanvasGradient,\n  Image: Image,\n  ImageData: ImageData,\n  Uint8ClampedArray: Uint8ClampedArray,\n};\n\nImage.bind =\n  Image.bind ||\n  function () {\n    return Image;\n  };\n\nImageData.bind =\n  ImageData.bind ||\n  function () {\n    return ImageData;\n  };\nUint8ClampedArray.bind =\n  Uint8ClampedArray.bind ||\n  function () {\n    return Uint8ClampedArray;\n  };\n\nvar populateRefs = function (arg) {\n  if (arg && arg.__ref__) {\n    return targets[arg.__ref__];\n  }\n  return arg;\n};\ndocument.body.appendChild(canvas);\n\nvar mergeObjects = function (target, source) {\n  for (var key in source) {\n    if (source.hasOwnProperty(key)) {\n      target[key] = source[key];\n    }\n  }\n  return target;\n};\n\nfunction handleMessage(message) {\n  var id = message.id,\n      type = message.type,\n      payload = message.payload;\n\n  switch (type) {\n    case 'exec': {\n      var target = payload.target,\n          method = payload.method,\n          args = payload.args;\n      var result = targets[target][method].apply(targets[target], args.map(populateRefs));\n      var msg = toMessage(result);\n\n      if (typeof result === 'object' && !msg.meta.constructor) {\n        for (var constructorName in constructors) {\n          if (result instanceof constructors[constructorName]) {\n            msg.meta.constructor = constructorName;\n          }\n        }\n      }\n      window.ReactNativeWebView.postMessage(JSON.stringify(mergeObjects({ id: id }, msg)));\n      break;\n    }\n    case 'set': {\n      var target = payload.target,\n          key = payload.key,\n          value = payload.value;\n      targets[target][key] = populateRefs(value);\n      break;\n    }\n        case 'construct': {\n            var constructor = payload.constructor,\n          target = payload.id,\n          args = payload.args || [];\n            var newArgs = createObjectsFromArgs(args);\n            var object;\n            try {\n                object = new (Function.prototype.bind.apply(constructors[constructor], [null].concat(newArgs)))();\n            }\n            catch (error) {\n                throw new Error('Error while constructing '.concat(constructor, ' ').concat(error.message));\n            }\n            object.__constructorName__ = constructor;\n            var msg = toMessage({});\n            targets[target] = object;\n            window.ReactNativeWebView.postMessage(JSON.stringify(mergeObjects({ id: id }, msg)));\n            break;\n        }\n            case 'listen': {\n      var types = payload.types,\n          target = payload.target;\n    for (var i = 0; i < types.length; i++) {\n    var eventType = types[i];\n    targets[target].addEventListener(eventType, function (e) {\n          const message = toMessage({\n            type: 'event',\n            payload: {\n                type: e.type,\n                target: mergeObjects(flattenObject(targets[target]), {\n                [WEBVIEW_TARGET]: target,\n            }),\n            },\n          });\n      window.ReactNativeWebView.postMessage(\n        JSON.stringify(mergeObjects({ id: id }, message))\n      );\n    });\n  }\n  break;\n}\n    }\n}\nvar handleError = function (err, message) {\n  window.ReactNativeWebView.postMessage(JSON.stringify({\n    id: message.id,\n    type: 'error',\n    payload: {\n      message: err.message,\n      stack: err.stack,\n    },\n  }));\n  document.removeEventListener('message', handleIncomingMessage);\n};\n\nfunction handleIncomingMessage(data) {\n  if (Array.isArray(data)) {\n    for (var i = 0; i < data.length; i++) {\n      try {\n        handleMessage(data[i]);\n      } catch (err) {\n        handleError(err, data[i]);\n      }\n    }\n  } else {\n    try {\n      handleMessage(data);\n    } catch (err) {\n      handleError(err, data);\n    }\n  }\n}\n\nwindow.mpxWebviewMessageCallback = handleIncomingMessage\n</script>\n  \n\n</body></html>";
 export default _default;
-//# sourceMappingURL=html.d.ts.map

package/lib/runtime/components/react/dist/mpx-canvas/index.d.ts

@@ -30,4 +30,3 @@ interface CanvasProps {
 }
 declare const _Canvas: import("react").ForwardRefExoticComponent<CanvasProps & import("react").RefAttributes<HandlerRef<CanvasProps & View, CanvasProps>>>;
 export default _Canvas;
-//# sourceMappingURL=index.d.ts.map

package/lib/runtime/components/react/dist/mpx-canvas/utils.d.ts

@@ -50,4 +50,3 @@ export declare const useWebviewBinding: ({ targetName, properties, methods }: {
     properties?: Record<string, any> | undefined;
     methods?: string[] | undefined;
 }) => import("react").MutableRefObject<{}>;
-//# sourceMappingURL=utils.d.ts.map

package/lib/runtime/components/react/dist/mpx-checkbox-group.d.ts

@@ -18,4 +18,3 @@ export interface CheckboxGroupProps {
 }
 declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HandlerRef<View, CheckboxGroupProps>>>;
 export default CheckboxGroup;
-//# sourceMappingURL=mpx-checkbox-group.d.ts.map

package/lib/runtime/components/react/dist/mpx-checkbox.d.ts

@@ -30,4 +30,3 @@ export interface CheckboxProps extends Selection {
 }
 declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HandlerRef<View, CheckboxProps>>>;
 export default Checkbox;
-//# sourceMappingURL=mpx-checkbox.d.ts.map

package/lib/runtime/components/react/dist/mpx-form.d.ts

@@ -25,4 +25,3 @@ interface FormProps {
 }
 declare const _Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HandlerRef<View, FormProps>>>;
 export default _Form;
-//# sourceMappingURL=mpx-form.d.ts.map

package/lib/runtime/components/react/dist/mpx-icon/index.d.ts

@@ -16,4 +16,3 @@ export interface IconProps {
 }
 declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HandlerRef<Text, IconProps>>>;
 export default Icon;
-//# sourceMappingURL=index.d.ts.map

package/lib/runtime/components/react/dist/mpx-image.d.ts

@@ -19,4 +19,3 @@ export interface ImageProps {
 }
 declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HandlerRef<RNImage, ImageProps>>>;
 export default Image;
-//# sourceMappingURL=mpx-image.d.ts.map

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

@@ -16,7 +16,7 @@ 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';
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils';
 import Portal from './mpx-portal';
 const DEFAULT_IMAGE_WIDTH = 320;
 const DEFAULT_IMAGE_HEIGHT = 240;
@@ -104,7 +104,7 @@ const Image = forwardRef((props, ref) => {
             setLoaded(true);
         }
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, transformRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({
         props,
         hasSelfPercent,

package/lib/runtime/components/react/dist/mpx-inline-text.d.ts

@@ -5,4 +5,3 @@ declare const InlineText: {
     displayName: string;
 };
 export default InlineText;
-//# sourceMappingURL=mpx-inline-text.d.ts.map