@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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

@@ -0,0 +1,154 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+import { useState, forwardRef, useEffect, useContext } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import { LabelContext, RadioGroupContext } from './context';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
+import Icon from './mpx-icon';
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    wrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 24,
+        height: 24,
+        borderColor: '#D1D1D1',
+        borderWidth: 1,
+        borderRadius: 12,
+        backgroundColor: '#ffffff',
+        marginRight: 5,
+        overflow: 'hidden'
+    },
+    wrapperChecked: {
+        borderWidth: 0
+    },
+    wrapperDisabled: {
+        backgroundColor: '#E1E1E1'
+    },
+    icon: {
+        opacity: 0
+    },
+    iconDisabled: {
+        backgroundColor: '#ADADAD'
+    },
+    iconChecked: {
+        opacity: 1
+    }
+});
+const Radio = forwardRef((radioProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(radioProps);
+    const { value = '', disabled = false, checked = false, color = '#09BB07', style = [], 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap, catchtap } = props;
+    const [isChecked, setIsChecked] = useState(!!checked);
+    const groupContext = useContext(RadioGroupContext);
+    let groupValue;
+    let notifyChange;
+    const labelContext = useContext(LabelContext);
+    const defaultStyle = {
+        ...styles.wrapper,
+        ...(isChecked && styles.wrapperChecked),
+        ...(disabled && styles.wrapperDisabled)
+    };
+    const styleObj = {
+        ...styles.container,
+        ...style
+    };
+    const onChange = (evt) => {
+        if (disabled || isChecked)
+            return;
+        setIsChecked(!isChecked);
+        if (groupValue) {
+            for (const [key, radio] of Object.entries(groupValue)) {
+                if (!radio)
+                    continue;
+                radio.setValue(key === value);
+                radio.checked = key === value;
+            }
+        }
+        notifyChange && notifyChange(evt);
+    };
+    const onTap = (evt) => {
+        if (disabled)
+            return;
+        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
+        onChange(evt);
+    };
+    const catchTap = (evt) => {
+        if (disabled)
+            return;
+        catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
+    };
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Radio does not support background image-related styles!');
+    }
+    const { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle,
+        change: onChange
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    if (groupContext) {
+        groupValue = groupContext.groupValue;
+        notifyChange = groupContext.notifyChange;
+    }
+    if (labelContext) {
+        labelContext.current.triggerChange = onChange;
+    }
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
+        bindtap: onTap,
+        catchtap: catchTap
+    }, [], {
+        layoutRef
+    });
+    useEffect(() => {
+        if (groupValue) {
+            groupValue[value] = {
+                checked: checked,
+                setValue: setIsChecked
+            };
+        }
+        return () => {
+            if (groupValue) {
+                delete groupValue[value];
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (checked !== isChecked) {
+            setIsChecked(checked);
+            if (groupValue) {
+                groupValue[value].checked = checked;
+            }
+        }
+    }, [checked]);
+    return (<View {...innerProps}>
+        <View style={defaultStyle}>
+          <Icon type='success' size={24} color={disabled ? '#E1E1E1' : color} style={{
+            ...styles.icon,
+            ...(isChecked && styles.iconChecked),
+            ...(disabled && styles.iconDisabled)
+        }}/>
+        </View>
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
+      </View>);
+});
+Radio.displayName = 'mpx-radio';
+export default Radio;

package/lib/runtime/components/react/dist/mpx-root-portal.jsx

@@ -0,0 +1,15 @@
+import { Portal } from '@ant-design/react-native';
+import { warn } from '@mpxjs/utils';
+const _RootPortal = (props) => {
+    const { children, enable = true } = props;
+    if (props.style) {
+        warn('The root-portal component does not support the style prop.');
+    }
+    return enable
+        ? <Portal>
+      {children}
+    </Portal>
+        : <>{children}</>;
+};
+_RootPortal.displayName = 'mpx-root-portal';
+export default _RootPortal;

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

@@ -31,32 +31,36 @@
  * ✔ bindscrolltolower
  * ✔ bindscroll
  */
-import { ScrollView, RefreshControl } from 'react-native';
-import React, { useRef, useState, useEffect, forwardRef } from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
+import { RefreshControl } from 'react-native';
+import { useRef, useState, useEffect, forwardRef } from 'react';
+import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-const _ScrollView = forwardRef((props = {}, ref) => {
-    const { children, enhanced = false, bounces = true, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = 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, 'enable-offset': enableOffset, 'show-scrollbar': showScrollbar = true } = props;
-    const [snapScrollTop, setSnapScrollTop] = useState(0);
-    const [snapScrollLeft, setSnapScrollLeft] = useState(0);
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils';
+const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
+    const { enhanced = false, bounces = true, style = {}, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = 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, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [refreshing, setRefreshing] = useState(true);
-    const [scrollEnabled, setScrollEnabled] = useState(true);
-    const layoutRef = useRef({});
+    const snapScrollTop = useRef(0);
+    const snapScrollLeft = useRef(0);
     const scrollOptions = useRef({
         contentLength: 0,
         offset: 0,
         scrollLeft: 0,
         scrollTop: 0,
-        visibleLength: 0,
+        visibleLength: 0
     });
     const scrollEventThrottle = 50;
     const hasCallScrollToUpper = useRef(true);
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { textStyle, innerStyle } = splitStyle(normalStyle);
     const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
         scrollOffset: scrollOptions,
         node: {
-            scrollEnabled,
+            scrollEnabled: scrollX || scrollY,
             bounces,
             showScrollbar,
             pagingEnabled,
@@ -65,11 +69,21 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             scrollTo: scrollToOffset
         }
     });
+    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 !== props['scroll-top'] ||
-            snapScrollLeft !== props['scroll-left']) {
-            setSnapScrollTop(props['scroll-top'] || 0);
-            setSnapScrollLeft(props['scroll-left'] || 0);
+        if (snapScrollTop.current !== props['scroll-top'] ||
+            snapScrollLeft.current !== props['scroll-left']) {
+            snapScrollTop.current = props['scroll-top'] || 0;
+            snapScrollLeft.current = props['scroll-left'] || 0;
+            initialTimeout.current = setTimeout(() => {
+                scrollToOffset(snapScrollLeft.current, snapScrollTop.current);
+            }, 0);
+            return () => {
+                initialTimeout.current && clearTimeout(initialTimeout.current);
+            };
         }
     }, [props['scroll-top'], props['scroll-left']]);
     useEffect(() => {
@@ -77,24 +91,6 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             setRefreshing(!!props['refresher-triggered']);
         }
     }, [props['refresher-triggered']]);
-    useEffect(() => {
-        if (!props['scroll-x'] && !props['scroll-y']) {
-            setScrollEnabled(false);
-        }
-        else {
-            setScrollEnabled(true);
-        }
-    }, [props['scroll-x'], props['scroll-y']]);
-    useEffect(() => {
-        if (snapScrollTop || snapScrollLeft) {
-            initialTimeout.current = setTimeout(() => {
-                scrollToOffset(snapScrollLeft, snapScrollTop);
-            }, 0);
-        }
-        return () => {
-            initialTimeout.current && clearTimeout(initialTimeout.current);
-        };
-    }, [snapScrollTop, snapScrollLeft]);
     function selectLength(size) {
         return !scrollX ? size.height : size.width;
     }
@@ -108,7 +104,7 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             if (!hasCallScrollToUpper.current) {
                 bindscrolltoupper(getCustomEvent('scrolltoupper', e, {
                     detail: {
-                        direction: scrollX ? 'left' : 'top',
+                        direction: scrollX ? 'left' : 'top'
                     },
                     layoutRef
                 }, props));
@@ -128,7 +124,7 @@ const _ScrollView = forwardRef((props = {}, ref) => {
                 hasCallScrollToLower.current = true;
                 bindscrolltolower(getCustomEvent('scrolltolower', e, {
                     detail: {
-                        direction: scrollX ? 'right' : 'botttom',
+                        direction: scrollX ? 'right' : 'botttom'
                     },
                     layoutRef
                 }, props));
@@ -142,12 +138,21 @@ const _ScrollView = forwardRef((props = {}, ref) => {
         scrollOptions.current.contentLength = selectLength({ height, width });
     }
     function onLayout(e) {
-        scrollOptions.current.visibleLength = selectLength(e.nativeEvent.layout);
-        if (enableOffset) {
-            scrollViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-                layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-            });
-        }
+        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);
+        scrollOptions.current = {
+            ...scrollOptions.current,
+            contentLength,
+            offset,
+            scrollLeft: position.scrollLeft,
+            scrollTop: position.scrollTop,
+            visibleLength
+        };
     }
     function onScroll(e) {
         const { bindscroll } = props;
@@ -161,21 +166,27 @@ const _ScrollView = forwardRef((props = {}, ref) => {
                     scrollHeight,
                     scrollWidth,
                     deltaX: scrollLeft - scrollOptions.current.scrollLeft,
-                    deltaY: scrollTop - scrollOptions.current.scrollTop,
+                    deltaY: scrollTop - scrollOptions.current.scrollTop
                 },
                 layoutRef
             }, props));
-        const visibleLength = selectLength(e.nativeEvent.layoutMeasurement);
-        const contentLength = selectLength(e.nativeEvent.contentSize);
-        const offset = selectOffset(e.nativeEvent.contentOffset);
-        scrollOptions.current = {
-            ...scrollOptions.current,
-            contentLength,
-            offset,
-            scrollLeft,
-            scrollTop,
-            visibleLength,
-        };
+        updateScrollOptions(e, { scrollLeft, scrollTop });
+    }
+    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);
     }
@@ -198,8 +209,8 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             binddragstart &&
                 binddragstart(getCustomEvent('dragstart', e, {
                     detail: {
-                        scrollLeft: scrollOptions.current.scrollLeft || 0,
-                        scrollTop: scrollOptions.current.scrollTop || 0,
+                        scrollLeft: scrollOptions.current.scrollLeft,
+                        scrollTop: scrollOptions.current.scrollTop
                     },
                     layoutRef
                 }, props));
@@ -213,51 +224,56 @@ const _ScrollView = forwardRef((props = {}, ref) => {
                 binddragging(getCustomEvent('dragging', e, {
                     detail: {
                         scrollLeft: scrollOptions.current.scrollLeft || 0,
-                        scrollTop: scrollOptions.current.scrollTop || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0
                     },
                     layoutRef
                 }, props));
         }
     }
-    function onScrollTouchEnd(e) {
-        const { binddragend, bindtouchend, enhanced } = props;
-        bindtouchend && bindtouchend(e);
+    function onScrollEndDrag(e) {
+        const { binddragend, enhanced } = props;
         if (enhanced) {
+            const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+            const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
             binddragend &&
                 binddragend(getCustomEvent('dragend', e, {
                     detail: {
-                        scrollLeft: scrollOptions.current.scrollLeft || 0,
-                        scrollTop: scrollOptions.current.scrollTop || 0,
+                        scrollLeft: scrollLeft,
+                        scrollTop: scrollTop,
+                        scrollHeight,
+                        scrollWidth
                     },
                     layoutRef
                 }, props));
+            updateScrollOptions(e, { scrollLeft, scrollTop });
         }
     }
     let scrollAdditionalProps = {
+        style: { ...innerStyle, ...layoutStyle },
         pinchGestureEnabled: false,
-        horizontal: scrollX || !scrollY,
+        horizontal: scrollX && !scrollY,
         scrollEventThrottle: scrollEventThrottle,
         scrollsToTop: enableBackToTop,
         showsHorizontalScrollIndicator: scrollX && showScrollbar,
         showsVerticalScrollIndicator: scrollY && showScrollbar,
-        scrollEnabled: scrollEnabled,
+        scrollEnabled: scrollX || scrollY,
         ref: scrollViewRef,
         onScroll: onScroll,
         onContentSizeChange: onContentSizeChange,
         bindtouchstart: onScrollTouchStart,
-        bindtouchend: onScrollTouchEnd,
         bindtouchmove: onScrollTouchMove,
-        onLayout
+        onScrollEndDrag,
+        onMomentumScrollEnd: onScrollEnd,
+        ...layoutProps
     };
     if (enhanced) {
         scrollAdditionalProps = {
             ...scrollAdditionalProps,
             bounces,
-            pagingEnabled,
+            pagingEnabled
         };
     }
     const innerProps = useInnerProps(props, scrollAdditionalProps, [
-        'enable-offset',
         'scroll-x',
         'scroll-y',
         'enable-back-to-top',
@@ -283,11 +299,18 @@ const _ScrollView = forwardRef((props = {}, ref) => {
         'bindrefresherrefresh'
     ], { layoutRef });
     const refreshColor = {
-        'black': ['#000'],
-        'white': ['#fff']
+        black: ['#000'],
+        white: ['#fff']
     };
-    return (<ScrollView {...innerProps} refreshControl={refresherEnabled ? (<RefreshControl progressBackgroundColor={refresherBackground} refreshing={refreshing} onRefresh={onRefresh} {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}/>) : undefined}>
-      {children}
+    return (<ScrollView {...innerProps} refreshControl={refresherEnabled
+            ? (<RefreshControl progressBackgroundColor={refresherBackground} refreshing={refreshing} onRefresh={onRefresh} {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}/>)
+            : undefined}>
+       {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
     </ScrollView>);
 });
 _ScrollView.displayName = 'mpx-scroll-view';