antd-mobile 5.41.0-alpha.2 → 5.41.0-alpha.3

package/2x/es/components/image-viewer/slides.d.ts

@@ -1,11 +1,12 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, RefObject } from 'react';
 export declare type SlidesType = {
     images: string[];
     onTap?: () => void;
     maxZoom: number;
     defaultIndex: number;
     onIndexChange?: (index: number) => void;
-    imageRender?: (image: string, { index }: {
+    imageRender?: (image: string, { ref, index }: {
+        ref: RefObject<HTMLImageElement>;
         index: number;
     }) => ReactNode;
 };

package/2x/es/components/swiper/swiper.d.ts

@@ -1,5 +1,5 @@
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import React from 'react';
-import type { ReactNode, ReactElement } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { PageIndicatorProps } from '../page-indicator';
 declare const eventToPropRecord: {
@@ -59,10 +59,10 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     /**
      * renderProps is only work when `total` used
      */
-    children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | ((index: number) => ReactElement) | undefined;
+    children?: ReactElement<any, string | React.JSXElementConstructor<any>> | ReactElement<any, string | React.JSXElementConstructor<any>>[] | ((index: number) => ReactElement) | undefined;
 } & {
     className?: string | undefined;
-    style?: (React.CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
+    style?: (CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
     tabIndex?: number | undefined;
 } & React.AriaAttributes & React.RefAttributes<SwiperRef>>;
 export {};

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

@@ -1,17 +1,18 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { withNativeProps } from '../../utils/native-props';
-import { mergeProps } from '../../utils/with-default-props';
-import classNames from 'classnames';
-import { SwiperItem } from './swiper-item';
-import { devWarning } from '../../utils/dev-log';
-import { useSpring, animated } from '@react-spring/web';
+import { animated, useSpring } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
-import PageIndicator from '../page-indicator';
+import { useGetState, useIsomorphicLayoutEffect } from 'ahooks';
+import classNames from 'classnames';
+import toArray from 'rc-util/lib/Children/toArray';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { staged } from 'staged-components';
-import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
-import { useIsomorphicLayoutEffect, useGetState } from 'ahooks';
+import { devWarning } from '../../utils/dev-log';
+import { withNativeProps } from '../../utils/native-props';
+import { useRefState } from '../../utils/use-ref-state';
+import { mergeProps } from '../../utils/with-default-props';
 import { mergeFuncProps } from '../../utils/with-func-props';
+import PageIndicator from '../page-indicator';
+import { SwiperItem } from './swiper-item';
 const classPrefix = `adm-swiper`;
 const eventToPropRecord = {
   'mousedown': 'onMouseDown',
@@ -56,14 +57,15 @@ export const Swiper = forwardRef(staged((p, ref) => {
     if (typeof children === 'function') {
       renderChildren = children;
     } else {
-      validChildren = React.Children.map(children, child => {
+      const childrenArray = toArray(children);
+      validChildren = childrenArray.filter(child => {
         if (!React.isValidElement(child)) return null;
         if (child.type !== SwiperItem) {
           devWarning('Swiper', 'The children of `Swiper` must be `Swiper.Item` components.');
-          return null;
+          return false;
         }
         count++;
-        return child;
+        return true;
       });
     }
     return {
@@ -236,7 +238,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
     }, [autoplay, autoplayInterval, dragging, mergedTotal]);
     // ============================== Render ==============================
     // Render Item
-    function renderItem(index, child) {
+    function renderItem(index, child, key) {
       let itemStyle = {};
       if (loop) {
         itemStyle = {
@@ -255,10 +257,10 @@ export const Swiper = forwardRef(staged((p, ref) => {
           [`${classPrefix}-slide-active`]: current === index
         }),
         style: itemStyle,
-        key: index
+        key: key !== null && key !== void 0 ? key : index
       }, child);
     }
-    function renderItems() {
+    const renderStableItems = () => {
       if (renderChildren && total) {
         const offsetCount = 2;
         const startIndex = Math.max(current - offsetCount, 0);
@@ -274,9 +276,16 @@ export const Swiper = forwardRef(staged((p, ref) => {
           }
         }), items);
       }
-      return React.Children.map(validChildren, (child, index) => {
-        return renderItem(index, child);
-      });
+      if (validChildren) {
+        return validChildren.map((child, index) => {
+          var _a;
+          return renderItem(index, child, (_a = child === null || child === void 0 ? void 0 : child.key) !== null && _a !== void 0 ? _a : index);
+        });
+      }
+      return null;
+    };
+    function renderItems() {
+      return renderStableItems();
     }
     // Render Track Inner
     function renderTrackInner() {

package/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.41.0-alpha.2",
+  "version": "5.41.0-alpha.3",
   "homepage": "https://github.com/ant-design/ant-design-mobile#readme",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-mobile/issues"