@mpxjs/webpack-plugin 2.10.18-beta.12 → 2.10.18-beta.14

package/lib/platform/template/wx/component-config/index.js

@@ -42,8 +42,6 @@ const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
-const stickyHeader = require('./sticky-header')
-const stickySection = require('./sticky-section')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -127,8 +125,6 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     component(),
-    rootPortal({ print }),
-    stickyHeader({ print }),
-    stickySection({ print })
+    rootPortal({ print })
   ]
 }

package/lib/runtime/components/ali/mpx-section-list.mpx

@@ -152,7 +152,7 @@
       },
       pollingDuration: {
         type: Number,
-        value: 3000
+        value: 300
       },
       useListHeader: {
         type: Boolean,

package/lib/runtime/components/extends/section-list.mpx

@@ -0,0 +1 @@
+<!-- section-list 占位文件-->

package/lib/runtime/components/extends/sticky-heder.mpx

@@ -0,0 +1 @@
+<!-- sticky-header 占位文件-->

package/lib/runtime/components/extends/sticky-section.mpx

@@ -0,0 +1 @@
+<!-- sticky-section 占位文件-->

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

@@ -271,7 +271,31 @@ const Image = forwardRef((props, ref) => {
     const onImageLoad = (evt) => {
         evt.persist();
         RNImage.getSize(src, (width, height) => {
-            bindload(getCustomEvent('load', evt, {
+            // iPhone 8 等设备对缓存图 getSize 偶发返回 0，用 onLoad 事件里的真实尺寸兜底
+            if (!width || !height) {
+                const nativeEvent = evt.nativeEvent;
+                const source = nativeEvent.source;
+                width = (source && source.width) || nativeEvent.width || 0;
+                height = (source && source.height) || nativeEvent.height || 0;
+                // 布局模式下用真实尺寸同步 view（此时 useEffect 里的 getSize 也没拿到尺寸）
+                if (isLayoutMode && width && height && !state.current.ratio) {
+                    state.current.imageWidth = width;
+                    state.current.imageHeight = height;
+                    state.current.ratio = height / width;
+                    if (isWidthFixMode
+                        ? state.current.viewWidth
+                        : isHeightFixMode
+                            ? state.current.viewHeight
+                            : state.current.viewWidth && state.current.viewHeight) {
+                        setRatio(state.current.ratio);
+                        setImageWidth(width);
+                        setImageHeight(height);
+                        setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
+                        setLoaded(true);
+                    }
+                }
+            }
+            bindload && bindload(getCustomEvent('load', evt, {
                 detail: { width, height },
                 layoutRef
             }, props));
@@ -327,10 +351,12 @@ const Image = forwardRef((props, ref) => {
         return renderImage(extendObject({
             source: { uri: src },
             resizeMode: resizeMode,
-            onLoad: bindload && onImageLoad,
+            onLoad: onImageLoad,
             onError: binderror && onImageError,
             style: extendObject({
                 transformOrigin: 'left top',
+                // 布局模式下尺寸未知（ratio 为 0）前先隐藏，避免按默认高度闪一下（iPhone 8 getSize 返回 0 时尤其明显）
+                opacity: isLayoutMode && !ratio ? 0 : 1,
                 width: isCropMode ? imageWidth : '100%',
                 height: isCropMode ? imageHeight : '100%'
             }, isCropMode ? modeStyle : {})

package/lib/runtime/components/react/dist/mpx-section-list.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+/// <reference types="react" />
+import { GestureHandler } from './utils';
 interface ListItem {
     isSectionHeader?: boolean;
     _originalItemIndex?: number;
@@ -39,10 +40,12 @@ interface SectionListProps {
     'refresher-enabled'?: boolean;
     'show-scrollbar'?: boolean;
     'refresher-triggered'?: boolean;
+    'wait-for'?: Array<GestureHandler>;
+    'simultaneous-handlers'?: Array<GestureHandler>;
     bindrefresherrefresh?: (event: any) => void;
     bindscrolltolower?: (event: any) => void;
     bindscroll?: (event: any) => void;
     [key: string]: any;
 }
-declare const _SectionList: React.ForwardRefExoticComponent<Omit<SectionListProps, "ref"> & React.RefAttributes<any>>;
+declare const _SectionList: import("react").ForwardRefExoticComponent<Omit<SectionListProps, "ref"> & import("react").RefAttributes<any>>;
 export default _SectionList;

package/lib/runtime/components/react/dist/mpx-section-list.jsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, memo } from 'react';
+import { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, memo } from 'react';
 import { SectionList, RefreshControl } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
-import { extendObject, useLayout, useTransformStyle } from './utils';
+import { extendObject, useLayout, useTransformStyle, flatGesture } from './utils';
 const getGeneric = (generichash, generickey) => {
     if (!generichash || !generickey)
         return null;
@@ -15,9 +16,10 @@ const getGeneric = (generichash, generickey) => {
     }));
 };
 const _SectionList = forwardRef((props = {}, ref) => {
-    const { enhanced = false, bounces = true, scrollEventThrottle = 0, height, width, listData, generichash, style = {}, itemHeight = {}, sectionHeaderHeight = {}, listHeaderHeight = {}, listHeaderData = null, useListHeader = false, listFooterData = null, useListFooter = false, 'genericrecycle-item': genericrecycleItem, 'genericsection-header': genericsectionHeader, 'genericlist-header': genericListHeader, 'genericlist-footer': genericListFooter, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-sticky': enableSticky = false, 'enable-back-to-top': enableBackToTop = false, 'end-reached-threshold': onEndReachedThreshold = 0.1, 'refresher-enabled': refresherEnabled, 'show-scrollbar': showScrollbar = true, 'refresher-triggered': refresherTriggered } = props;
+    const { enhanced = false, bounces = true, scrollEventThrottle = 0, height, width, listData, generichash, style = {}, itemHeight = {}, sectionHeaderHeight = {}, listHeaderHeight = {}, listHeaderData = null, useListHeader = false, listFooterData = null, useListFooter = false, 'genericrecycle-item': genericrecycleItem, 'genericsection-header': genericsectionHeader, 'genericlist-header': genericListHeader, 'genericlist-footer': genericListFooter, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-sticky': enableSticky = false, 'enable-back-to-top': enableBackToTop = false, 'end-reached-threshold': onEndReachedThreshold = 0.1, 'refresher-enabled': refresherEnabled, 'show-scrollbar': showScrollbar = true, 'refresher-triggered': refresherTriggered, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor } = props;
     const [refreshing, setRefreshing] = useState(!!refresherTriggered);
     const scrollViewRef = useRef(null);
+    const sectionListGestureRef = useRef();
     const indexMap = useRef({});
     const reverseIndexMap = useRef({});
     const { hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
@@ -176,13 +178,13 @@ const _SectionList = forwardRef((props = {}, ref) => {
             offset += headerHeight;
             // 添加该 section 中所有 items 的位置信息
             section.data.forEach((item, itemIndex) => {
-                const contenteight = getItemHeight({ sectionIndex, rowIndex: itemIndex });
+                const contentHeight = getItemHeight({ sectionIndex, rowIndex: itemIndex });
                 layouts.push({
-                    length: contenteight,
+                    length: contentHeight,
                     offset,
                     index: layouts.length
                 });
-                offset += contenteight;
+                offset += contentHeight;
             });
             // 添加该 section 尾部位置信息
             // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
@@ -210,21 +212,33 @@ const _SectionList = forwardRef((props = {}, ref) => {
         onScroll: onScroll,
         onEndReached: onEndReached
     }, layoutProps);
+    const nativeGesture = useMemo(() => {
+        const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+        const waitForHandlers = flatGesture(waitFor);
+        const gesture = Gesture.Native().withRef(sectionListGestureRef);
+        if (simultaneousHandlers && simultaneousHandlers.length) {
+            gesture.simultaneousWithExternalGesture(...simultaneousHandlers);
+        }
+        if (waitForHandlers && waitForHandlers.length) {
+            gesture.requireExternalGestureToFail(...waitForHandlers);
+        }
+        return gesture;
+    }, [originSimultaneousHandlers, waitFor]);
     if (enhanced) {
-        Object.assign(scrollAdditionalProps, {
+        extendObject(scrollAdditionalProps, {
             bounces
         });
     }
     if (refresherEnabled) {
-        Object.assign(scrollAdditionalProps, {
+        extendObject(scrollAdditionalProps, {
             refreshing: refreshing
         });
     }
     useImperativeHandle(ref, () => {
-        return {
-            ...props,
+        return extendObject({}, props, {
+            gestureRef: sectionListGestureRef,
             scrollToIndex
-        };
+        });
     });
     const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
         'id',
@@ -232,7 +246,9 @@ const _SectionList = forwardRef((props = {}, ref) => {
         'lower-threshold',
         'refresher-triggered',
         'refresher-enabled',
-        'bindrefresherrefresh'
+        'bindrefresherrefresh',
+        'simultaneous-handlers',
+        'wait-for'
     ], { layoutRef });
     // 使用 ref 保存最新的数据，避免数据变化时组件销毁重建
     const listHeaderDataRef = useRef(listHeaderData);
@@ -272,7 +288,7 @@ const _SectionList = forwardRef((props = {}, ref) => {
             return null;
         return () => createElement(ListFooterGenericComponent, { listFooterData: listFooterDataRef.current });
     }, [useListFooter, generichash, genericListFooter]);
-    return createElement(SectionList, extendObject({
+    return createElement(GestureDetector, { gesture: nativeGesture }, createElement(SectionList, extendObject({
         style: [{ height, width }, style, layoutStyle],
         sections: convertedListData,
         renderItem: renderItem,
@@ -281,12 +297,12 @@ const _SectionList = forwardRef((props = {}, ref) => {
         ListFooterComponent: useListFooter ? ListFooterComponent : null,
         renderSectionHeader: renderSectionHeader,
         refreshControl: refresherEnabled
-            ? React.createElement(RefreshControl, {
+            ? createElement(RefreshControl, {
                 onRefresh: onRefresh,
                 refreshing: refreshing
             })
             : undefined
-    }, innerProps));
+    }, innerProps)));
 });
 _SectionList.displayName = 'MpxSectionList';
 export default _SectionList;

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

@@ -381,7 +381,31 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   const onImageLoad = (evt: NativeSyntheticEvent<ImageLoadEventData>) => {
     evt.persist()
     RNImage.getSize(src, (width: number, height: number) => {
-      bindload!(
+      // iPhone 8 等设备对缓存图 getSize 偶发返回 0，用 onLoad 事件里的真实尺寸兜底
+      if (!width || !height) {
+        const nativeEvent = evt.nativeEvent as any
+        const source = nativeEvent.source
+        width = (source && source.width) || nativeEvent.width || 0
+        height = (source && source.height) || nativeEvent.height || 0
+        // 布局模式下用真实尺寸同步 view（此时 useEffect 里的 getSize 也没拿到尺寸）
+        if (isLayoutMode && width && height && !state.current.ratio) {
+          state.current.imageWidth = width
+          state.current.imageHeight = height
+          state.current.ratio = height / width
+          if (isWidthFixMode
+            ? state.current.viewWidth
+            : isHeightFixMode
+              ? state.current.viewHeight
+              : state.current.viewWidth && state.current.viewHeight) {
+            setRatio(state.current.ratio)
+            setImageWidth(width)
+            setImageHeight(height)
+            setViewSize(state.current.viewWidth!, state.current.viewHeight!, state.current.ratio)
+            setLoaded(true)
+          }
+        }
+      }
+      bindload && bindload!(
         getCustomEvent(
           'load',
           evt,
@@ -486,11 +510,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
         {
           source: { uri: src },
           resizeMode: resizeMode,
-          onLoad: bindload && onImageLoad,
+          onLoad: onImageLoad,
           onError: binderror && onImageError,
           style: extendObject(
             {
               transformOrigin: 'left top',
+              // 布局模式下尺寸未知（ratio 为 0）前先隐藏，避免按默认高度闪一下（iPhone 8 getSize 返回 0 时尤其明显）
+              opacity: isLayoutMode && !ratio ? 0 : 1,
               width: isCropMode ? imageWidth : '100%',
               height: isCropMode ? imageHeight : '100%'
             },

package/lib/runtime/components/react/mpx-section-list.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, useCallback, memo } from 'react'
+import { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, memo } from 'react'
 import { SectionList, RefreshControl, NativeSyntheticEvent, NativeScrollEvent } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
-import { extendObject, useLayout, useTransformStyle } from './utils'
+import { extendObject, useLayout, useTransformStyle, GestureHandler, flatGesture } from './utils'
 interface ListItem {
   isSectionHeader?: boolean;
   _originalItemIndex?: number;
@@ -51,6 +52,8 @@ interface SectionListProps {
   'refresher-enabled'?: boolean;
   'show-scrollbar'?: boolean;
   'refresher-triggered'?: boolean;
+  'wait-for'?: Array<GestureHandler>;
+  'simultaneous-handlers'?: Array<GestureHandler>;
   bindrefresherrefresh?: (event: any) => void;
   bindscrolltolower?: (event: any) => void;
   bindscroll?: (event: any) => void;
@@ -107,12 +110,15 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
     'end-reached-threshold': onEndReachedThreshold = 0.1,
     'refresher-enabled': refresherEnabled,
     'show-scrollbar': showScrollbar = true,
-    'refresher-triggered': refresherTriggered
+    'refresher-triggered': refresherTriggered,
+    'simultaneous-handlers': originSimultaneousHandlers,
+    'wait-for': waitFor
   } = props
 
   const [refreshing, setRefreshing] = useState(!!refresherTriggered)
 
   const scrollViewRef = useRef<any>(null)
+  const sectionListGestureRef = useRef<any>()
 
   const indexMap = useRef<{ [key: string]: string | number }>({})
 
@@ -295,13 +301,13 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
 
       // 添加该 section 中所有 items 的位置信息
       section.data.forEach((item: ListItem, itemIndex: number) => {
-        const contenteight = getItemHeight({ sectionIndex, rowIndex: itemIndex })
+        const contentHeight = getItemHeight({ sectionIndex, rowIndex: itemIndex })
         layouts.push({
-          length: contenteight,
+          length: contentHeight,
           offset,
           index: layouts.length
         })
-        offset += contenteight
+        offset += contentHeight
       })
 
       // 添加该 section 尾部位置信息
@@ -335,22 +341,35 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
     layoutProps
   )
 
+  const nativeGesture = useMemo(() => {
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
+    const waitForHandlers = flatGesture(waitFor)
+    const gesture = Gesture.Native().withRef(sectionListGestureRef as any)
+    if (simultaneousHandlers && simultaneousHandlers.length) {
+      gesture.simultaneousWithExternalGesture(...simultaneousHandlers)
+    }
+    if (waitForHandlers && waitForHandlers.length) {
+      gesture.requireExternalGestureToFail(...waitForHandlers)
+    }
+    return gesture
+  }, [originSimultaneousHandlers, waitFor])
+
   if (enhanced) {
-    Object.assign(scrollAdditionalProps, {
+    extendObject(scrollAdditionalProps, {
       bounces
     })
   }
   if (refresherEnabled) {
-    Object.assign(scrollAdditionalProps, {
+    extendObject(scrollAdditionalProps, {
       refreshing: refreshing
     })
   }
 
   useImperativeHandle(ref, () => {
-    return {
-      ...props,
+    return extendObject({}, props, {
+      gestureRef: sectionListGestureRef,
       scrollToIndex
-    }
+    })
   })
 
   const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
@@ -359,7 +378,9 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
     'lower-threshold',
     'refresher-triggered',
     'refresher-enabled',
-    'bindrefresherrefresh'
+    'bindrefresherrefresh',
+    'simultaneous-handlers',
+    'wait-for'
   ], { layoutRef })
 
   // 使用 ref 保存最新的数据，避免数据变化时组件销毁重建
@@ -412,24 +433,28 @@ const _SectionList = forwardRef<any, SectionListProps>((props = {}, ref) => {
   )
 
   return createElement(
-    SectionList,
-    extendObject(
-      {
-        style: [{ height, width }, style, layoutStyle],
-        sections: convertedListData,
-        renderItem: renderItem,
-        getItemLayout: getItemLayout,
-        ListHeaderComponent: useListHeader ? ListHeaderComponent : null,
-        ListFooterComponent: useListFooter ? ListFooterComponent : null,
-        renderSectionHeader: renderSectionHeader,
-        refreshControl: refresherEnabled
-          ? React.createElement(RefreshControl, {
-            onRefresh: onRefresh,
-            refreshing: refreshing
-          })
-          : undefined
-      },
-      innerProps
+    GestureDetector,
+    { gesture: nativeGesture },
+    createElement(
+      SectionList,
+      extendObject(
+        {
+          style: [{ height, width }, style, layoutStyle],
+          sections: convertedListData,
+          renderItem: renderItem,
+          getItemLayout: getItemLayout,
+          ListHeaderComponent: useListHeader ? ListHeaderComponent : null,
+          ListFooterComponent: useListFooter ? ListFooterComponent : null,
+          renderSectionHeader: renderSectionHeader,
+          refreshControl: refresherEnabled
+            ? createElement(RefreshControl, {
+              onRefresh: onRefresh,
+              refreshing: refreshing
+            })
+            : undefined
+        },
+        innerProps
+      )
     )
   )
 })

package/lib/runtime/components/web/mpx-section-list.vue

@@ -140,7 +140,7 @@ export default {
     },
     useListHeader: {
       type: Boolean,
-      default: true
+      default: false
     },
     listFooterData: {
       type: Object,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.18-beta.12",
+  "version": "2.10.18-beta.14",
   "description": "mpx compile core",
   "keywords": [
     "mpx"

package/lib/platform/template/wx/component-config/sticky-header.js

@@ -1,23 +0,0 @@
-const TAG_NAME = 'sticky-header'
-
-module.exports = function ({ print }) {
-  return {
-    test: TAG_NAME,
-    android (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    },
-    ios (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    },
-    harmony (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    },
-    web (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-header'
-    }
-  }
-}

package/lib/platform/template/wx/component-config/sticky-section.js

@@ -1,23 +0,0 @@
-const TAG_NAME = 'sticky-section'
-
-module.exports = function ({ print }) {
-  return {
-    test: TAG_NAME,
-    android (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    },
-    ios (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    },
-    harmony (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    },
-    web (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-sticky-section'
-    }
-  }
-}