@mpxjs/webpack-plugin 2.9.55 → 2.9.57

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

@@ -0,0 +1,57 @@
+import React, { forwardRef, useRef } from 'react';
+import { default as Carouse } from './carouse';
+import useInnerProps from '../getInnerListeners';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+/**
+ * ✔ indicator-dots
+ * ✔ indicator-color
+ * ✔ indicator-active-color
+ * ✔ autoplay
+ * ✔ current
+ * ✔ interval
+ * ✔ duration
+ * ✔ circular
+ * ✔ vertical
+ * ✘ display-multiple-items
+ * ✔ previous-margin
+ * ✔ next-margin
+ * ✘ snap-to-edge
+ */
+const _SwiperWrapper = forwardRef((props, ref) => {
+    const { children } = props;
+    let innerLayout = useRef({});
+    const swiperProp = {
+        circular: props.circular || false,
+        current: props.current || 0,
+        autoplay: props.autoplay || false,
+        duration: props.duration || 500,
+        interval: props.interval || 5000,
+        showsPagination: props['indicator-dots'],
+        dotColor: props['indicator-color'] || "rgba(0, 0, 0, .3)",
+        activeDotColor: props['indicator-active-color'] || '#000000',
+        horizontal: props.vertical !== undefined ? !props.vertical : true,
+        style: props.style,
+        previousMargin: props['previous-margin'] ? parseInt(props['previous-margin']) : 0,
+        nextMargin: props['next-margin'] ? parseInt(props['next-margin']) : 0,
+        enableOffset: props['enable-offset'] || false,
+        bindchange: props.bindchange
+    };
+    const { nodeRef } = useNodesRef(props, ref, {});
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef
+    }, [
+        'indicator-dots',
+        'indicator-color',
+        'indicator-active-color',
+        'previous-margin',
+        'next-margin'
+    ], { layoutRef: innerLayout });
+    const getInnerLayout = (layout) => {
+        innerLayout.current = layout.current;
+    };
+    return <Carouse getInnerLayout={getInnerLayout} innerProps={innerProps} {...swiperProp} {...innerProps}>
+    {children}
+  </Carouse>;
+});
+_SwiperWrapper.displayName = 'mpx-swiper';
+export default _SwiperWrapper;

package/lib/runtime/components/react/dist/mpx-swiper/type.js

@@ -0,0 +1 @@
+export {};

package/lib/runtime/components/react/dist/mpx-swiper-item.jsx

@@ -0,0 +1,25 @@
+import { View } from 'react-native';
+import React, { forwardRef, useRef } from 'react';
+import useInnerProps from './getInnerListeners';
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+const _SwiperItem = forwardRef((props, ref) => {
+    const { children, 'enable-offset': enableOffset } = props;
+    const layoutRef = useRef({});
+    const { nodeRef } = useNodesRef(props, ref, {});
+    const onLayout = () => {
+        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    const innerProps = useInnerProps(props, {
+        ...(enableOffset ? { onLayout } : {}),
+    }, [
+        'children',
+        'enable-offset'
+    ], { layoutRef });
+    return (<View ref={nodeRef} data-itemId={props['item-id']} {...innerProps}>
+      {children}
+    </View>);
+});
+_SwiperItem.displayName = 'mpx-swiper-item';
+export default _SwiperItem;

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

@@ -0,0 +1,67 @@
+/**
+ * ✔ selectable
+ * ✘ space
+ * ✘ decode
+ */
+import { Text, StyleSheet } from 'react-native';
+import { useRef, useEffect, forwardRef } from 'react';
+import useInnerProps from './getInnerListeners';
+// @ts-ignore
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+import { PERCENT_REGX } from './utils';
+const DEFAULT_STYLE = {
+    fontSize: 16
+};
+const transformStyle = (styleObj) => {
+    let { lineHeight } = styleObj;
+    if (typeof lineHeight === 'string' && PERCENT_REGX.test(lineHeight)) {
+        lineHeight = (parseFloat(lineHeight) / 100) * (styleObj.fontSize || DEFAULT_STYLE.fontSize);
+        styleObj.lineHeight = lineHeight;
+    }
+};
+const _Text = forwardRef((props, ref) => {
+    const { style = [], children, selectable, 'enable-offset': enableOffset, 'user-select': userSelect, 'disable-default-style': disableDefaultStyle = false, } = props;
+    const layoutRef = useRef({});
+    const styleObj = StyleSheet.flatten(style);
+    let defaultStyle = {};
+    if (!disableDefaultStyle) {
+        defaultStyle = DEFAULT_STYLE;
+        transformStyle(styleObj);
+    }
+    const { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle
+    });
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef
+    }, [
+        'style',
+        'children',
+        'selectable',
+        'user-select',
+        'useInherit',
+        'enable-offset'
+    ], {
+        layoutRef
+    });
+    useEffect(() => {
+        let measureTimeout = null;
+        if (enableOffset) {
+            measureTimeout = setTimeout(() => {
+                nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+                    layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+                });
+            });
+            return () => {
+                if (measureTimeout) {
+                    clearTimeout(measureTimeout);
+                    measureTimeout = null;
+                }
+            };
+        }
+    }, []);
+    return (<Text style={{ ...defaultStyle, ...styleObj }} selectable={!!selectable || !!userSelect} {...innerProps}>
+        {children}
+      </Text>);
+});
+_Text.displayName = 'mpx-text';
+export default _Text;

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

@@ -0,0 +1,27 @@
+/**
+ * Compared with Input:
+ *   Subtraction:
+ *     type, password, confirm-hold
+ *   Addition:
+ *     - confirm-type: Not support `return`
+ *     ✔ auto-height
+ *     ✘ fixed
+ *     ✘ show-confirm-bar
+ *     ✔ bindlinechange: No `heightRpx` info.
+ */
+import React, { forwardRef } from 'react';
+import { Keyboard } from 'react-native';
+import Input from './mpx-input';
+import { omit } from './utils';
+const Textarea = forwardRef((props, ref) => {
+    const restProps = omit(props, [
+        'ref',
+        'type',
+        'password',
+        'multiline',
+        'confirm-hold',
+    ]);
+    return (<Input ref={ref} multiline confirm-type='next' bindblur={() => Keyboard.dismiss()} {...restProps}/>);
+});
+Textarea.displayName = 'mpx-textarea';
+export default Textarea;

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

@@ -0,0 +1,307 @@
+/**
+ * ✔ hover-class
+ * ✘ hover-stop-propagation
+ * ✔ hover-start-time
+ * ✔ hover-stay-time
+ */
+import { View, Text, StyleSheet, Image } from 'react-native';
+import { useRef, useState, useEffect, forwardRef } from 'react';
+// @ts-ignore
+import useInnerProps from './getInnerListeners';
+// @ts-ignore
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+import { parseUrl, TEXT_STYLE_REGEX, PERCENT_REGX, isText } from './utils';
+const IMAGE_STYLE_REGEX = /^background(Image|Size|Repeat|Position)$/;
+function groupBy(style, callback, group = {}) {
+    let groupKey = '';
+    for (let key in style) {
+        if (style.hasOwnProperty(key)) { // 确保处理对象自身的属性
+            let val = style[key];
+            groupKey = callback(key, val);
+            if (!group[groupKey]) {
+                group[groupKey] = {};
+            }
+            group[groupKey][key] = val;
+        }
+    }
+    return group;
+}
+const applyHandlers = (handlers, args) => {
+    for (let handler of handlers) {
+        handler(...args);
+    }
+};
+const checkNeedLayout = (style) => {
+    const [width, height] = style.sizeList;
+    return (PERCENT_REGX.test(`${height}`) && width === 'auto') || (PERCENT_REGX.test(`${width}`) && height === 'auto');
+};
+/**
+ * h - 用户设置的高度
+ * lh - 容器的高度
+ * ratio - 原始图片的宽高比
+ * **/
+function calculateSize(h, lh, ratio) {
+    let height, width;
+    if (PERCENT_REGX.test(`${h}`)) { // auto  px/rpx 
+        if (!lh)
+            return null;
+        height = (parseFloat(`${h}`) / 100) * lh;
+        width = height * ratio;
+    }
+    else { // 2. auto px/rpx - 根据比例计算
+        height = h;
+        width = height * ratio;
+    }
+    return {
+        width,
+        height
+    };
+}
+// background-size 转换
+function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
+    let sizeList = preImageInfo.sizeList;
+    if (!sizeList)
+        return;
+    // 枚举值
+    if (['cover', 'contain'].includes(`${sizeList[0]}`)) {
+        imageProps.style.resizeMode = sizeList[0];
+    }
+    else {
+        const [width, height] = sizeList;
+        let newWidth = 0, newHeight = 0;
+        const { width: imageSizeWidth, height: imageSizeHeight } = imageSize || {};
+        if (width === 'auto' && height === 'auto') { // 均为auto
+            if (!imageSize)
+                return;
+            newHeight = imageSizeHeight;
+            newWidth = imageSizeWidth;
+        }
+        else if (width === 'auto') { // auto px/rpx/%
+            if (!imageSize)
+                return;
+            const dimensions = calculateSize(height, layoutInfo?.height, imageSizeWidth / imageSizeHeight);
+            if (!dimensions)
+                return;
+            newWidth = dimensions.width;
+            newHeight = dimensions.height;
+        }
+        else if (height === 'auto') { // auto px/rpx/%
+            if (!imageSize)
+                return;
+            const dimensions = calculateSize(width, layoutInfo?.width, imageSizeHeight / imageSizeWidth);
+            if (!dimensions)
+                return;
+            newHeight = dimensions.width;
+            newWidth = dimensions.height;
+        }
+        else { // 数值类型      ImageStyle
+            // 数值类型设置为 stretch
+            imageProps.style.resizeMode = 'stretch';
+            newWidth = PERCENT_REGX.test(`${width}`) ? width : +width;
+            newHeight = PERCENT_REGX.test(`${width}`) ? height : +height;
+        }
+        // 样式合并
+        imageProps.style = {
+            ...imageProps.style,
+            width: newWidth,
+            height: newHeight
+        };
+    }
+}
+// background-image转换为source
+function backgroundImage(imageProps, preImageInfo) {
+    imageProps.src = preImageInfo.src;
+}
+const imageStyleToProps = (preImageInfo, imageSize, layoutInfo) => {
+    // 初始化
+    const imageProps = {
+        style: {
+            resizeMode: 'cover',
+            ...StyleSheet.absoluteFillObject
+        }
+    };
+    applyHandlers([backgroundSize, backgroundImage], [imageProps, preImageInfo, imageSize, layoutInfo]);
+    if (!imageProps?.src)
+        return null;
+    return imageProps;
+};
+function preParseImage(imageStyle) {
+    const { backgroundImage, backgroundSize = ["auto"] } = imageStyle || {};
+    const src = parseUrl(backgroundImage);
+    let sizeList = backgroundSize.slice();
+    sizeList.length === 1 && sizeList.push(sizeList[0]);
+    return {
+        src,
+        sizeList
+    };
+}
+function wrapImage(imageStyle) {
+    const [show, setShow] = useState(false);
+    const [, setImageSizeWidth] = useState(null);
+    const [, setImageSizeHeight] = useState(null);
+    const [, setLayoutInfoWidth] = useState(null);
+    const [, setLayoutInfoHeight] = useState(null);
+    const sizeInfo = useRef(null);
+    const layoutInfo = useRef(null);
+    // 预解析
+    const preImageInfo = preParseImage(imageStyle);
+    // 判断是否可挂载onLayout
+    const needLayout = checkNeedLayout(preImageInfo);
+    const { src, sizeList } = preImageInfo;
+    useEffect(() => {
+        if (!src) {
+            setShow(false);
+            sizeInfo.current = null;
+            layoutInfo.current = null;
+            return;
+        }
+        if (!sizeList.includes('auto')) {
+            setShow(true);
+            return;
+        }
+        Image.getSize(src, (width, height) => {
+            sizeInfo.current = {
+                width,
+                height
+            };
+            //1. 当需要绑定onLayout 2. 获取到布局信息
+            if (!needLayout || layoutInfo.current) {
+                setImageSizeWidth(width);
+                setImageSizeHeight(height);
+                if (layoutInfo.current) {
+                    setLayoutInfoWidth(layoutInfo.current.width);
+                    setLayoutInfoHeight(layoutInfo.current.height);
+                }
+                setShow(true);
+            }
+        });
+    }, [preImageInfo?.src]);
+    if (!preImageInfo?.src)
+        return null;
+    const onLayout = (res) => {
+        const { width, height } = res?.nativeEvent?.layout || {};
+        layoutInfo.current = {
+            width,
+            height
+        };
+        if (sizeInfo.current) {
+            setImageSizeWidth(sizeInfo.current.width);
+            setImageSizeHeight(sizeInfo.current.height);
+            setLayoutInfoWidth(width);
+            setLayoutInfoHeight(height);
+            setShow(true);
+        }
+    };
+    return <View key='viewBgImg' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, width: '100%', height: '100%', overflow: 'hidden' }}>
+    {show && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
+  </View>;
+}
+function splitStyle(styles) {
+    return groupBy(styles, (key) => {
+        if (TEXT_STYLE_REGEX.test(key))
+            return 'textStyle';
+        else if (IMAGE_STYLE_REGEX.test(key))
+            return 'imageStyle';
+        return 'innerStyle';
+    }, {});
+}
+function every(children, callback) {
+    return children.every((child) => callback(child));
+}
+function wrapChildren(children, textStyle, imageStyle) {
+    children = Array.isArray(children) ? children : [children];
+    if (every(children, (child) => isText(child))) {
+        children = [<Text key='viewTextWrap' style={textStyle}>{children}</Text>];
+    }
+    else {
+        if (textStyle)
+            console.warn('Text style will be ignored unless every child of the view is Text node!');
+    }
+    return [
+        wrapImage(imageStyle),
+        ...children
+    ];
+}
+const _View = forwardRef((props, ref) => {
+    const { style = [], children, hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-offset': enableOffset } = props;
+    const [isHover, setIsHover] = useState(false);
+    const layoutRef = useRef({});
+    // 打平 style 数组
+    const styleObj = StyleSheet.flatten(style);
+    // 默认样式
+    const defaultStyle = {
+        // flex 布局相关的默认样式
+        ...styleObj.display === 'flex' && {
+            flexDirection: 'row',
+            flexBasis: 'auto',
+            flexShrink: 1,
+            flexWrap: 'nowrap'
+        }
+    };
+    const { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle
+    });
+    const dataRef = useRef({});
+    useEffect(() => {
+        return () => {
+            dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+            dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        };
+    }, []);
+    const setStartTimer = () => {
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.startTimer = setTimeout(() => {
+            setIsHover(() => true);
+        }, +hoverStartTime);
+    };
+    const setStayTimer = () => {
+        dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.stayTimer = setTimeout(() => {
+            setIsHover(() => false);
+        }, +hoverStayTime);
+    };
+    function onTouchStart(e) {
+        const { bindtouchstart } = props;
+        bindtouchstart && bindtouchstart(e);
+        setStartTimer();
+    }
+    function onTouchEnd(e) {
+        const { bindtouchend } = props;
+        bindtouchend && bindtouchend(e);
+        setStayTimer();
+    }
+    const onLayout = () => {
+        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    const { textStyle, imageStyle, innerStyle } = splitStyle(StyleSheet.flatten([
+        defaultStyle,
+        styleObj,
+        ...(isHover ? hoverStyle : [])
+    ]));
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        ...enableOffset ? { onLayout } : {},
+        ...(hoverStyle && {
+            bindtouchstart: onTouchStart,
+            bindtouchend: onTouchEnd
+        })
+    }, [
+        'style',
+        'children',
+        'hover-start-time',
+        'hover-stay-time',
+        'hoverStyle',
+        'hover-class',
+        'enable-offset'
+    ], {
+        layoutRef
+    });
+    return (<View {...innerProps} style={innerStyle}>
+      {wrapChildren(children, textStyle, imageStyle)}
+    </View>);
+});
+_View.displayName = 'mpx-view';
+export default _View;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,25 @@
+import { useRef, useEffect, useImperativeHandle } from 'react';
+export default function useNodesRef(props, ref, instance = {}) {
+    const nodeRef = useRef(null);
+    const _props = useRef(props);
+    useEffect(() => {
+        _props.current = props;
+        return () => {
+            _props.current = null; // 组件销毁，清空 _props 依赖数据
+        };
+    }, [props]);
+    useImperativeHandle(ref, () => {
+        return {
+            getNodeInstance() {
+                return {
+                    props: _props,
+                    nodeRef,
+                    instance
+                };
+            }
+        };
+    });
+    return {
+        nodeRef
+    };
+}

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

@@ -0,0 +1,80 @@
+import { useEffect, useRef, Children, isValidElement } from 'react';
+import { StyleSheet } from 'react-native';
+export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
+export const PERCENT_REGX = /\d+(\.\d+)?%$/;
+const URL_REGEX = /url\(["']?(.*?)["']?\)/;
+export function omit(obj, fields) {
+    const shallowCopy = Object.assign({}, obj);
+    for (let i = 0; i < fields.length; i += 1) {
+        const key = fields[i];
+        delete shallowCopy[key];
+    }
+    return shallowCopy;
+}
+/**
+ * 从 style 中提取 TextStyle
+ * @param style
+ * @returns
+ */
+export const extractTextStyle = (style) => {
+    return Object.entries(StyleSheet.flatten(style)).reduce((textStyle, [key, value]) => {
+        TEXT_STYLE_REGEX.test(key) && Object.assign(textStyle, { [key]: value });
+        return textStyle;
+    }, {});
+};
+/**
+ * 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
+ */
+export const useUpdateEffect = (effect, deps) => {
+    const isMounted = useRef(false);
+    // for react-refresh
+    useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (!isMounted.current) {
+            isMounted.current = true;
+        }
+        else {
+            return effect();
+        }
+    }, deps);
+};
+/**
+ * 解析行内样式
+ * @param inlineStyle
+ * @returns
+ */
+export const parseInlineStyle = (inlineStyle = '') => {
+    return inlineStyle.split(';').reduce((styleObj, style) => {
+        const [k, v, ...rest] = style.split(':');
+        if (rest.length || !v || !k)
+            return styleObj;
+        const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase());
+        return Object.assign(styleObj, { [key]: v.trim() });
+    }, {});
+};
+export const parseUrl = (cssUrl = '') => {
+    if (!cssUrl)
+        return;
+    const match = cssUrl.match(URL_REGEX);
+    return match?.[1];
+};
+export const getRestProps = (transferProps = {}, originProps = {}, deletePropsKey = []) => {
+    return {
+        ...transferProps,
+        ...omit(originProps, deletePropsKey)
+    };
+};
+export const isText = (ele) => {
+    if (isValidElement(ele)) {
+        const displayName = ele.type?.displayName;
+        return displayName === 'mpx-text' || displayName === 'Text';
+    }
+    return false;
+};
+export function every(children, callback) {
+    return Children.toArray(children).every((child) => callback(child));
+}

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

@@ -11,7 +11,7 @@ import {
   DataSetType,
   LayoutRef,
   NativeTouchEvent
-} from './getInnerListeners.type'
+} from './types/getInnerListeners'
 
 const getTouchEvent = (
   type: string,

package/lib/runtime/components/react/mpx-button.tsx

@@ -331,14 +331,13 @@ const Button = forwardRef<HandlerRef< View, ButtonProps>,ButtonProps >((props, r
   const catchTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
     if (disabled) return
     catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props))
-    handleOpenTypeEvent(evt)
   }
 
   function wrapChildren(children: ReactNode, textStyle?: StyleProp<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!')
+      if(textStyle) console.warn('Text style will be ignored unless every child of the Button is Text node!')
     }
   
     return children

package/lib/runtime/components/react/mpx-image/svg.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import type { ImageSourcePropType, ImageStyle, StyleProp } from 'react-native'
 import { SvgCssUri, WithLocalSvg } from 'react-native-svg/css'
-
 interface SvgProps {
   local?: boolean
   src: string | ImageSourcePropType

package/lib/runtime/components/react/{getInnerListeners.type.ts → types/getInnerListeners.ts}

@@ -1,7 +1,7 @@
-import React from 'react'
+import { MutableRefObject } from 'react'
 import { NativeSyntheticEvent } from 'react-native'
 
-type LayoutRef = React.MutableRefObject<any>
+type LayoutRef = MutableRefObject<any>
 
 type SetTimeoutReturnType = ReturnType<typeof setTimeout>
 

package/lib/runtime/components/react/types/global.d.ts

@@ -0,0 +1,15 @@
+declare module 'react-native-svg/css' {
+  import type { ImageSourcePropType, StyleProp, ImageStyle } from 'react-native'
+  import type { SvgProps as SvgCssUriProps } from 'react-native-svg'
+
+  export const SvgCssUri: React.ComponentType<SvgCssUriProps & { uri?: string }>
+
+  export interface WithLocalSvgProps {
+    asset: ImageSourcePropType
+    style?: StyleProp<ImageStyle>
+    width?: string | number
+    height?: string | number
+  }
+
+  export const WithLocalSvg: React.ComponentType<WithLocalSvgProps>
+}