antd-mobile 5.33.2 → 5.34.0

package/2x/es/components/swiper/swiper.js

@@ -34,37 +34,52 @@ const defaultProps = {
 let currentUid;
 export const Swiper = forwardRef(staged((p, ref) => {
   const props = mergeProps(defaultProps, p);
+  const {
+    direction,
+    total,
+    children,
+    indicator
+  } = props;
   const [uid] = useState({});
   const timeoutRef = useRef(null);
-  const isVertical = props.direction === 'vertical';
+  const isVertical = direction === 'vertical';
   const slideRatio = props.slideSize / 100;
   const offsetRatio = props.trackOffset / 100;
   const {
     validChildren,
-    count
+    count,
+    renderChildren
   } = useMemo(() => {
     let count = 0;
-    const validChildren = React.Children.map(props.children, child => {
-      if (!React.isValidElement(child)) return null;
-      if (child.type !== SwiperItem) {
-        devWarning('Swiper', 'The children of `Swiper` must be `Swiper.Item` components.');
-        return null;
-      }
-      count++;
-      return child;
-    });
+    let renderChildren = undefined;
+    let validChildren = undefined;
+    if (typeof children === 'function') {
+      renderChildren = children;
+    } else {
+      validChildren = React.Children.map(children, child => {
+        if (!React.isValidElement(child)) return null;
+        if (child.type !== SwiperItem) {
+          devWarning('Swiper', 'The children of `Swiper` must be `Swiper.Item` components.');
+          return null;
+        }
+        count++;
+        return child;
+      });
+    }
     return {
+      renderChildren,
       validChildren,
       count
     };
-  }, [props.children]);
-  if (count === 0 || !validChildren) {
+  }, [children]);
+  const mergedTotal = total !== null && total !== void 0 ? total : count;
+  if (mergedTotal === 0 || !validChildren && !renderChildren) {
     devWarning('Swiper', '`Swiper` needs at least one child.');
     return null;
   }
   return () => {
     let loop = props.loop;
-    if (slideRatio * (count - 1) < 1) {
+    if (slideRatio * (mergedTotal - 1) < 1) {
       loop = false;
     }
     const trackRef = useRef(null);
@@ -78,7 +93,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
     const [dragging, setDragging, draggingRef] = useRefState(false);
     function boundIndex(current) {
       let min = 0;
-      let max = count - 1;
+      let max = mergedTotal - 1;
       if (props.stuckAtBoundary) {
         min += offsetRatio / slideRatio;
         max -= (1 - slideRatio - offsetRatio) / slideRatio;
@@ -97,7 +112,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
         if (draggingRef.current) return;
         if (!loop) return;
         const rawX = position.get();
-        const totalWidth = 100 * count;
+        const totalWidth = 100 * mergedTotal;
         const standardPosition = modulus(rawX, totalWidth);
         if (standardPosition === rawX) return;
         api.start({
@@ -105,7 +120,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
           immediate: true
         });
       }
-    }), [count]);
+    }), [mergedTotal]);
     const dragCancelRef = useRef(null);
     function forceCancelDrag() {
       var _a;
@@ -152,7 +167,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
         if (loop) return {};
         const slidePixels = getSlidePixels();
         const lowerBound = boundIndex(0) * slidePixels;
-        const upperBound = boundIndex(count - 1) * slidePixels;
+        const upperBound = boundIndex(mergedTotal - 1) * slidePixels;
         return isVertical ? {
           top: lowerBound,
           bottom: upperBound
@@ -171,7 +186,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
     function swipeTo(index, immediate = false) {
       var _a;
       const roundedIndex = Math.round(index);
-      const targetIndex = loop ? modulus(roundedIndex, count) : bound(roundedIndex, 0, count - 1);
+      const targetIndex = loop ? modulus(roundedIndex, mergedTotal) : bound(roundedIndex, 0, mergedTotal - 1);
       if (targetIndex !== getCurrent()) {
         (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, targetIndex);
       }
@@ -193,7 +208,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
       swipePrev
     }));
     useIsomorphicLayoutEffect(() => {
-      const maxIndex = validChildren.length - 1;
+      const maxIndex = mergedTotal - 1;
       if (current > maxIndex) {
         swipeTo(maxIndex, true);
       }
@@ -214,43 +229,67 @@ export const Swiper = forwardRef(staged((p, ref) => {
       return () => {
         if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
       };
-    }, [autoplay, autoplayInterval, dragging, count]);
+    }, [autoplay, autoplayInterval, dragging, mergedTotal]);
+    // ============================== Render ==============================
+    // Render Item
+    function renderItem(index, child) {
+      let itemStyle = {};
+      if (loop) {
+        itemStyle = {
+          [isVertical ? 'y' : 'x']: position.to(position => {
+            let finalPosition = -position + index * 100;
+            const totalWidth = mergedTotal * 100;
+            const flagWidth = totalWidth / 2;
+            finalPosition = modulus(finalPosition + flagWidth, totalWidth) - flagWidth;
+            return `${finalPosition}%`;
+          }),
+          [isVertical ? 'top' : 'left']: `-${index * 100}%`
+        };
+      }
+      return React.createElement(animated.div, {
+        className: classNames(`${classPrefix}-slide`, {
+          [`${classPrefix}-slide-active`]: current === index
+        }),
+        style: itemStyle,
+        key: index
+      }, child);
+    }
+    function renderItems() {
+      if (renderChildren && total) {
+        const offsetCount = 2;
+        const startIndex = Math.max(current - offsetCount, 0);
+        const endIndex = Math.min(current + offsetCount, total - 1);
+        const items = [];
+        for (let index = startIndex; index <= endIndex; index += 1) {
+          items.push(renderItem(index, renderChildren(index)));
+        }
+        return React.createElement(React.Fragment, null, React.createElement("div", {
+          className: `${classPrefix}-slide-placeholder`,
+          style: {
+            width: `${startIndex * 100}%`
+          }
+        }), items);
+      }
+      return React.Children.map(validChildren, (child, index) => {
+        return renderItem(index, child);
+      });
+    }
+    // Render Track Inner
     function renderTrackInner() {
       if (loop) {
         return React.createElement("div", {
           className: `${classPrefix}-track-inner`
-        }, React.Children.map(validChildren, (child, index) => {
-          return React.createElement(animated.div, {
-            className: classNames(`${classPrefix}-slide`, {
-              [`${classPrefix}-slide-active`]: current === index
-            }),
-            style: {
-              [isVertical ? 'y' : 'x']: position.to(position => {
-                let finalPosition = -position + index * 100;
-                const totalWidth = count * 100;
-                const flagWidth = totalWidth / 2;
-                finalPosition = modulus(finalPosition + flagWidth, totalWidth) - flagWidth;
-                return `${finalPosition}%`;
-              }),
-              [isVertical ? 'top' : 'left']: `-${index * 100}%`
-            }
-          }, child);
-        }));
+        }, renderItems());
       } else {
         return React.createElement(animated.div, {
           className: `${classPrefix}-track-inner`,
           style: {
             [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
           }
-        }, React.Children.map(validChildren, (child, index) => {
-          return React.createElement("div", {
-            className: classNames(`${classPrefix}-slide`, {
-              [`${classPrefix}-slide-active`]: current === index
-            })
-          }, child);
-        }));
+        }, renderItems());
       }
     }
+    // Render
     const style = {
       '--slide-size': `${props.slideSize}%`,
       '--track-offset': `${props.trackOffset}%`
@@ -264,8 +303,20 @@ export const Swiper = forwardRef(staged((p, ref) => {
       };
     }
     const mergedProps = mergeFuncProps(dragProps, stopPropagationProps);
+    let indicatorNode = null;
+    if (typeof indicator === 'function') {
+      indicatorNode = indicator(mergedTotal, current);
+    } else if (indicator !== false) {
+      indicatorNode = React.createElement("div", {
+        className: `${classPrefix}-indicator`
+      }, React.createElement(PageIndicator, Object.assign({}, props.indicatorProps, {
+        total: mergedTotal,
+        current: current,
+        direction: direction
+      })));
+    }
     return withNativeProps(props, React.createElement("div", {
-      className: classNames(classPrefix, `${classPrefix}-${props.direction}`),
+      className: classNames(classPrefix, `${classPrefix}-${direction}`),
       style: style
     }, React.createElement("div", Object.assign({
       ref: trackRef,
@@ -278,13 +329,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
         }
         forceCancelDrag();
       }
-    }, mergedProps), renderTrackInner()), props.indicator === undefined ? React.createElement("div", {
-      className: `${classPrefix}-indicator`
-    }, React.createElement(PageIndicator, Object.assign({}, props.indicatorProps, {
-      total: count,
-      current: current,
-      direction: props.direction
-    }))) : props.indicator(count, current)));
+    }, mergedProps), renderTrackInner()), indicatorNode));
   };
 }));
 function modulus(value, division) {

package/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.33.2",
+  "version": "5.34.0",
   "license": "MIT",
   "dependencies": {
     "@floating-ui/dom": "^1.4.2",
@@ -14,7 +14,7 @@
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "rc-field-form": "~1.27.4",
-    "rc-util": "^5.30.0",
+    "rc-util": "^5.38.1",
     "react-is": "^18.2.0",
     "runes2": "^1.1.2",
     "staged-components": "^1.1.3",