@mpxjs/webpack-plugin 2.8.25-alpha.21 → 2.8.25-alpha.22

package/lib/runtime/components/react/dist/KeyboardAvoidingView.jsx

@@ -0,0 +1,89 @@
+import React, { useContext, useEffect } from 'react';
+import { Keyboard, Platform, View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { KeyboardAvoidContext } from './context';
+import { extendObject } from './utils';
+const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
+    const isIOS = Platform.OS === 'ios';
+    const duration = isIOS ? 250 : 300;
+    const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
+    const offset = useSharedValue(0);
+    const basic = useSharedValue('auto');
+    const keyboardAvoid = useContext(KeyboardAvoidContext);
+    const animatedStyle = useAnimatedStyle(() => {
+        return Object.assign({
+            transform: [{ translateY: -offset.value }]
+        }, isIOS ? {} : { flexBasis: basic.value });
+    });
+    const resetKeyboard = () => {
+        keyboardAvoid?.current && extendObject(keyboardAvoid.current, {
+            cursorSpacing: 0,
+            ref: null
+        });
+        offset.value = withTiming(0, { duration, easing });
+        basic.value = 'auto';
+    };
+    useEffect(() => {
+        let subscriptions = [];
+        if (isIOS) {
+            subscriptions = [
+                Keyboard.addListener('keyboardWillShow', (evt) => {
+                    if (!keyboardAvoid?.current)
+                        return;
+                    const { endCoordinates } = evt;
+                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
+                    setTimeout(() => {
+                        ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+                            const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
+                            const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
+                            const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
+                            const value = aboveOffset > 0 ? belowValue : aboveValue;
+                            offset.value = withTiming(value, { duration, easing });
+                        });
+                    });
+                }),
+                Keyboard.addListener('keyboardWillHide', resetKeyboard)
+            ];
+        }
+        else {
+            subscriptions = [
+                Keyboard.addListener('keyboardDidShow', (evt) => {
+                    if (!keyboardAvoid?.current)
+                        return;
+                    const { endCoordinates } = evt;
+                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
+                    ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+                        const aboveOffset = pageY + height - endCoordinates.screenY;
+                        const belowOffset = endCoordinates.height - aboveOffset;
+                        const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
+                        const belowValue = Math.min(belowOffset, cursorSpacing);
+                        const value = aboveOffset > 0 ? belowValue : aboveValue;
+                        offset.value = withTiming(value, { duration, easing }, (finished) => {
+                            if (finished) {
+                                /**
+                                 * In the Android environment, the layout information is not synchronized after the animation,
+                                 * which results in the inability to correctly trigger element events.
+                                 * Here, we utilize flexBasic to proactively trigger a re-layout
+                                 */
+                                basic.value = '99.99%';
+                            }
+                        });
+                    });
+                }),
+                Keyboard.addListener('keyboardDidHide', resetKeyboard)
+            ];
+        }
+        return () => {
+            subscriptions.forEach(subscription => subscription.remove());
+        };
+    }, [keyboardAvoid]);
+    return (<View style={style}>
+      <Animated.View style={[
+            contentContainerStyle,
+            animatedStyle
+        ]}>
+        {children}
+      </Animated.View>
+    </View>);
+};
+export default KeyboardAvoidingView;

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

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+export const MovableAreaContext = createContext({ width: 0, height: 0 });
+export const FormContext = createContext(null);
+export const CheckboxGroupContext = createContext(null);
+export const RadioGroupContext = createContext(null);
+export const LabelContext = createContext(null);
+export const PickerContext = createContext(null);
+export const VarContext = createContext({});
+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 });
+export const PortalContext = createContext(null);

package/lib/runtime/components/react/dist/event.config.js

@@ -0,0 +1,27 @@
+const eventConfigMap = {
+    bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
+    bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
+    bindtouchstart: { bitFlag: '2', events: ['onTouchStart'] },
+    bindtouchmove: { bitFlag: '3', events: ['onTouchMove'] },
+    bindtouchend: { bitFlag: '4', events: ['onTouchEnd'] },
+    bindtouchcancel: { bitFlag: '5', events: ['onTouchCancel'] },
+    catchtap: { bitFlag: '6', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
+    catchlongpress: { bitFlag: '7', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
+    catchtouchstart: { bitFlag: '8', events: ['onTouchStart'] },
+    catchtouchmove: { bitFlag: '9', events: ['onTouchMove'] },
+    catchtouchend: { bitFlag: 'a', events: ['onTouchEnd'] },
+    catchtouchcancel: { bitFlag: 'b', events: ['onTouchCancel'] },
+    'capture-bindtap': { bitFlag: 'c', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
+    'capture-bindlongpress': { bitFlag: 'd', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
+    'capture-bindtouchstart': { bitFlag: 'e', events: ['onTouchStartCapture'] },
+    'capture-bindtouchmove': { bitFlag: 'f', events: ['onTouchMoveCapture'] },
+    'capture-bindtouchend': { bitFlag: 'g', events: ['onTouchEndCapture'] },
+    'capture-bindtouchcancel': { bitFlag: 'h', events: ['onTouchCancelCapture'] },
+    'capture-catchtap': { bitFlag: 'i', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
+    'capture-catchlongpress': { bitFlag: 'j', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
+    'capture-catchtouchstart': { bitFlag: 'k', events: ['onTouchStartCapture'] },
+    'capture-catchtouchmove': { bitFlag: 'l', events: ['onTouchMoveCapture'] },
+    'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'] },
+    'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'] }
+};
+export default eventConfigMap;

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

@@ -0,0 +1,262 @@
+import { useRef, useMemo } from 'react';
+import { hasOwn, collectDataset } from '@mpxjs/utils';
+import { omit, extendObject, useNavigation } from './utils';
+import eventConfigMap from './event.config';
+const globalEventState = {
+    needPress: true
+};
+const getTouchEvent = (type, event, props, config, navigation) => {
+    const { y: navigationY = 0 } = navigation?.layout || {};
+    const nativeEvent = event.nativeEvent;
+    const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
+    const { id } = props;
+    const { layoutRef } = config;
+    const currentTarget = extendObject({}, event.currentTarget, {
+        id: id || '',
+        dataset: collectDataset(props),
+        offsetLeft: layoutRef?.current?.offsetLeft || 0,
+        offsetTop: layoutRef?.current?.offsetTop || 0
+    });
+    const pendingProps = event._targetInst?.pendingProps || {};
+    const target = extendObject({}, event.target, {
+        id: pendingProps.parentId || pendingProps.nativeID || '',
+        dataset: collectDataset(pendingProps)
+    });
+    return extendObject({}, event, {
+        type,
+        timeStamp: timestamp,
+        currentTarget,
+        target,
+        detail: {
+            x: pageX,
+            y: pageY - navigationY
+        },
+        touches: touches.map((item) => {
+            return {
+                identifier: item.identifier,
+                pageX: item.pageX,
+                pageY: item.pageY - navigationY,
+                clientX: item.pageX,
+                clientY: item.pageY - navigationY
+            };
+        }),
+        changedTouches: changedTouches.map((item) => {
+            return {
+                identifier: item.identifier,
+                pageX: item.pageX,
+                pageY: item.pageY - navigationY,
+                clientX: item.pageX,
+                clientY: item.pageY - navigationY
+            };
+        }),
+        persist: event.persist,
+        stopPropagation: event.stopPropagation,
+        preventDefault: event.preventDefault
+    });
+};
+export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, props = {}) => {
+    const targetInfo = extendObject({}, oe.target, {
+        id: props.id || '',
+        dataset: collectDataset(props),
+        offsetLeft: layoutRef?.current?.offsetLeft || 0,
+        offsetTop: layoutRef?.current?.offsetTop || 0
+    });
+    return extendObject({}, oe, {
+        type,
+        detail,
+        target: targetInfo,
+        persist: oe.persist,
+        stopPropagation: oe.stopPropagation,
+        preventDefault: oe.preventDefault
+    });
+};
+function handleEmitEvent(events, type, oe, propsRef, config, navigation) {
+    events.forEach((event) => {
+        if (propsRef.current[event]) {
+            const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event);
+            if (match) {
+                oe.stopPropagation();
+            }
+            propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config, navigation));
+        }
+    });
+}
+function checkIsNeedPress(e, type, ref) {
+    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 };
+    const nativeEvent = e.nativeEvent;
+    const currentPageX = nativeEvent.changedTouches[0].pageX;
+    const currentPageY = nativeEvent.changedTouches[0].pageY;
+    if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
+        Math.abs(currentPageY - tapDetailInfo.y) > 3) {
+        globalEventState.needPress = false;
+        ref.current.startTimer[type] &&
+            clearTimeout(ref.current.startTimer[type]);
+        ref.current.startTimer[type] = null;
+    }
+}
+function handleTouchstart(e, type, ref, propsRef, config, navigation) {
+    e.persist();
+    const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart'];
+    const bubblePressEvent = ['catchlongpress', 'bindlongpress'];
+    const captureTouchEvent = [
+        'capture-catchtouchstart',
+        'capture-bindtouchstart'
+    ];
+    const capturePressEvent = [
+        'capture-catchlongpress',
+        'capture-bindlongpress'
+    ];
+    ref.current.startTimer[type] = null;
+    globalEventState.needPress = true;
+    const nativeEvent = e.nativeEvent;
+    ref.current.mpxPressInfo.detail = {
+        x: nativeEvent.changedTouches[0].pageX,
+        y: nativeEvent.changedTouches[0].pageY
+    };
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
+    const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent;
+    handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation);
+    const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current;
+    if (catchlongpress ||
+        bindlongpress ||
+        captureCatchlongpress ||
+        captureBindlongpress) {
+        ref.current.startTimer[type] = setTimeout(() => {
+            // 只要触发过longpress, 全局就不再触发tap
+            globalEventState.needPress = false;
+            handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config, navigation);
+        }, 350);
+    }
+}
+function handleTouchmove(e, type, ref, propsRef, config, navigation) {
+    const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove'];
+    const captureTouchEvent = [
+        'capture-catchtouchmove',
+        'capture-bindtouchmove'
+    ];
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
+    handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation);
+    checkIsNeedPress(e, type, ref);
+}
+function handleTouchend(e, type, ref, propsRef, config, navigation) {
+    // move event may not be triggered
+    checkIsNeedPress(e, type, ref);
+    const bubbleTouchEvent = ['catchtouchend', 'bindtouchend'];
+    const bubbleTapEvent = ['catchtap', 'bindtap'];
+    const captureTouchEvent = [
+        'capture-catchtouchend',
+        'capture-bindtouchend'
+    ];
+    const captureTapEvent = ['capture-catchtap', 'capture-bindtap'];
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
+    const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent;
+    ref.current.startTimer[type] &&
+        clearTimeout(ref.current.startTimer[type]);
+    ref.current.startTimer[type] = null;
+    handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config, navigation);
+    if (globalEventState.needPress) {
+        if (type === 'bubble' && config.disableTap) {
+            return;
+        }
+        handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation);
+    }
+}
+function handleTouchcancel(e, type, ref, propsRef, config, navigation) {
+    const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel'];
+    const captureTouchEvent = [
+        'capture-catchtouchcancel',
+        'capture-bindtouchcancel'
+    ];
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
+    ref.current.startTimer[type] &&
+        clearTimeout(ref.current.startTimer[type]);
+    ref.current.startTimer[type] = null;
+    handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config, navigation);
+}
+function createTouchEventHandler(eventName, type) {
+    return (e, ref, propsRef, config, navigation) => {
+        const handlerMap = {
+            onTouchStart: handleTouchstart,
+            onTouchMove: handleTouchmove,
+            onTouchEnd: handleTouchend,
+            onTouchCancel: handleTouchcancel
+        };
+        const handler = handlerMap[eventName];
+        if (handler) {
+            handler(e, type, ref, propsRef, config, navigation);
+        }
+    };
+}
+const touchEventList = [
+    { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
+    { eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
+    { eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
+    { eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
+    { eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
+    { eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
+    { eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
+    { eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
+];
+const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], rawConfig) => {
+    const ref = useRef({
+        startTimer: {
+            bubble: null,
+            capture: null
+        },
+        mpxPressInfo: {
+            detail: {
+                x: 0,
+                y: 0
+            }
+        }
+    });
+    const propsRef = useRef({});
+    const eventConfig = {};
+    const config = rawConfig || {
+        layoutRef: { current: {} },
+        disableTap: false
+    };
+    const navigation = useNavigation();
+    const removeProps = [
+        'children',
+        'enable-background',
+        'enable-offset',
+        'enable-var',
+        'external-var-context',
+        'parent-font-size',
+        'parent-width',
+        'parent-height',
+        ...userRemoveProps
+    ];
+    propsRef.current = extendObject({}, props, additionalProps);
+    let hashEventKey = '';
+    const rawEventKeys = [];
+    for (const key in eventConfigMap) {
+        if (hasOwn(propsRef.current, key)) {
+            eventConfig[key] = eventConfigMap[key].events;
+            hashEventKey = hashEventKey + eventConfigMap[key].bitFlag;
+            rawEventKeys.push(key);
+        }
+    }
+    const events = useMemo(() => {
+        if (!rawEventKeys.length) {
+            return {};
+        }
+        const transformedEventKeys = rawEventKeys.reduce((acc, key) => {
+            if (propsRef.current[key]) {
+                return acc.concat(eventConfig[key]);
+            }
+            return acc;
+        }, []);
+        const finalEventKeys = [...new Set(transformedEventKeys)];
+        const events = {};
+        touchEventList.forEach((item) => {
+            if (finalEventKeys.includes(item.eventName)) {
+                events[item.eventName] = (e) => item.handler(e, ref, propsRef, config, navigation);
+            }
+        });
+        return events;
+    }, [hashEventKey]);
+    return extendObject({}, events, omit(propsRef.current, [...rawEventKeys, ...removeProps]));
+};
+export default useInnerProps;

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

@@ -0,0 +1,271 @@
+/**
+ * ✔ size
+ * ✔ type
+ * ✔ plain
+ * ✔ disabled
+ * ✔ loading
+ * ✔ form-type
+ * - open-type: Partially. Only support `share`、`getUserInfo`
+ * ✔ hover-class: Convert hoverClass to hoverStyle.
+ * ✔ hover-style
+ * ✘ hover-stop-propagation
+ * ✔ hover-start-time
+ * ✔ hover-stay-time
+ * ✘ lang
+ * ✘ session-from
+ * ✘ send-message-title
+ * ✘ send-message-path
+ * ✘ send-message-img
+ * ✘ app-parameter
+ * ✘ show-message-card
+ * ✘ phone-number-no-quota-toast
+ * ✘ bindgetuserinfo
+ * ✘ bindcontact
+ * ✘ createliveactivity
+ * ✘ bindgetphonenumber
+ * ✘ bindgetphonenumber
+ * ✘ bindgetrealtimephonenumber
+ * ✘ binderror
+ * ✘ bindopensetting
+ * ✘ bindlaunchapp
+ * ✘ bindlaunchapp
+ * ✘ bindchooseavatar
+ * ✘ bindchooseavatar
+ * ✘ bindagreeprivacyauthorization
+ * ✔ bindtap
+ */
+import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import { GestureDetector } from 'react-native-gesture-handler';
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { RouteContext, FormContext } from './context';
+const LOADING_IMAGE_URI = 'data:image/png;base64,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';
+const TypeColorMap = {
+    default: ['#F8F8F8', '#DEDEDE', '35,35,35', '#F7F7F7'],
+    primary: ['#1AAD19', '#179B16', '26,173,25', '#9ED99D'],
+    warn: ['#E64340', '#CE3C39', '230,67,64', '#EC8B89']
+};
+const OpenTypeEventsMap = new Map([
+    ['share', 'onShareAppMessage'],
+    ['getUserInfo', 'onUserInfo']
+]);
+const styles = StyleSheet.create({
+    button: {
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 46,
+        borderRadius: 5,
+        backgroundColor: '#F8F8F8',
+        marginHorizontal: 'auto' // 按钮默认居中
+    },
+    buttonMini: {
+        height: 30
+    },
+    text: {
+        fontSize: 18,
+        color: '#000000'
+    },
+    textMini: {
+        fontSize: 13
+    },
+    loading: {
+        width: 20,
+        height: 20
+    }
+});
+const getOpenTypeEvent = (openType) => {
+    if (!openType)
+        return;
+    if (!global.__mpx?.config?.rnConfig) {
+        warn('Environment not supported');
+        return;
+    }
+    const eventName = OpenTypeEventsMap.get(openType);
+    if (!eventName) {
+        warn(`open-type not support ${openType}`);
+        return;
+    }
+    const event = global.__mpx.config.rnConfig.openTypeHandler?.[eventName];
+    if (!event) {
+        warn(`Unregistered ${eventName} event`);
+        return;
+    }
+    return event;
+};
+const timer = (data, time = 3000) => new Promise((resolve) => {
+    setTimeout(() => {
+        resolve(data);
+    }, time);
+});
+const Loading = ({ alone = false }) => {
+    const image = useRef(new Animated.Value(0)).current;
+    const rotate = image.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg']
+    });
+    useEffect(() => {
+        const animation = Animated.loop(Animated.timing(image, {
+            toValue: 1,
+            duration: 1000,
+            easing: Easing.linear,
+            useNativeDriver: true,
+            isInteraction: false
+        }));
+        animation.start();
+        return () => {
+            animation.stop();
+        };
+    }, []);
+    const loadingStyle = extendObject({}, styles.loading, {
+        transform: [{ rotate }],
+        marginRight: alone ? 0 : 5
+    });
+    return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }}/>;
+};
+const Button = forwardRef((buttonProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(buttonProps);
+    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap } = props;
+    const { pageId } = useContext(RouteContext) || {};
+    const formContext = useContext(FormContext);
+    const enableHover = hoverClass !== 'none';
+    const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled });
+    let submitFn;
+    let resetFn;
+    if (formContext) {
+        submitFn = formContext.submit;
+        resetFn = formContext.reset;
+    }
+    const isMiniSize = size === 'mini';
+    const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
+    const normalBackgroundColor = disabled ? disabledColor : isHover || loading ? hoverColor : color;
+    const plainBorderColor = disabled
+        ? 'rgba(0, 0, 0, .2)'
+        : isHover
+            ? `rgba(${plainColor},.6)`
+            : `rgb(${plainColor})`;
+    const normalBorderColor = type === 'default' ? 'rgba(0, 0, 0, .2)' : normalBackgroundColor;
+    const plainTextColor = disabled
+        ? 'rgba(0, 0, 0, .2)'
+        : isHover
+            ? `rgba(${plainColor}, .6)`
+            : `rgb(${plainColor})`;
+    const normalTextColor = type === 'default'
+        ? `rgba(0, 0, 0, ${disabled ? 0.3 : isHover || loading ? 0.6 : 1})`
+        : `rgba(255 ,255 ,255 , ${disabled || isHover || loading ? 0.6 : 1})`;
+    const viewStyle = {
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: plain ? plainBorderColor : normalBorderColor,
+        backgroundColor: plain ? 'transparent' : normalBackgroundColor
+    };
+    const defaultViewStyle = extendObject({}, styles.button, isMiniSize ? styles.buttonMini : null, viewStyle);
+    const defaultTextStyle = extendObject({}, styles.text, isMiniSize ? styles.textMini : {}, { color: plain ? plainTextColor : normalTextColor });
+    const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle);
+    const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Button does not support background image-related styles!');
+    }
+    const handleOpenTypeEvent = (evt) => {
+        const handleEvent = getOpenTypeEvent(openType);
+        if (!handleEvent)
+            return;
+        if (openType === 'share') {
+            const currentPage = getCurrentPage(pageId);
+            const event = {
+                from: 'button',
+                target: getCustomEvent('tap', evt, { layoutRef }, props).target,
+                webViewUrl: currentPage?.__webViewUrl
+            };
+            if (currentPage) {
+                const defaultMessage = {
+                    title: global.__mpx.config.rnConfig.projectName || 'AwesomeProject',
+                    path: currentPage.route || ''
+                };
+                if (currentPage.onShareAppMessage) {
+                    const { promise, ...message } = currentPage.onShareAppMessage(event) || {};
+                    if (promise) {
+                        Promise.race([Promise.resolve(promise), timer(message)])
+                            .then((msg) => {
+                            handleEvent(Object.assign({}, defaultMessage, msg));
+                        });
+                    }
+                    else {
+                        handleEvent(Object.assign({}, defaultMessage, message));
+                    }
+                }
+                else {
+                    handleEvent(defaultMessage);
+                }
+            }
+            else {
+                warn('Current page not found');
+                // Todo handleEvent(event)
+            }
+        }
+        if (openType === 'getUserInfo' && bindgetuserinfo) {
+            Promise.resolve(handleEvent)
+                .then((userInfo) => {
+                if (typeof userInfo === 'object') {
+                    bindgetuserinfo(userInfo);
+                }
+            });
+        }
+    };
+    const handleFormTypeFn = () => {
+        if (formType === 'submit') {
+            submitFn && submitFn();
+        }
+        else if (formType === 'reset') {
+            resetFn && resetFn();
+        }
+    };
+    const onTap = (evt) => {
+        if (disabled)
+            return;
+        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
+        handleOpenTypeEvent(evt);
+        handleFormTypeFn();
+    };
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle)
+    }, layoutProps, {
+        bindtap: !disabled && onTap
+    }), [
+        'disabled',
+        'size',
+        'type',
+        'plain',
+        'loading',
+        'hover-class',
+        'hover-style',
+        'hover-start-time',
+        'hover-stay-time',
+        'open-type',
+        'form-type'
+    ], {
+        layoutRef,
+        disableTap: disabled
+    });
+    const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }));
+    return enableHover
+        ? createElement(GestureDetector, { gesture: gesture }, baseButton)
+        : baseButton;
+});
+Button.displayName = 'MpxButton';
+export default Button;