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

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

@@ -0,0 +1,372 @@
+/**
+ * ✔ scroll-x
+ * ✔ scroll-y
+ * ✔ upper-threshold
+ * ✔ lower-threshold
+ * ✔ scroll-top
+ * ✔ scroll-left
+ * ✔ scroll-into-view
+ * ✔ scroll-with-animation
+ * ✔ enable-back-to-top
+ * ✘ enable-passive
+ * ✔ refresher-enabled
+ * ✘ refresher-threshold
+ * ✔ refresher-default-style(仅 android 支持)
+ * ✔ refresher-background(仅 android 支持)
+ * ✔ refresher-triggered
+ * ✘ enable-flex(scroll-x，rn 默认支持)
+ * ✘ scroll-anchoring
+ * ✔ paging-enabled
+ * ✘ using-sticky
+ * ✔ show-scrollbar
+ * ✘ fast-deceleration
+ * ✔ binddragstart
+ * ✔ binddragging
+ * ✔ binddragend
+ * ✔ bindrefresherrefresh
+ * ✘ bindrefresherpulling
+ * ✘ bindrefresherrestore
+ * ✘ bindrefresherabort
+ * ✔ bindscrolltoupper
+ * ✔ bindscrolltolower
+ * ✔ bindscroll
+ */
+import { ScrollView } from 'react-native-gesture-handler';
+import { RefreshControl } from 'react-native';
+import { useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react';
+import { useAnimatedRef } from 'react-native-reanimated';
+import { warn } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
+import { IntersectionObserverContext, ScrollViewContext } from './context';
+const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, __selectRef } = props;
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+    const waitForHandlers = flatGesture(waitFor);
+    const [refreshing, setRefreshing] = useState(true);
+    const snapScrollTop = useRef(0);
+    const snapScrollLeft = useRef(0);
+    const scrollOptions = useRef({
+        contentLength: 0,
+        offset: 0,
+        scrollLeft: 0,
+        scrollTop: 0,
+        visibleLength: 0
+    });
+    const scrollEventThrottle = 50;
+    const hasCallScrollToUpper = useRef(true);
+    const hasCallScrollToLower = useRef(false);
+    const initialTimeout = useRef(null);
+    const intersectionObservers = useContext(IntersectionObserverContext);
+    const firstScrollIntoViewChange = useRef(false);
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const scrollViewRef = useAnimatedRef();
+    useNodesRef(props, ref, scrollViewRef, {
+        style: normalStyle,
+        scrollOffset: scrollOptions,
+        node: {
+            scrollEnabled: scrollX || scrollY,
+            bounces,
+            showScrollbar,
+            pagingEnabled,
+            fastDeceleration: false,
+            decelerationDisabled: false,
+            scrollTo: scrollToOffset
+        },
+        gestureRef: scrollViewRef
+    });
+    const contextValue = useMemo(() => {
+        return {
+            gestureRef: scrollViewRef
+        };
+    }, []);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
+    if (scrollX && scrollY) {
+        warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
+    }
+    useEffect(() => {
+        if (snapScrollTop.current !== scrollTop || snapScrollLeft.current !== scrollLeft) {
+            initialTimeout.current = setTimeout(() => {
+                scrollToOffset(scrollLeft, scrollTop);
+            }, 0);
+            return () => {
+                initialTimeout.current && clearTimeout(initialTimeout.current);
+            };
+        }
+    }, [scrollTop, scrollLeft]);
+    useEffect(() => {
+        if (refreshing !== refresherTriggered) {
+            setRefreshing(!!refresherTriggered);
+        }
+    }, [refresherTriggered]);
+    useEffect(() => {
+        if (scrollIntoView && __selectRef) {
+            if (!firstScrollIntoViewChange.current) {
+                setTimeout(handleScrollIntoView);
+            }
+            else {
+                handleScrollIntoView();
+            }
+        }
+        firstScrollIntoViewChange.current = true;
+    }, [scrollIntoView]);
+    function handleScrollIntoView() {
+        const refs = __selectRef(`#${scrollIntoView}`, 'node');
+        if (!refs)
+            return;
+        const { nodeRef } = refs.getNodeInstance();
+        nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
+            scrollToOffset(left, top);
+        });
+    }
+    function selectLength(size) {
+        return !scrollX ? size.height : size.width;
+    }
+    function selectOffset(position) {
+        return !scrollX ? position.y : position.x;
+    }
+    function onStartReached(e) {
+        const { bindscrolltoupper } = props;
+        const { offset } = scrollOptions.current;
+        if (bindscrolltoupper && (offset <= upperThreshold)) {
+            if (!hasCallScrollToUpper.current) {
+                bindscrolltoupper(getCustomEvent('scrolltoupper', e, {
+                    detail: {
+                        direction: scrollX ? 'left' : 'top'
+                    },
+                    layoutRef
+                }, props));
+                hasCallScrollToUpper.current = true;
+            }
+        }
+        else {
+            hasCallScrollToUpper.current = false;
+        }
+    }
+    function onEndReached(e) {
+        const { bindscrolltolower } = props;
+        const { contentLength, visibleLength, offset } = scrollOptions.current;
+        const distanceFromEnd = contentLength - visibleLength - offset;
+        if (bindscrolltolower && (distanceFromEnd < lowerThreshold)) {
+            if (!hasCallScrollToLower.current) {
+                hasCallScrollToLower.current = true;
+                bindscrolltolower(getCustomEvent('scrolltolower', e, {
+                    detail: {
+                        direction: scrollX ? 'right' : 'botttom'
+                    },
+                    layoutRef
+                }, props));
+            }
+        }
+        else {
+            hasCallScrollToLower.current = false;
+        }
+    }
+    function onContentSizeChange(width, height) {
+        scrollOptions.current.contentLength = selectLength({ height, width });
+    }
+    function onLayout(e) {
+        const layout = e.nativeEvent.layout || {};
+        scrollOptions.current.visibleLength = selectLength(layout);
+    }
+    function updateScrollOptions(e, position) {
+        const visibleLength = selectLength(e.nativeEvent.layoutMeasurement);
+        const contentLength = selectLength(e.nativeEvent.contentSize);
+        const offset = selectOffset(e.nativeEvent.contentOffset);
+        extendObject(scrollOptions.current, {
+            contentLength,
+            offset,
+            scrollLeft: position.scrollLeft,
+            scrollTop: position.scrollTop,
+            visibleLength
+        });
+    }
+    function onScroll(e) {
+        const { bindscroll } = props;
+        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+        const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
+        bindscroll &&
+            bindscroll(getCustomEvent('scroll', e, {
+                detail: {
+                    scrollLeft,
+                    scrollTop,
+                    scrollHeight,
+                    scrollWidth,
+                    deltaX: scrollLeft - scrollOptions.current.scrollLeft,
+                    deltaY: scrollTop - scrollOptions.current.scrollTop
+                },
+                layoutRef
+            }, props));
+        updateScrollOptions(e, { scrollLeft, scrollTop });
+        onStartReached(e);
+        onEndReached(e);
+        updateIntersection();
+    }
+    function onScrollEnd(e) {
+        const { bindscrollend } = props;
+        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+        const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
+        bindscrollend &&
+            bindscrollend(getCustomEvent('scrollend', e, {
+                detail: {
+                    scrollLeft,
+                    scrollTop,
+                    scrollHeight,
+                    scrollWidth
+                },
+                layoutRef
+            }, props));
+        updateScrollOptions(e, { scrollLeft, scrollTop });
+        onStartReached(e);
+        onEndReached(e);
+        updateIntersection();
+    }
+    function updateIntersection() {
+        if (enableTriggerIntersectionObserver && intersectionObservers) {
+            for (const key in intersectionObservers) {
+                intersectionObservers[key].throttleMeasure();
+            }
+        }
+    }
+    function scrollToOffset(x = 0, y = 0) {
+        if (scrollViewRef.current) {
+            scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation });
+            scrollOptions.current.scrollLeft = x;
+            scrollOptions.current.scrollTop = y;
+            snapScrollLeft.current = x;
+            snapScrollTop.current = y;
+        }
+    }
+    function onRefresh() {
+        const { bindrefresherrefresh } = props;
+        bindrefresherrefresh &&
+            bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
+    }
+    function onScrollTouchStart(e) {
+        const { bindtouchstart } = props;
+        bindtouchstart && bindtouchstart(e);
+        if (enhanced) {
+            binddragstart &&
+                binddragstart(getCustomEvent('dragstart', e, {
+                    detail: {
+                        scrollLeft: scrollOptions.current.scrollLeft,
+                        scrollTop: scrollOptions.current.scrollTop
+                    },
+                    layoutRef
+                }, props));
+        }
+    }
+    function onScrollTouchMove(e) {
+        bindtouchmove && bindtouchmove(e);
+        if (enhanced) {
+            binddragging &&
+                binddragging(getCustomEvent('dragging', e, {
+                    detail: {
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0
+                    },
+                    layoutRef
+                }, props));
+        }
+    }
+    function onScrollTouchEnd(e) {
+        bindtouchend && bindtouchend(e);
+        if (enhanced) {
+            binddragend &&
+                binddragend(getCustomEvent('dragend', e, {
+                    detail: {
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0
+                    },
+                    layoutRef
+                }, props));
+        }
+    }
+    function onScrollDrag(e) {
+        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+        updateScrollOptions(e, { scrollLeft, scrollTop });
+        updateIntersection();
+    }
+    function onScrollDragStart(e) {
+        hasCallScrollToLower.current = false;
+        hasCallScrollToUpper.current = false;
+        onScrollDrag(e);
+    }
+    const scrollAdditionalProps = extendObject({
+        style: extendObject({}, innerStyle, layoutStyle),
+        pinchGestureEnabled: false,
+        alwaysBounceVertical: false,
+        alwaysBounceHorizontal: false,
+        horizontal: scrollX && !scrollY,
+        scrollEventThrottle: scrollEventThrottle,
+        scrollsToTop: enableBackToTop,
+        showsHorizontalScrollIndicator: scrollX && showScrollbar,
+        showsVerticalScrollIndicator: scrollY && showScrollbar,
+        scrollEnabled: scrollX || scrollY,
+        ref: scrollViewRef,
+        onScroll: onScroll,
+        onContentSizeChange: onContentSizeChange,
+        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
+        bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
+        bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd,
+        onScrollBeginDrag: onScrollDragStart,
+        onScrollEndDrag: onScrollDrag,
+        onMomentumScrollEnd: onScrollEnd
+    }, (simultaneousHandlers ? { simultaneousHandlers } : {}), (waitForHandlers ? { waitFor: waitForHandlers } : {}), layoutProps);
+    if (enhanced) {
+        Object.assign(scrollAdditionalProps, {
+            bounces,
+            pagingEnabled
+        });
+    }
+    const innerProps = useInnerProps(props, scrollAdditionalProps, [
+        'id',
+        'scroll-x',
+        'scroll-y',
+        'enable-back-to-top',
+        'enable-trigger-intersection-observer',
+        'paging-enabled',
+        'show-scrollbar',
+        'upper-threshold',
+        'lower-threshold',
+        'scroll-top',
+        'scroll-left',
+        'scroll-with-animation',
+        'refresher-triggered',
+        'refresher-enabled',
+        'refresher-default-style',
+        'refresher-background',
+        'children',
+        'enhanced',
+        'binddragstart',
+        'binddragging',
+        'binddragend',
+        'bindscroll',
+        'bindscrolltoupper',
+        'bindscrolltolower',
+        'bindrefresherrefresh'
+    ], { layoutRef });
+    const refreshColor = {
+        black: ['#000'],
+        white: ['#fff']
+    };
+    return createElement(ScrollView, extendObject({}, innerProps, {
+        refreshControl: refresherEnabled
+            ? createElement(RefreshControl, extendObject({
+                progressBackgroundColor: refresherBackground,
+                refreshing: refreshing,
+                onRefresh: onRefresh
+            }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
+            : undefined
+    }), createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
+});
+_ScrollView.displayName = 'MpxScrollView';
+export default _ScrollView;

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

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+import { createElement } from 'react';
+import { extendObject } from './utils';
+const _Text2 = (props) => {
+    const { allowFontScaling = false } = props;
+    return createElement(Text, extendObject({}, props, {
+        allowFontScaling
+    }));
+};
+_Text2.displayName = 'MpxSimpleText';
+export default _Text2;

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

@@ -0,0 +1,59 @@
+import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated';
+import { forwardRef, useRef, useContext } from 'react';
+import useInnerProps from './getInnerListeners';
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
+import { SwiperContext } from './context';
+const _SwiperItem = forwardRef((props, ref) => {
+    const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
+    const contextValue = useContext(SwiperContext);
+    const offset = contextValue.offset || 0;
+    const step = contextValue.step || 0;
+    const scale = contextValue.scale || false;
+    const dir = contextValue.dir || 'x';
+    const { textProps } = splitProps(props);
+    const nodeRef = useRef(null);
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
+    const { 
+    // 存储layout布局信息
+    layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        ...layoutProps
+    }, [
+        'children',
+        'enable-offset',
+        'style'
+    ], { layoutRef });
+    const itemAnimatedStyle = useAnimatedStyle(() => {
+        if (!step.value)
+            return {};
+        const inputRange = [step.value, 0];
+        const outputRange = [0.7, 1];
+        // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现
+        const outerLayoutStyle = dir === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value };
+        const transformStyle = [];
+        if (scale) {
+            transformStyle.push({
+                scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
+            });
+        }
+        return Object.assign(outerLayoutStyle, {
+            transform: transformStyle
+        });
+    });
+    return (<Animated.View {...innerProps} style={[innerStyle, layoutStyle, itemAnimatedStyle, customStyle]} data-itemId={props['item-id']}>
+      {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
+    </Animated.View>);
+});
+_SwiperItem.displayName = 'MpxSwiperItem';
+export default _SwiperItem;