@mpxjs/webpack-plugin 2.9.73 → 2.10.0

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

@@ -7,7 +7,7 @@
  * ✘ placeholder-class
  * ✔ disabled
  * ✔ maxlength
- * ✘ cursor-spacing
+ * ✔ cursor-spacing
  * ✔ auto-focus
  * ✔ focus
  * ✔ confirm-type
@@ -37,7 +37,7 @@
  * ✘ bind:keyboardcompositionend
  * ✘ bind:onkeyboardheightchange
  */
-import { forwardRef, useMemo, useRef, useState, useContext, useEffect, createElement } from 'react';
+import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
 import { Platform, TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
@@ -54,17 +54,28 @@ const keyboardTypeMap = {
     }) || ''
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
-    const setKeyboardAvoidEnabled = useContext(KeyboardAvoidContext);
+    const keyboardAvoid = useContext(KeyboardAvoidContext);
     let formValuesMap;
     if (formContext) {
         formValuesMap = formContext.formValuesMap;
     }
+    const parseValue = (value) => {
+        if (typeof value === 'string') {
+            if (value.length > maxlength && maxlength >= 0) {
+                return value.slice(0, maxlength);
+            }
+            return value;
+        }
+        if (typeof value === 'number')
+            return value + '';
+        return '';
+    };
     const keyboardType = keyboardTypeMap[type];
-    const defaultValue = type === 'number' && value ? value + '' : value;
+    const defaultValue = parseValue(value);
     const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color;
     const textAlignVertical = multiline ? 'top' : 'auto';
     const tmpValue = useRef(defaultValue);
@@ -72,6 +83,7 @@ const Input = forwardRef((props, ref) => {
     const lineCount = useRef(0);
     const [inputValue, setInputValue] = useState(defaultValue);
     const [contentHeight, setContentHeight] = useState(0);
+    const [selection, setSelection] = useState({ start: -1, end: -1 });
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
         ? { minHeight: Math.max(style?.minHeight || 35, contentHeight) }
         : {});
@@ -83,15 +95,15 @@ const Input = forwardRef((props, ref) => {
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {
-            setInputValue(value);
+            setInputValue(parseValue(value));
         }
     }, [value]);
-    const selection = useMemo(() => {
-        if (selectionStart >= 0 && selectionEnd >= 0) {
-            return { start: selectionStart, end: selectionEnd };
+    useEffect(() => {
+        if (typeof cursor === 'number') {
+            setSelection({ start: cursor, end: cursor });
         }
-        else if (typeof cursor === 'number') {
-            return { start: cursor, end: cursor };
+        else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
+            setSelection({ start: selectionStart, end: selectionEnd });
         }
     }, [cursor, selectionStart, selectionEnd]);
     const onTextInput = ({ nativeEvent }) => {
@@ -119,8 +131,21 @@ const Input = forwardRef((props, ref) => {
             setInputValue(tmpValue.current);
         }
     };
+    const setKeyboardAvoidContext = () => {
+        if (adjustPosition && keyboardAvoid?.current) {
+            extendObject(keyboardAvoid.current, {
+                cursorSpacing,
+                ref: nodeRef
+            });
+        }
+    };
+    const onInputTouchStart = () => {
+        // sometimes the focus event occurs later than the keyboardWillShow event
+        setKeyboardAvoidContext();
+    };
     const onInputFocus = (evt) => {
-        bindfocus(getCustomEvent('focus', evt, {
+        setKeyboardAvoidContext();
+        bindfocus && bindfocus(getCustomEvent('focus', evt, {
             detail: {
                 value: tmpValue.current || ''
             },
@@ -128,7 +153,7 @@ const Input = forwardRef((props, ref) => {
         }, props));
     };
     const onInputBlur = (evt) => {
-        bindblur(getCustomEvent('blur', evt, {
+        bindblur && bindblur(getCustomEvent('blur', evt, {
             detail: {
                 value: tmpValue.current || '',
                 cursor: cursorIndex.current
@@ -154,7 +179,8 @@ const Input = forwardRef((props, ref) => {
         }, props));
     };
     const onSelectionChange = (evt) => {
-        bindselectionchange(getCustomEvent('selectionchange', evt, {
+        setSelection(evt.nativeEvent.selection);
+        bindselectionchange && bindselectionchange(getCustomEvent('selectionchange', evt, {
             detail: {
                 selectionStart: evt.nativeEvent.selection.start,
                 selectionEnd: evt.nativeEvent.selection.end
@@ -203,8 +229,10 @@ const Input = forwardRef((props, ref) => {
         };
     }, []);
     useEffect(() => {
-        setKeyboardAvoidEnabled?.(adjustPosition);
-    }, [adjustPosition]);
+        if (focus) {
+            setKeyboardAvoidContext();
+        }
+    }, [focus]);
     useUpdateEffect(() => {
         if (!nodeRef?.current) {
             return;
@@ -233,11 +261,12 @@ const Input = forwardRef((props, ref) => {
         placeholderTextColor: placeholderTextColor,
         multiline: !!multiline
     }, layoutProps, {
-        onFocus: bindfocus && onInputFocus,
-        onBlur: bindblur && onInputBlur,
+        onTouchStart: onInputTouchStart,
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
         onKeyPress: bindconfirm && onKeyPress,
         onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-        onSelectionChange: bindselectionchange && onSelectionChange,
+        onSelectionChange: onSelectionChange,
         onTextInput: onTextInput,
         onChange: onChange,
         onContentSizeChange: onContentSizeChange

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

@@ -22,7 +22,7 @@ import { StyleSheet } from 'react-native';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit } from './utils';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, useAnimatedReaction, withSpring } from 'react-native-reanimated';
 import { collectDataset, noop } from '@mpxjs/utils';
@@ -43,6 +43,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     propsRef.current = (props || {});
     const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
     const prevWaitForHandlersRef = useRef(waitFor || []);
     const gestureSwitch = useRef(false);
@@ -229,40 +230,41 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             setHeight(height || 0);
         }
         nodeRef.current?.measure((x, y, width, height) => {
-            layoutRef.current = { x, y, width, height, offsetLeft: 0, offsetTop: 0 };
+            const { y: navigationY = 0 } = navigation?.layout || {};
+            layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 };
             resetBoundaryAndCheck({ width, height });
         });
         props.onLayout && props.onLayout(e);
     };
-    const extendEvent = useCallback((e, obj) => {
+    const extendEvent = useCallback((e, type) => {
+        const { y: navigationY = 0 } = navigation?.layout || {};
         const touchArr = [e.changedTouches, e.allTouches];
         touchArr.forEach(touches => {
             touches && touches.forEach((item) => {
                 item.pageX = item.absoluteX;
-                item.pageY = item.absoluteY;
+                item.pageY = item.absoluteY - navigationY;
+                item.clientX = item.absoluteX;
+                item.clientY = item.absoluteY - navigationY;
             });
         });
         Object.assign(e, {
-            touches: e.allTouches,
-            detail: {
-                x: e.changedTouches[0].absoluteX,
-                y: e.changedTouches[0].absoluteY
-            },
+            touches: type === 'end' ? [] : e.allTouches,
             currentTarget: {
                 id: props.id || '',
                 dataset: collectDataset(props),
                 offsetLeft: 0,
                 offsetTop: 0
-            }
-        }, obj);
+            },
+            detail: {}
+        });
     }, []);
     const triggerStartOnJS = ({ e }) => {
-        extendEvent(e);
+        extendEvent(e, 'start');
         bindtouchstart && bindtouchstart(e);
         catchtouchstart && catchtouchstart(e);
     };
     const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }) => {
-        extendEvent(e);
+        extendEvent(e, 'move');
         if (hasTouchmove) {
             if (touchEvent === 'htouchmove') {
                 bindhtouchmove && bindhtouchmove(e);
@@ -283,7 +285,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         }
     };
     const triggerEndOnJS = ({ e }) => {
-        extendEvent(e);
+        extendEvent(e, 'end');
         bindtouchend && bindtouchend(e);
         catchtouchend && catchtouchend(e);
     };

package/lib/runtime/components/react/dist/mpx-picker/time.jsx

@@ -1,5 +1,6 @@
 import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native';
-import { PickerView, Portal } from '@ant-design/react-native';
+import Portal from '../mpx-portal/index';
+import { PickerView } from '@ant-design/react-native';
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 // 可见应用窗口的大小。

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

@@ -0,0 +1,30 @@
+import { useContext, useEffect, useRef } from 'react';
+import { PortalContext, RouteContext, VarContext } from '../context';
+import PortalHost, { portal } from './portal-host';
+const Portal = ({ children }) => {
+    const manager = useContext(PortalContext);
+    const keyRef = useRef(null);
+    const { pageId } = useContext(RouteContext) || {};
+    const varContext = useContext(VarContext);
+    if (varContext) {
+        children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>);
+    }
+    useEffect(() => {
+        manager.update(keyRef.current, children);
+    }, [children]);
+    useEffect(() => {
+        if (!manager) {
+            throw new Error('Looks like you forgot to wrap your root component with `PortalHost` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/index`.\n\n');
+        }
+        keyRef.current = manager.mount(children, null, pageId);
+        return () => {
+            manager.unmount(keyRef.current);
+        };
+    }, []);
+    return null;
+};
+Portal.Host = PortalHost;
+Portal.add = portal.add;
+Portal.remove = portal.remove;
+Portal.update = portal.update;
+export default Portal;

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

@@ -0,0 +1,112 @@
+import { useEffect, useRef, useMemo, useContext } from 'react';
+import { View, DeviceEventEmitter, NativeEventEmitter, StyleSheet } from 'react-native';
+import PortalManager from './portal-manager';
+import { PortalContext, RouteContext } from '../context';
+// events
+const addType = 'MPX_RN_ADD_PORTAL';
+const removeType = 'MPX_RN_REMOVE_PORTAL';
+const updateType = 'MPX_RN_UPDATE_PORTAL';
+// fix react native web does not support DeviceEventEmitter
+const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter();
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+});
+class PortalGuard {
+    nextKey = 10000;
+    add = (e, id) => {
+        const key = this.nextKey++;
+        TopViewEventEmitter.emit(addType, e, key, id);
+        return key;
+    };
+    remove = (key) => {
+        TopViewEventEmitter.emit(removeType, key);
+    };
+    update = (key, e) => {
+        TopViewEventEmitter.emit(updateType, key, e);
+    };
+}
+/**
+ * portal
+ */
+export const portal = new PortalGuard();
+const PortalHost = ({ children }) => {
+    const _nextKey = useRef(0);
+    const manager = useRef(null);
+    const queue = useRef([]);
+    const { pageId } = useContext(RouteContext) || {};
+    const mount = (children, _key, id) => {
+        if (id !== pageId)
+            return;
+        const key = _key || _nextKey.current++;
+        if (manager.current) {
+            manager.current.mount(key, children);
+        }
+        else {
+            queue.current.push({ type: 'mount', key, children });
+        }
+        return key;
+    };
+    const unmount = (key) => {
+        if (manager.current) {
+            manager.current.unmount(key);
+        }
+        else {
+            queue.current.push({ type: 'unmount', key, children });
+        }
+    };
+    const update = (key, children) => {
+        if (manager.current) {
+            manager.current.update(key, children);
+        }
+        else {
+            const operation = { type: 'mount', key, children };
+            const index = queue.current.findIndex((q) => q.type === 'mount' && q.key === key);
+            if (index > -1) {
+                queue.current[index] = operation;
+            }
+            else {
+                queue.current.push(operation);
+            }
+        }
+    };
+    const subScriptions = useMemo(() => {
+        return [
+            TopViewEventEmitter.addListener(addType, mount),
+            TopViewEventEmitter.addListener(removeType, unmount),
+            TopViewEventEmitter.addListener(updateType, update)
+        ];
+    }, []);
+    useEffect(() => {
+        while (queue.current.length && manager.current) {
+            const operation = queue.current.shift();
+            if (!operation)
+                return;
+            switch (operation.type) {
+                case 'mount':
+                    manager.current.mount(operation.key, operation.children);
+                    break;
+                case 'unmount':
+                    manager.current.unmount(operation.key);
+                    break;
+            }
+        }
+        return () => {
+            subScriptions.forEach((subScription) => {
+                subScription.remove();
+            });
+        };
+    }, []);
+    return (<PortalContext.Provider value={{
+            mount,
+            update,
+            unmount
+        }}>
+      <View style={styles.container} collapsable={false}>
+        {children}
+      </View>
+      <PortalManager ref={manager}/>
+    </PortalContext.Provider>);
+};
+export default PortalHost;

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

@@ -0,0 +1,41 @@
+import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { extendObject } from '../utils';
+const _PortalManager = forwardRef((props, ref) => {
+    const [state, setState] = useState({
+        portals: []
+    });
+    const mount = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: [...prevState.portals, { key, children }]
+        }));
+    }, [state]);
+    const update = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: prevState.portals.map((item) => {
+                if (item.key === key) {
+                    return extendObject({}, item, { children });
+                }
+                return item;
+            })
+        }));
+    }, [state]);
+    const unmount = useCallback((key) => {
+        setState((prevState) => ({
+            portals: prevState.portals.filter((item) => item.key !== key)
+        }));
+    }, []);
+    useImperativeHandle(ref, () => ({
+        mount,
+        update,
+        unmount,
+        portals: state.portals
+    }));
+    return (<>
+      {state.portals.map(({ key, children }, i) => (<View key={key} collapsable={false} // Need collapsable=false here to clip the elevations
+         style={[StyleSheet.absoluteFill, { zIndex: 1000 + i, pointerEvents: 'box-none' }]}>
+          {children}
+        </View>))}
+    </>);
+});
+export default _PortalManager;

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

@@ -2,7 +2,7 @@
  * ✔ enable
  */
 import { createElement, Fragment } from 'react';
-import { Portal } from '@ant-design/react-native';
+import Portal from './mpx-portal/index';
 import { warn } from '@mpxjs/utils';
 const _RootPortal = (props) => {
     const { children, enable = true } = props;

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

@@ -203,11 +203,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         updateScrollOptions(e, { scrollLeft, scrollTop });
         onStartReached(e);
         onEndReached(e);
-        if (enableTriggerIntersectionObserver && intersectionObservers) {
-            for (const key in intersectionObservers) {
-                intersectionObservers[key].throttleMeasure();
-            }
-        }
+        updateIntersection();
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
@@ -226,6 +222,14 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         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) {
@@ -284,10 +288,18 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     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,
@@ -298,9 +310,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         onScroll: onScroll,
         onContentSizeChange: onContentSizeChange,
         bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
-        bindtouchmove: ((enhanced && binddragging) || bindtouchend) && onScrollTouchMove,
+        bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
         bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd,
-        onScrollBeginDrag: onScrollDrag,
+        onScrollBeginDrag: onScrollDragStart,
         onScrollEndDrag: onScrollDrag,
         onMomentumScrollEnd: onScrollEnd
     }, (simultaneousHandlers ? { simultaneousHandlers } : {}), (waitForHandlers ? { waitFor: waitForHandlers } : {}), layoutProps);

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

@@ -63,7 +63,7 @@ const activeDotStyle = {
 };
 const longPressRatio = 100;
 const easeMap = {
-    default: Easing.linear,
+    default: Easing.inOut(Easing.cubic),
     linear: Easing.linear,
     easeInCubic: Easing.in(Easing.cubic),
     easeOutCubic: Easing.out(Easing.cubic),
@@ -413,7 +413,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
             let isCriticalItem = false;
             // 真实滚动到的偏移量坐标
             let moveToTargetPos = 0;
-            const currentOffset = translation < 0 ? offset.value - preMarginShared.value : offset.value + preMarginShared.value;
+            const tmp = !circularShared.value ? 0 : preMarginShared.value;
+            const currentOffset = translation < 0 ? offset.value - tmp : offset.value + tmp;
             const computedIndex = Math.abs(currentOffset) / step.value;
             const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
             // 实际应该定位的索引值

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

@@ -13,20 +13,28 @@ import { forwardRef, createElement } from 'react';
 import { Keyboard } from 'react-native';
 import Input from './mpx-input';
 import { omit, extendObject } from './utils';
+const DEFAULT_TEXTAREA_WIDTH = 300;
+const DEFAULT_TEXTAREA_HEIGHT = 150;
 const Textarea = forwardRef((props, ref) => {
+    const { style = {} } = props;
     const restProps = omit(props, [
         'ref',
         'type',
+        'style',
         'password',
         'multiline',
         'confirm-hold'
     ]);
-    return createElement(Input, extendObject({
+    return createElement(Input, extendObject(restProps, {
         ref: ref,
         multiline: true,
         confirmType: 'next',
-        bindblur: () => Keyboard.dismiss()
-    }, restProps));
+        bindblur: () => Keyboard.dismiss(),
+        style: extendObject({
+            width: DEFAULT_TEXTAREA_WIDTH,
+            height: DEFAULT_TEXTAREA_HEIGHT
+        }, style)
+    }));
 });
 Textarea.displayName = 'MpxTextarea';
 export default Textarea;