@mpxjs/webpack-plugin 2.9.69 → 2.9.70-alpha.1

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

@@ -5,6 +5,8 @@ export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
 }>
 
+export type KeyboardAvoidContextValue = (enabled: boolean) => void
+
 export interface GroupValue {
   [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> }
 }
@@ -48,3 +50,5 @@ export const VarContext = createContext({})
 export const IntersectionObserverContext = createContext<IntersectionObserver | null>(null)
 
 export const RouteContext = createContext<number | null>(null)
+
+export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)

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

@@ -8,3 +8,8 @@ export const PickerContext = createContext(null);
 export const VarContext = createContext({});
 export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
+export const SwiperContext = createContext({});
+export const KeyboardAvoidContext = createContext(null);
+export const ScrollViewContext = createContext({ gestureRef: null });
+export const PortalContext = createContext(null);
+export const PortalManagerContext = createContext(null);

package/lib/runtime/components/react/dist/event.config.js

@@ -1,27 +1,27 @@
 const eventConfigMap = {
-    bindtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
-    bindlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
-    bindtouchstart: ['onTouchStart'],
-    bindtouchmove: ['onTouchMove'],
-    bindtouchend: ['onTouchEnd'],
-    bindtouchcancel: ['onTouchCancel'],
-    catchtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
-    catchlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
-    catchtouchstart: ['onTouchStart'],
-    catchtouchmove: ['onTouchMove'],
-    catchtouchend: ['onTouchEnd'],
-    catchtouchcancel: ['onTouchCancel'],
-    'capture-bindtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
-    'capture-bindlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
-    'capture-bindtouchstart': ['onTouchStartCapture'],
-    'capture-bindtouchmove': ['onTouchMoveCapture'],
-    'capture-bindtouchend': ['onTouchEndCapture'],
-    'capture-bindtouchcancel': ['onTouchCancelCapture'],
-    'capture-catchtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
-    'capture-catchlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
-    'capture-catchtouchstart': ['onTouchStartCapture'],
-    'capture-catchtouchmove': ['onTouchMoveCapture'],
-    'capture-catchtouchend': ['onTouchEndCapture'],
-    'capture-catchtouchcancel': ['onTouchCancelCapture']
+    bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
+    bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
+    bindtouchstart: { bitFlag: '2', events: ['onTouchStart'] },
+    bindtouchmove: { bitFlag: '3', events: ['onTouchMove'] },
+    bindtouchend: { bitFlag: '4', events: ['onTouchEnd'] },
+    bindtouchcancel: { bitFlag: '5', events: ['onTouchCancel'] },
+    catchtap: { bitFlag: '6', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
+    catchlongpress: { bitFlag: '7', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
+    catchtouchstart: { bitFlag: '8', events: ['onTouchStart'] },
+    catchtouchmove: { bitFlag: '9', events: ['onTouchMove'] },
+    catchtouchend: { bitFlag: 'a', events: ['onTouchEnd'] },
+    catchtouchcancel: { bitFlag: 'b', events: ['onTouchCancel'] },
+    'capture-bindtap': { bitFlag: 'c', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
+    'capture-bindlongpress': { bitFlag: 'd', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
+    'capture-bindtouchstart': { bitFlag: 'e', events: ['onTouchStartCapture'] },
+    'capture-bindtouchmove': { bitFlag: 'f', events: ['onTouchMoveCapture'] },
+    'capture-bindtouchend': { bitFlag: 'g', events: ['onTouchEndCapture'] },
+    'capture-bindtouchcancel': { bitFlag: 'h', events: ['onTouchCancelCapture'] },
+    'capture-catchtap': { bitFlag: 'i', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
+    'capture-catchlongpress': { bitFlag: 'j', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
+    'capture-catchtouchstart': { bitFlag: 'k', events: ['onTouchStartCapture'] },
+    'capture-catchtouchmove': { bitFlag: 'l', events: ['onTouchMoveCapture'] },
+    'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'] },
+    'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'] }
 };
 export default eventConfigMap;

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

@@ -1,28 +1,33 @@
-import { useRef } from 'react';
-import { collectDataset } from '@mpxjs/utils';
-import { omit } from './utils';
+import { useRef, useMemo } from 'react';
+import { hasOwn, collectDataset } from '@mpxjs/utils';
+import { omit, extendObject } from './utils';
 import eventConfigMap from './event.config';
 const getTouchEvent = (type, event, props, config) => {
     const nativeEvent = event.nativeEvent;
     const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
     const { id } = props;
     const { layoutRef } = config;
-    return {
-        ...event,
+    const currentTarget = extendObject({}, event.currentTarget, {
+        id: id || '',
+        dataset: collectDataset(props),
+        offsetLeft: layoutRef?.current?.offsetLeft || 0,
+        offsetTop: layoutRef?.current?.offsetTop || 0
+    });
+    const pendingProps = event._targetInst?.pendingProps || {};
+    const target = extendObject({}, event.target, {
+        id: pendingProps.parentId || pendingProps.nativeID || '',
+        dataset: collectDataset(pendingProps)
+    });
+    return extendObject({}, event, {
         type,
         timeStamp: timestamp,
-        currentTarget: {
-            ...(event.currentTarget || {}),
-            id: id || '',
-            dataset: collectDataset(props),
-            offsetLeft: layoutRef?.current?.offsetLeft || 0,
-            offsetTop: layoutRef?.current?.offsetTop || 0
-        },
+        currentTarget,
+        target,
         detail: {
             x: pageX,
             y: pageY
         },
-        touches: touches.map(item => {
+        touches: touches.map((item) => {
             return {
                 identifier: item.identifier,
                 pageX: item.pageX,
@@ -31,7 +36,7 @@ const getTouchEvent = (type, event, props, config) => {
                 clientY: item.locationY
             };
         }),
-        changedTouches: changedTouches.map(item => {
+        changedTouches: changedTouches.map((item) => {
             return {
                 identifier: item.identifier,
                 pageX: item.pageX,
@@ -43,25 +48,150 @@ const getTouchEvent = (type, event, props, config) => {
         persist: event.persist,
         stopPropagation: event.stopPropagation,
         preventDefault: event.preventDefault
-    };
+    });
 };
 export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, props = {}) => {
-    return {
-        ...oe,
+    const targetInfo = extendObject({}, oe.target, {
+        id: props.id || '',
+        dataset: collectDataset(props),
+        offsetLeft: layoutRef?.current?.offsetLeft || 0,
+        offsetTop: layoutRef?.current?.offsetTop || 0
+    });
+    return extendObject({}, oe, {
         type,
         detail,
-        target: {
-            ...(oe.target || {}),
-            id: props.id || '',
-            dataset: collectDataset(props),
-            offsetLeft: layoutRef?.current?.offsetLeft || 0,
-            offsetTop: layoutRef?.current?.offsetTop || 0
-        },
+        target: targetInfo,
         persist: oe.persist,
         stopPropagation: oe.stopPropagation,
         preventDefault: oe.preventDefault
-    };
+    });
 };
+function handleEmitEvent(events, type, oe, propsRef, config) {
+    events.forEach((event) => {
+        if (propsRef.current[event]) {
+            const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event);
+            if (match) {
+                oe.stopPropagation();
+            }
+            propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config));
+        }
+    });
+}
+function checkIsNeedPress(e, type, ref) {
+    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 };
+    const nativeEvent = e.nativeEvent;
+    const currentPageX = nativeEvent.changedTouches[0].pageX;
+    const currentPageY = nativeEvent.changedTouches[0].pageY;
+    if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
+        Math.abs(currentPageY - tapDetailInfo.y) > 3) {
+        ref.current.needPress[type] = false;
+        ref.current.startTimer[type] &&
+            clearTimeout(ref.current.startTimer[type]);
+        ref.current.startTimer[type] = null;
+    }
+}
+function handleTouchstart(e, type, ref, propsRef, config) {
+    e.persist();
+    const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart'];
+    const bubblePressEvent = ['catchlongpress', 'bindlongpress'];
+    const captureTouchEvent = [
+        'capture-catchtouchstart',
+        'capture-bindtouchstart'
+    ];
+    const capturePressEvent = [
+        'capture-catchlongpress',
+        'capture-bindlongpress'
+    ];
+    ref.current.startTimer[type] = null;
+    ref.current.needPress[type] = true;
+    const nativeEvent = e.nativeEvent;
+    ref.current.mpxPressInfo.detail = {
+        x: nativeEvent.changedTouches[0].pageX,
+        y: nativeEvent.changedTouches[0].pageY
+    };
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
+    const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent;
+    handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config);
+    const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current;
+    if (catchlongpress ||
+        bindlongpress ||
+        captureCatchlongpress ||
+        captureBindlongpress) {
+        ref.current.startTimer[type] = setTimeout(() => {
+            ref.current.needPress[type] = false;
+            handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config);
+        }, 350);
+    }
+}
+function handleTouchmove(e, type, ref, propsRef, config) {
+    const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove'];
+    const captureTouchEvent = [
+        'capture-catchtouchmove',
+        'capture-bindtouchmove'
+    ];
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
+    handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config);
+    checkIsNeedPress(e, type, ref);
+}
+function handleTouchend(e, type, ref, propsRef, config) {
+    // move event may not be triggered
+    checkIsNeedPress(e, type, ref);
+    const bubbleTouchEvent = ['catchtouchend', 'bindtouchend'];
+    const bubbleTapEvent = ['catchtap', 'bindtap'];
+    const captureTouchEvent = [
+        'capture-catchtouchend',
+        'capture-bindtouchend'
+    ];
+    const captureTapEvent = ['capture-catchtap', 'capture-bindtap'];
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
+    const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent;
+    ref.current.startTimer[type] &&
+        clearTimeout(ref.current.startTimer[type]);
+    ref.current.startTimer[type] = null;
+    handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config);
+    if (ref.current.needPress[type]) {
+        if (type === 'bubble' && config.disableTap) {
+            return;
+        }
+        handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config);
+    }
+}
+function handleTouchcancel(e, type, ref, propsRef, config) {
+    const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel'];
+    const captureTouchEvent = [
+        'capture-catchtouchcancel',
+        'capture-bindtouchcancel'
+    ];
+    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
+    ref.current.startTimer[type] &&
+        clearTimeout(ref.current.startTimer[type]);
+    ref.current.startTimer[type] = null;
+    handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config);
+}
+function createTouchEventHandler(eventName, type) {
+    return (e, ref, propsRef, config) => {
+        const handlerMap = {
+            onTouchStart: handleTouchstart,
+            onTouchMove: handleTouchmove,
+            onTouchEnd: handleTouchend,
+            onTouchCancel: handleTouchcancel
+        };
+        const handler = handlerMap[eventName];
+        if (handler) {
+            handler(e, type, ref, propsRef, config);
+        }
+    };
+}
+const touchEventList = [
+    { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
+    { eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
+    { eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
+    { eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
+    { eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
+    { eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
+    { eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
+    { eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
+];
 const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], rawConfig) => {
     const ref = useRef({
         startTimer: {
@@ -81,7 +211,10 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
     });
     const propsRef = useRef({});
     const eventConfig = {};
-    const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false };
+    const config = rawConfig || {
+        layoutRef: { current: {} },
+        disableTap: false
+    };
     const removeProps = [
         'children',
         'enable-background',
@@ -93,151 +226,35 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
         'parent-height',
         ...userRemoveProps
     ];
-    propsRef.current = { ...props, ...additionalProps };
+    propsRef.current = extendObject({}, props, additionalProps);
+    let hashEventKey = '';
+    const rawEventKeys = [];
     for (const key in eventConfigMap) {
-        if (propsRef.current[key]) {
-            eventConfig[key] = eventConfigMap[key];
+        if (hasOwn(propsRef.current, key)) {
+            eventConfig[key] = eventConfigMap[key].events;
+            hashEventKey = hashEventKey + eventConfigMap[key].bitFlag;
+            rawEventKeys.push(key);
         }
     }
-    if (!(Object.keys(eventConfig).length) || config.disableTouch) {
-        return omit(propsRef.current, removeProps);
-    }
-    function handleEmitEvent(events, type, oe) {
-        events.forEach(event => {
-            if (propsRef.current[event]) {
-                const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event);
-                if (match) {
-                    oe.stopPropagation();
-                }
-                propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config));
-            }
-        });
-    }
-    function checkIsNeedPress(e, type) {
-        const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 };
-        const nativeEvent = e.nativeEvent;
-        const currentPageX = nativeEvent.changedTouches[0].pageX;
-        const currentPageY = nativeEvent.changedTouches[0].pageY;
-        if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
-            ref.current.needPress[type] = false;
-            ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type]);
-            ref.current.startTimer[type] = null;
-        }
-    }
-    function handleTouchstart(e, type) {
-        e.persist();
-        const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart'];
-        const bubblePressEvent = ['catchlongpress', 'bindlongpress'];
-        const captureTouchEvent = ['capture-catchtouchstart', 'capture-bindtouchstart'];
-        const capturePressEvent = ['capture-catchlongpress', 'capture-bindlongpress'];
-        ref.current.startTimer[type] = null;
-        ref.current.needPress[type] = true;
-        const nativeEvent = e.nativeEvent;
-        ref.current.mpxPressInfo.detail = {
-            x: nativeEvent.changedTouches[0].pageX,
-            y: nativeEvent.changedTouches[0].pageY
-        };
-        const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-        const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent;
-        handleEmitEvent(currentTouchEvent, 'touchstart', e);
-        const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current;
-        if (catchlongpress || bindlongpress || captureCatchlongpress || captureBindlongpress) {
-            ref.current.startTimer[type] = setTimeout(() => {
-                ref.current.needPress[type] = false;
-                handleEmitEvent(currentPressEvent, 'longpress', e);
-            }, 350);
-        }
-    }
-    function handleTouchmove(e, type) {
-        const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove'];
-        const captureTouchEvent = ['capture-catchtouchmove', 'capture-bindtouchmove'];
-        const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-        handleEmitEvent(currentTouchEvent, 'touchmove', e);
-        checkIsNeedPress(e, type);
-    }
-    function handleTouchend(e, type) {
-        // move event may not be triggered
-        checkIsNeedPress(e, type);
-        const bubbleTouchEvent = ['catchtouchend', 'bindtouchend'];
-        const bubbleTapEvent = ['catchtap', 'bindtap'];
-        const captureTouchEvent = ['capture-catchtouchend', 'capture-bindtouchend'];
-        const captureTapEvent = ['capture-catchtap', 'capture-bindtap'];
-        const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-        const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent;
-        ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type]);
-        ref.current.startTimer[type] = null;
-        handleEmitEvent(currentTouchEvent, 'touchend', e);
-        if (ref.current.needPress[type]) {
-            if (type === 'bubble' && config.disableTap) {
-                return;
-            }
-            handleEmitEvent(currentTapEvent, 'tap', e);
+    const events = useMemo(() => {
+        if (!rawEventKeys.length) {
+            return {};
         }
-    }
-    function handleTouchcancel(e, type) {
-        const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel'];
-        const captureTouchEvent = ['capture-catchtouchcancel', 'capture-bindtouchcancel'];
-        const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-        ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type]);
-        ref.current.startTimer[type] = null;
-        handleEmitEvent(currentTouchEvent, 'touchcancel', e);
-    }
-    const touchEventList = [{
-            eventName: 'onTouchStart',
-            handler: (e) => {
-                handleTouchstart(e, 'bubble');
-            }
-        }, {
-            eventName: 'onTouchMove',
-            handler: (e) => {
-                handleTouchmove(e, 'bubble');
-            }
-        }, {
-            eventName: 'onTouchEnd',
-            handler: (e) => {
-                handleTouchend(e, 'bubble');
-            }
-        }, {
-            eventName: 'onTouchCancel',
-            handler: (e) => {
-                handleTouchcancel(e, 'bubble');
-            }
-        }, {
-            eventName: 'onTouchStartCapture',
-            handler: (e) => {
-                handleTouchstart(e, 'capture');
+        const transformedEventKeys = rawEventKeys.reduce((acc, key) => {
+            if (propsRef.current[key]) {
+                return acc.concat(eventConfig[key]);
             }
-        }, {
-            eventName: 'onTouchMoveCapture',
-            handler: (e) => {
-                handleTouchmove(e, 'capture');
+            return acc;
+        }, []);
+        const finalEventKeys = [...new Set(transformedEventKeys)];
+        const events = {};
+        touchEventList.forEach((item) => {
+            if (finalEventKeys.includes(item.eventName)) {
+                events[item.eventName] = (e) => item.handler(e, ref, propsRef, config);
             }
-        }, {
-            eventName: 'onTouchEndCapture',
-            handler: (e) => {
-                handleTouchend(e, 'capture');
-            }
-        }, {
-            eventName: 'onTouchCancelCapture',
-            handler: (e) => {
-                handleTouchcancel(e, 'capture');
-            }
-        }];
-    const events = {};
-    const transformedEventKeys = [];
-    for (const key in eventConfig) {
-        transformedEventKeys.push(...eventConfig[key]);
-    }
-    const finalEventKeys = [...new Set(transformedEventKeys)];
-    touchEventList.forEach(item => {
-        if (finalEventKeys.includes(item.eventName)) {
-            events[item.eventName] = item.handler;
-        }
-    });
-    const rawEventKeys = Object.keys(eventConfig);
-    return {
-        ...events,
-        ...omit(propsRef.current, [...rawEventKeys, ...removeProps])
-    };
+        });
+        return events;
+    }, [hashEventKey]);
+    return extendObject({}, events, omit(propsRef.current, [...rawEventKeys, ...removeProps]));
 };
 export default useInnerProps;

package/lib/runtime/components/react/dist/locale-provider.jsx

@@ -0,0 +1,15 @@
+import { createContext, useMemo, memo } from 'react';
+import { extendObject } from './utils';
+export const LocaleContext = createContext(undefined);
+const LocaleProvider = (props) => {
+    const locale = useMemo(() => {
+        return {
+            antLocale: extendObject({}, props.locale, { exist: true })
+        };
+    }, [props.locale]);
+    return (<LocaleContext.Provider value={locale}>
+      {props.children}
+    </LocaleContext.Provider>);
+};
+LocaleProvider.displayName = 'LocaleProvider';
+export default memo(LocaleProvider);