@mpxjs/webpack-plugin 2.9.56 → 2.9.58

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

@@ -0,0 +1,270 @@
+/**
+ * ✔ 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 React, { useEffect, useRef, useState, forwardRef, } from 'react';
+import { View, Text, StyleSheet, Animated, Easing, } from 'react-native';
+import { extractTextStyle, isText, every } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+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) => {
+    // @ts-ignore
+    if (!global?.__mpx?.config?.rnConfig) {
+        console.warn('Environment not supported');
+        return;
+    }
+    const eventName = OpenTypeEventsMap.get(openType);
+    if (!eventName) {
+        console.warn(`open-type not support ${openType}`);
+        return;
+    }
+    // @ts-ignore
+    const event = global.__mpx.config.rnConfig?.openTypeHandler?.[eventName];
+    if (!event) {
+        console.warn(`Unregistered ${eventName} event`);
+        return;
+    }
+    return event;
+};
+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();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const loadingStyle = {
+        ...styles.loading,
+        transform: [{ rotate }],
+        marginRight: alone ? 0 : 5,
+    };
+    return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }}/>;
+};
+const Button = forwardRef((props, ref) => {
+    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, 'enable-offset': enableOffset, style = [], children, bindgetuserinfo, bindtap, catchtap, bindtouchstart, bindtouchend, } = props;
+    const refs = useRef({
+        hoverStartTimer: undefined,
+        hoverStayTimer: undefined,
+    });
+    const layoutRef = useRef({});
+    const [isHover, setIsHover] = useState(false);
+    const isMiniSize = size === 'mini';
+    const applyHoverEffect = isHover && hoverClass !== 'none';
+    const inheritTextStyle = extractTextStyle(style);
+    const textHoverStyle = extractTextStyle(hoverStyle);
+    const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
+    const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color;
+    const plainBorderColor = disabled
+        ? 'rgba(0, 0, 0, .2)'
+        : applyHoverEffect
+            ? `rgba(${plainColor},.6)`
+            : `rgb(${plainColor})`;
+    const normalBorderColor = type === 'default' ? 'rgba(0, 0, 0, .2)' : normalBackgroundColor;
+    const plainTextColor = disabled
+        ? 'rgba(0, 0, 0, .2)'
+        : applyHoverEffect
+            ? `rgba(${plainColor}, .6)`
+            : `rgb(${plainColor})`;
+    const normalTextColor = type === 'default'
+        ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})`
+        : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})`;
+    const viewStyle = {
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: plain ? plainBorderColor : normalBorderColor,
+        backgroundColor: plain ? 'transparent' : normalBackgroundColor,
+    };
+    const textStyle = {
+        color: plain ? plainTextColor : normalTextColor,
+        ...inheritTextStyle
+    };
+    const defaultViewStyle = [
+        styles.button,
+        isMiniSize && styles.buttonMini || {},
+        viewStyle,
+    ];
+    const defaultTextStyle = [
+        styles.text, isMiniSize && styles.textMini, textStyle
+    ];
+    const handleOpenTypeEvent = (evt) => {
+        if (!openType)
+            return;
+        const handleEvent = getOpenTypeEvent(openType);
+        if (openType === 'share') {
+            handleEvent && handleEvent({
+                from: 'button',
+                target: getCustomEvent('tap', evt, { layoutRef }, props).target,
+            });
+        }
+        if (openType === 'getUserInfo') {
+            const userInfo = handleEvent && handleEvent();
+            if (typeof userInfo === 'object') {
+                bindgetuserinfo && bindgetuserinfo(userInfo);
+            }
+        }
+    };
+    const setStayTimer = () => {
+        clearTimeout(refs.current.hoverStayTimer);
+        refs.current.hoverStayTimer = setTimeout(() => {
+            setIsHover(false);
+            clearTimeout(refs.current.hoverStayTimer);
+        }, hoverStayTime);
+    };
+    const setStartTimer = () => {
+        clearTimeout(refs.current.hoverStartTimer);
+        refs.current.hoverStartTimer = setTimeout(() => {
+            setIsHover(true);
+            clearTimeout(refs.current.hoverStartTimer);
+        }, hoverStartTime);
+    };
+    const onTouchStart = (evt) => {
+        bindtouchstart && bindtouchstart(evt);
+        if (disabled)
+            return;
+        setStartTimer();
+    };
+    const onTouchEnd = (evt) => {
+        bindtouchend && bindtouchend(evt);
+        if (disabled)
+            return;
+        setStayTimer();
+    };
+    const onTap = (evt) => {
+        if (disabled)
+            return;
+        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
+        handleOpenTypeEvent(evt);
+    };
+    const catchTap = (evt) => {
+        if (disabled)
+            return;
+        catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
+    };
+    function wrapChildren(children, textStyle) {
+        if (every(children, (child) => isText(child))) {
+            children = [<Text key='buttonTextWrap' style={textStyle}>{children}</Text>];
+        }
+        else {
+            if (textStyle)
+                console.warn('Text style will be ignored unless every child of the Button is Text node!');
+        }
+        return children;
+    }
+    const { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle: StyleSheet.flatten([
+            ...defaultViewStyle,
+            ...defaultTextStyle,
+        ])
+    });
+    const onLayout = () => {
+        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        bindtouchstart: onTouchStart,
+        bindtouchend: onTouchEnd,
+        bindtap: onTap,
+        catchtap: catchTap,
+        ...(enableOffset ? { onLayout } : {}),
+    }, [
+        'enable-offset'
+    ], {
+        layoutRef
+    });
+    return (<View {...innerProps} style={[
+            ...defaultViewStyle,
+            style,
+            applyHoverEffect && hoverStyle,
+        ]}>
+      {loading && <Loading alone={!children}/>}
+      {wrapChildren(children, [
+            ...defaultTextStyle,
+            applyHoverEffect && textHoverStyle,
+        ])}
+    </View>);
+});
+Button.displayName = 'mpx-button';
+export default Button;

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

@@ -0,0 +1,229 @@
+/**
+ * ✔ src
+ * - mode: Partially, Only SVG format do not support
+ * ✘ show-menu-by-longpress
+ * ✔ binderror
+ * ✔ bindload
+ * ✘ fade-in
+ * ✔ webp
+ * ✘ lazy-load
+ * ✔ bindtap
+ * ✔ DEFAULT_SIZE
+ */
+import React, { useEffect, useMemo, useState, forwardRef, useRef, } from 'react';
+import { Image as RNImage, View, StyleSheet, } from 'react-native';
+import useInnerProps, { getCustomEvent } from '../getInnerListeners';
+import useNodesRef from '../useNodesRef';
+const DEFAULT_IMAGE_WIDTH = 320;
+const DEFAULT_IMAGE_HEIGHT = 240;
+// const REMOTE_SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i
+// const styls = StyleSheet.create({
+//   suspense: {
+//     display: 'flex',
+//     justifyContent: 'center',
+//     alignItems: 'center',
+//     width: '100%',
+//     height: '100%',
+//   },
+// })
+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;
+// const Svg = lazy(() => import('./svg'))
+// const Fallback = (
+//   <View style={styls.suspense}>
+//     <Text>loading ...</Text>
+//   </View>
+// )
+const Image = forwardRef((props, ref) => {
+    const { src = '', mode = 'scaleToFill', 
+    // svg = false,
+    style = [], 'enable-offset': enableOffset, bindload, binderror } = props;
+    const { width = DEFAULT_IMAGE_WIDTH, height = DEFAULT_IMAGE_HEIGHT } = StyleSheet.flatten(style);
+    const { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle: {
+            width: DEFAULT_IMAGE_WIDTH,
+            height: DEFAULT_IMAGE_HEIGHT
+        }
+    });
+    const layoutRef = useRef({});
+    const preSrc = useRef();
+    const resizeMode = ModeMap.get(mode) || 'stretch';
+    const isWidthFixMode = mode === 'widthFix';
+    const isHeightFixMode = mode === 'heightFix';
+    const isCropMode = cropMode.includes(mode);
+    const source = typeof src === 'string' ? { uri: src } : src;
+    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(false);
+    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 cropModeStyle = useMemo(() => {
+        switch (mode) {
+            case 'top':
+                return { top: 0, left: relativeCenteredSize(viewWidth, imageWidth) };
+            case 'bottom':
+                return { top: 'auto', bottom: 0, left: relativeCenteredSize(viewWidth, imageWidth) };
+            case 'center':
+                return { top: relativeCenteredSize(viewHeight, imageHeight), left: relativeCenteredSize(viewWidth, imageWidth) };
+            case 'left':
+                return { top: relativeCenteredSize(viewHeight, imageHeight), left: 0 };
+            case 'right':
+                return { top: relativeCenteredSize(viewHeight, imageHeight), left: 'auto', right: 0 };
+            case 'top left':
+                return { top: 0, left: 0 };
+            case 'top right':
+                return { top: 0, left: 'auto', right: 0 };
+            case 'bottom left':
+                return { top: 'auto', bottom: 0, left: 0 };
+            case 'bottom right':
+                return { top: 'auto', bottom: 0, left: 'auto', right: 0 };
+            default:
+                return {};
+        }
+    }, [mode, viewWidth, viewHeight, imageWidth, imageHeight]);
+    const onImageLoad = (evt) => {
+        if (!bindload)
+            return;
+        if (typeof src === 'string') {
+            RNImage.getSize(src, (width, height) => {
+                bindload(getCustomEvent('load', evt, {
+                    detail: { width, height },
+                    layoutRef
+                }, props));
+            });
+        }
+        else {
+            const { width = 0, height = 0 } = RNImage.resolveAssetSource(src) || {};
+            bindload(getCustomEvent('load', evt, {
+                detail: { width, height },
+                layoutRef
+            }, props));
+        }
+    };
+    const onImageError = (evt) => {
+        binderror &&
+            binderror(getCustomEvent('error', evt, {
+                detail: { errMsg: evt.nativeEvent.error },
+                layoutRef
+            }, props));
+    };
+    const onViewLayout = ({ nativeEvent: { layout: { width, height }, }, }) => {
+        setViewWidth(width);
+        setViewHeight(height);
+    };
+    const onImageLayout = () => {
+        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    useEffect(() => {
+        if (!isWidthFixMode && !isHeightFixMode && !isCropMode) {
+            setLoaded(true);
+            return;
+        }
+        const changed = preSrc.current !== src;
+        preSrc.current = src;
+        changed && setLoaded(false);
+        if (typeof src === 'string') {
+            RNImage.getSize(src, (width, height) => {
+                if (isWidthFixMode || isHeightFixMode) {
+                    setRatio(width === 0 ? 0 : height / width);
+                }
+                if (isCropMode) {
+                    setImageWidth(width);
+                    setImageHeight(height);
+                }
+                changed && setLoaded(true);
+            });
+        }
+        else {
+            const { width = 0, height = 0 } = RNImage.resolveAssetSource(src) || {};
+            if (isWidthFixMode || isHeightFixMode) {
+                setRatio(width === 0 ? 0 : height / width);
+            }
+            if (isCropMode) {
+                setImageWidth(width);
+                setImageHeight(height);
+            }
+            changed && setLoaded(true);
+        }
+    }, [isWidthFixMode, isHeightFixMode, isCropMode, src]);
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        ...(enableOffset ? { onLayout: onImageLayout } : {})
+    }, [
+        'enable-offset'
+    ], {
+        layoutRef
+    });
+    // if (typeof src === 'string' && REMOTE_SVG_REGEXP.test(src)) {
+    //   return (
+    //     <Suspense fallback={Fallback} {...innerProps}>
+    //       <View {...innerProps}>
+    //         <Svg src={src} style={style} width={width as SvgNumberProp} height={height as SvgNumberProp} />
+    //       </View>
+    //     </Suspense>
+    //   )
+    // }
+    // if (svg) {
+    //   return (
+    //     <Suspense fallback={Fallback}>
+    //       <View {...innerProps}>
+    //         <Svg local src={src} style={style} width={width as SvgNumberProp} height={height as SvgNumberProp} />
+    //       </View>
+    //     </Suspense>
+    //   )
+    // }
+    return (<View style={[
+            { width, height },
+            style,
+            {
+                ...(isHeightFixMode && { width: fixedWidth }),
+                ...(isWidthFixMode && { height: fixedHeight }),
+            },
+            { overflow: 'hidden' },
+        ]} onLayout={onViewLayout}>
+      {loaded && <RNImage {...innerProps} source={source} resizeMode={resizeMode} onLoad={onImageLoad} onError={onImageError} style={[
+                StyleSheet.absoluteFill,
+                {
+                    width: !isCropMode ? '100%' : imageWidth,
+                    height: !isCropMode ? '100%' : imageHeight,
+                },
+                {
+                    ...(isCropMode && cropModeStyle),
+                },
+            ]}/>}
+    </View>);
+});
+Image.displayName = 'mpx-image';
+export default Image;

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

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