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

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

@@ -8,7 +8,8 @@ declare const _default: import("react").FC<import("./image-viewer").ImageViewerP
         defaultIndex?: number | undefined;
         onIndexChange?: ((index: number) => void) | undefined;
         renderFooter?: ((image: string, index: number) => import("react").ReactNode) | undefined;
-        imageRender?: ((image: string, { index }: {
+        imageRender?: ((image: string, { ref, index }: {
+            ref: import("react").RefObject<HTMLImageElement>;
             index: number;
         }) => import("react").ReactNode) | undefined;
     } & import("react").RefAttributes<import("./slides").SlidesRef>> & {

package/2x/es/components/image-viewer/methods.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ImageViewer, MultiImageViewer } from './image-viewer';
 import { renderImperatively } from '../../utils/render-imperatively';
+import { ImageViewer, MultiImageViewer } from './image-viewer';
 const handlerSet = new Set();
 export function showImageViewer(props) {
   clearImageViewer();

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

@@ -1,11 +1,12 @@
-import type { FC, MutableRefObject, ReactNode } from 'react';
+import type { FC, MutableRefObject, ReactNode, RefObject } from 'react';
 declare type Props = {
     image: string;
     maxZoom: number | 'auto';
     onTap?: () => void;
     onZoomChange?: (zoom: number) => void;
     dragLockRef?: MutableRefObject<boolean>;
-    imageRender?: (image: string, { index }: {
+    imageRender?: (image: string, { ref, index }: {
+        ref: RefObject<HTMLImageElement>;
         index: number;
     }) => ReactNode;
     index?: number;

package/2x/es/components/image-viewer/slide.js

@@ -222,7 +222,8 @@ export const Slide = props => {
     }
   });
   const customRendering = typeof imageRender === 'function' && imageRender(props.image, {
-    index
+    ref: imgRef,
+    index: index !== null && index !== void 0 ? index : 0
   });
   return React.createElement("div", {
     className: `${classPrefix}-slide`

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/es/components/virtual-input/virtual-input.css

@@ -53,19 +53,23 @@
 
 .adm-virtual-input-caret-container {
   display: inline-block;
-  width: var(--caret-width);
+  width: 0;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
   height: 1.3em;
   vertical-align: top;
-  margin-right: 2px;
-  position: absolute;
+  position: relative;
 }
 
 .adm-virtual-input-caret {
-  width: 100%;
-  height: 100%;
+  width: var(--caret-width);
+  height: 95%;
   background-color: var(--caret-color);
-  position: relative;
+  position: absolute;
   top: 5%;
+  left: 0;
+  z-index: 1;
 }
 
 .adm-virtual-input:focus {

package/2x/package.json

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