antd-mobile 5.12.7 → 5.14.0

package/es/components/error-block/create-error-block.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+import { useConfig } from '../config-provider';
+const classPrefix = `adm-error-block`;
+const defaultProps = {
+  status: 'default'
+};
+export function createErrorBlock(imageRecord) {
+  const ErrorBlock = p => {
+    var _a;
+
+    const props = mergeProps(defaultProps, p);
+    const {
+      locale
+    } = useConfig();
+    const contentPack = locale.ErrorBlock[props.status];
+    const des = 'description' in props ? props.description : contentPack.description;
+    const title = 'title' in props ? props.title : contentPack.title;
+    const image = (_a = props.image) !== null && _a !== void 0 ? _a : imageRecord[props.status];
+    const imageNode = typeof image === 'string' ? React.createElement("img", {
+      src: image,
+      alt: 'error block image'
+    }) : image;
+    return withNativeProps(props, React.createElement("div", {
+      className: classNames(classPrefix, {
+        [`${classPrefix}-full-page`]: props.fullPage
+      })
+    }, React.createElement("div", {
+      className: `${classPrefix}-image`
+    }, imageNode), React.createElement("div", {
+      className: `${classPrefix}-description`
+    }, title && React.createElement("div", {
+      className: `${classPrefix}-description-title`
+    }, title), des && React.createElement("div", {
+      className: `${classPrefix}-description-subtitle`
+    }, des)), props.children && React.createElement("div", {
+      className: `${classPrefix}-content`
+    }, props.children)));
+  };
+
+  return ErrorBlock;
+}

package/es/components/error-block/error-block.css

@@ -17,13 +17,13 @@
   height: 100%;
 }
 .adm-error-block-description {
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
   color: #999;
   line-height: 1.4;
   margin-top: 12px;
 }
 .adm-error-block-description-title {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-error-block-description-subtitle {
   margin-top: 8px;
@@ -40,9 +40,9 @@
 }
 .adm-error-block-full-page .adm-error-block-description {
   margin-top: 20px;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
 }
 .adm-error-block-full-page .adm-error-block-description-title {
   font-size: 20px;
-  color: #333;
+  color: var(--adm-color-text);
 }

package/es/components/error-block/error-block.d.ts

@@ -1,11 +1,2 @@
-import React, { FC, ReactElement, ReactNode } from 'react';
-import { NativeProps } from '../../utils/native-props';
-export declare type ErrorBlockProps = {
-    status?: 'default' | 'disconnected' | 'empty' | 'busy';
-    title?: ReactNode;
-    image?: string | ReactElement;
-    description?: ReactNode;
-    fullPage?: boolean;
-    children?: React.ReactNode;
-} & NativeProps<'--image-height' | '--image-height-full-page' | '--image-width' | '--image-width-full-page'>;
-export declare const ErrorBlock: FC<ErrorBlockProps>;
+/// <reference types="react" />
+export declare const ErrorBlock: import("react").FC<import("./create-error-block").ErrorBlockProps>;

package/es/components/error-block/error-block.js

@@ -1,47 +1,9 @@
-import React from 'react';
-import classNames from 'classnames';
-import { mergeProps } from '../../utils/with-default-props';
-import { withNativeProps } from '../../utils/native-props';
-import { useConfig } from '../config-provider';
-import { imageRecord } from './images';
-const classPrefix = `adm-error-block`;
-const defaultProps = {
-  status: 'default'
+import { createErrorBlock } from './create-error-block';
+import { busyImage, defaultImage, disconnectedImage, emptyImage } from './images';
+const imageRecord = {
+  'default': defaultImage,
+  'disconnected': disconnectedImage,
+  'empty': emptyImage,
+  'busy': busyImage
 };
-export const ErrorBlock = p => {
-  const props = mergeProps(defaultProps, p);
-  const {
-    locale
-  } = useConfig();
-  const contentPack = locale.ErrorBlock[props.status];
-  const des = 'description' in props ? props.description : contentPack.description;
-  const title = 'title' in props ? props.title : contentPack.title;
-  let imageNode = imageRecord[props.status];
-
-  if (props.image) {
-    if (typeof props.image === 'string') {
-      imageNode = React.createElement("img", {
-        src: props.image,
-        alt: 'error block image'
-      });
-    } else {
-      imageNode = props.image;
-    }
-  }
-
-  return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, {
-      [`${classPrefix}-full-page`]: props.fullPage
-    })
-  }, React.createElement("div", {
-    className: `${classPrefix}-image`
-  }, imageNode), React.createElement("div", {
-    className: `${classPrefix}-description`
-  }, title && React.createElement("div", {
-    className: `${classPrefix}-description-title`
-  }, title), des && React.createElement("div", {
-    className: `${classPrefix}-description-subtitle`
-  }, des)), props.children && React.createElement("div", {
-    className: `${classPrefix}-content`
-  }, props.children)));
-};
+export const ErrorBlock = createErrorBlock(imageRecord);

package/es/components/error-block/error-block.patch.css

@@ -0,0 +1,23 @@
+.adm-error-block-image {
+  height: 100px;
+  width: auto;
+}
+.adm-error-block-description {
+  font-size: var(--adm-font-size-4);
+}
+.adm-error-block-description-title {
+  font-size: var(--adm-font-size-7);
+}
+.adm-error-block-full-page {
+  padding-top: calc(50vh - 200px);
+}
+.adm-error-block-full-page .adm-error-block-image {
+  height: 200px;
+  width: auto;
+}
+.adm-error-block-full-page .adm-error-block-description {
+  font-size: var(--adm-font-size-main);
+}
+.adm-error-block-full-page .adm-error-block-description-title {
+  color: #333333;
+}

package/es/components/error-block/images/index.d.ts

@@ -1,2 +1,4 @@
-import { ReactElement } from 'react';
-export declare const imageRecord: Record<'default' | 'disconnected' | 'empty' | 'busy', ReactElement>;
+export { defaultImage } from './default';
+export { disconnectedImage } from './disconnected';
+export { emptyImage } from './empty';
+export { busyImage } from './busy';

package/es/components/error-block/images/index.js

@@ -1,10 +1,4 @@
-import { defaultImage } from './default';
-import { disconnectedImage } from './disconnected';
-import { emptyImage } from './empty';
-import { busyImage } from './busy';
-export const imageRecord = {
-  'default': defaultImage,
-  'disconnected': disconnectedImage,
-  'empty': emptyImage,
-  'busy': busyImage
-};
+export { defaultImage } from './default';
+export { disconnectedImage } from './disconnected';
+export { emptyImage } from './empty';
+export { busyImage } from './busy';

package/es/components/error-block/index.d.ts

@@ -1,4 +1,8 @@
 import './error-block.less';
+import { ReactNode } from 'react';
 import { ErrorBlock } from './error-block';
-export type { ErrorBlockProps } from './error-block';
+export { createErrorBlock } from './create-error-block';
+export type { ErrorBlockProps } from './create-error-block';
+export declare type ErrorBlockStatus = 'default' | 'disconnected' | 'empty' | 'busy';
+export declare type ImageRecord = Partial<Record<ErrorBlockStatus, string | ReactNode>>;
 export default ErrorBlock;

package/es/components/error-block/index.js

@@ -1,3 +1,4 @@
 import "./error-block.css";
 import { ErrorBlock } from './error-block';
+export { createErrorBlock } from './create-error-block';
 export default ErrorBlock;

package/es/components/form/form-item.css

@@ -7,7 +7,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
-  color: #666666;
+  color: var(--adm-color-text-secondary);
 }
 .adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
@@ -63,6 +63,6 @@
   align-self: center;
 }
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 4px;
 }

package/es/components/form/form.css

@@ -1,7 +1,7 @@
 .adm-form {
-  --border-inner: solid 1px var(--adm-border-color);
-  --border-top: solid 1px var(--adm-border-color);
-  --border-bottom: solid 1px var(--adm-border-color);
+  --border-inner: solid 1px var(--adm-color-border);
+  --border-top: solid 1px var(--adm-color-border);
+  --border-bottom: solid 1px var(--adm-color-border);
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);

package/es/components/form/index.css

@@ -1,7 +1,7 @@
 .adm-form {
-  --border-inner: solid 1px var(--adm-border-color);
-  --border-top: solid 1px var(--adm-border-color);
-  --border-bottom: solid 1px var(--adm-border-color);
+  --border-inner: solid 1px var(--adm-color-border);
+  --border-top: solid 1px var(--adm-color-border);
+  --border-bottom: solid 1px var(--adm-color-border);
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
@@ -29,7 +29,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
-  color: #666666;
+  color: var(--adm-color-text-secondary);
 }
 .adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
@@ -85,6 +85,6 @@
   align-self: center;
 }
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 4px;
 }

package/es/components/image/image.css

@@ -12,7 +12,7 @@
 }
 .adm-image-tip {
   position: relative;
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   height: 100%;
   min-height: 24px;
   min-width: 24px;

package/es/components/image/image.js

@@ -76,10 +76,12 @@ export const Image = staged(p => {
 
   if (props.width) {
     style['--width'] = toCSSLength(props.width);
+    style['width'] = toCSSLength(props.width);
   }
 
   if (props.height) {
     style['--height'] = toCSSLength(props.height);
+    style['height'] = toCSSLength(props.height);
   }
 
   return withNativeProps(props, React.createElement("div", {

package/es/components/image/image.patch.css

@@ -0,0 +1,10 @@
+.adm-image {
+  width: auto;
+  height: auto;
+}
+.adm-image-tip {
+  background-color: #f5f5f5;
+}
+.adm-image-tip > svg {
+  color: #999999;
+}

package/es/components/image-uploader/image-uploader.css

@@ -24,7 +24,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 0 0 0 12px;
   font-size: 8px;
-  color: #fff;
+  color: var(--adm-color-white);
   cursor: pointer;
 }
 .adm-image-uploader-cell-delete-icon {
@@ -38,7 +38,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: rgba(50, 50, 51, 0.88);
 }
 .adm-image-uploader-cell-loading {
@@ -53,7 +53,7 @@
 .adm-image-uploader-cell-mask-message {
   display: inline-block;
   padding: 6px 4px;
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
 }
 .adm-image-uploader-cell-image {
   width: var(--cell-size);
@@ -63,7 +63,7 @@
   position: relative;
 }
 .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   text-align: center;
   line-height: var(--cell-size);
   display: block;

package/es/components/image-viewer/image-viewer.css

@@ -1,10 +1,15 @@
 .adm-image-viewer-content {
   width: 100vw;
   height: 100vh;
-  max-height: -webkit-fill-available;
   touch-action: none;
   user-select: none;
 }
+.adm-image-viewer-footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  z-index: 1;
+}
 .adm-image-viewer-slides {
   height: 100%;
   position: relative;
@@ -54,5 +59,5 @@
   top: 12px;
   transform: translateX(-50%);
   color: #e6e6e6;
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }

package/es/components/image-viewer/image-viewer.d.ts

@@ -8,16 +8,19 @@ export declare type ImageViewerProps = {
     visible?: boolean;
     onClose?: () => void;
     afterClose?: () => void;
+    renderFooter?: (image: string) => React.ReactNode;
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerRef = SlidesRef;
-export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image'> & {
+export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image' | 'renderFooter'> & {
     images?: string[];
     defaultIndex?: number;
     onIndexChange?: (index: number) => void;
+    renderFooter?: (image: string, index: number) => React.ReactNode;
 };
-export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<ImageViewerProps, "image"> & {
+export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<ImageViewerProps, "image" | "renderFooter"> & {
     images?: string[] | undefined;
     defaultIndex?: number | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
+    renderFooter?: ((image: string, index: number) => React.ReactNode) | undefined;
 } & React.RefAttributes<SlidesRef>>;

package/es/components/image-viewer/image-viewer.js

@@ -1,7 +1,8 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState, useCallback } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { renderToContainer } from '../../utils/render-to-container';
 import Mask from '../mask';
+import SafeArea from '../safe-area';
 import { Slide } from './slide';
 import { Slides } from './slides';
 const classPrefix = `adm-image-viewer`;
@@ -11,6 +12,8 @@ const defaultProps = {
   visible: false
 };
 export const ImageViewer = p => {
+  var _a;
+
   const props = mergeProps(defaultProps, p);
   const node = React.createElement(Mask, {
     visible: props.visible,
@@ -27,6 +30,10 @@ export const ImageViewer = p => {
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     },
     maxZoom: props.maxZoom
+  })), props.image && React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.image), React.createElement(SafeArea, {
+    position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);
 };
@@ -34,17 +41,25 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
 export const MultiImageViewer = forwardRef((p, ref) => {
+  var _a;
+
   const props = mergeProps(multiDefaultProps, p);
-  const [defaultIndex, setDefaultIndex] = useState(props.defaultIndex);
+  const [index, setIndex] = useState(props.defaultIndex);
   const slidesRef = useRef(null);
   useImperativeHandle(ref, () => ({
     swipeTo: (index, immediate) => {
       var _a;
 
-      setDefaultIndex(index);
+      setIndex(index);
       (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
     }
   }));
+  const onSlideChange = useCallback(index => {
+    var _a;
+
+    setIndex(index);
+    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
+  }, [props.onIndexChange]);
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
@@ -54,8 +69,8 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     className: `${classPrefix}-content`
   }, props.images && React.createElement(Slides, {
     ref: slidesRef,
-    defaultIndex: defaultIndex,
-    onIndexChange: props.onIndexChange,
+    defaultIndex: index,
+    onIndexChange: onSlideChange,
     images: props.images,
     onTap: () => {
       var _a;
@@ -63,6 +78,10 @@ export const MultiImageViewer = forwardRef((p, ref) => {
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     },
     maxZoom: props.maxZoom
+  })), props.images && React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.images[index], index), React.createElement(SafeArea, {
+    position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);
 });

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

@@ -4,10 +4,11 @@ import { showMultiImageViewer, showImageViewer, clearImageViewer } from './metho
 export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';
 export type { ImageViewerShowHandler } from './methods';
 declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
-    Multi: import("react").ForwardRefExoticComponent<Omit<import("./image-viewer").ImageViewerProps, "image"> & {
+    Multi: import("react").ForwardRefExoticComponent<Omit<import("./image-viewer").ImageViewerProps, "image" | "renderFooter"> & {
         images?: string[] | undefined;
         defaultIndex?: number | undefined;
         onIndexChange?: ((index: number) => void) | undefined;
+        renderFooter?: ((image: string, index: number) => import("react").ReactNode) | undefined;
     } & import("react").RefAttributes<import("./slides").SlidesRef>> & {
         show: typeof showMultiImageViewer;
     };

package/es/components/index-bar/index-bar.css

@@ -21,8 +21,8 @@
   height: 35px;
   padding: 0 12px;
   color: var(--adm-color-weak);
-  font-size: 13px;
-  background-color: #f5f5f5;
+  font-size: var(--adm-font-size-main);
+  background-color: var(--adm-color-box);
 }
 .adm-index-bar-sidebar {
   position: absolute;
@@ -32,7 +32,7 @@
   z-index: 910;
   overflow: visible;
   color: var(--adm-color-weak);
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
   user-select: none;
   touch-action: none;
 }
@@ -69,7 +69,7 @@
   align-items: center;
 }
 .adm-index-bar-sidebar-item-active {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
   border-radius: 50%;
 }

package/es/components/index-bar/index-bar.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type IndexBarProps = {
     sticky?: boolean;
+    onIndexChange?: (index: string) => void;
     children?: React.ReactNode;
 } & NativeProps<'--sticky-offset-top'>;
 export declare type IndexBarRef = {
@@ -9,5 +10,6 @@ export declare type IndexBarRef = {
 };
 export declare const IndexBar: React.ForwardRefExoticComponent<{
     sticky?: boolean | undefined;
+    onIndexChange?: ((index: string) => void) | undefined;
     children?: React.ReactNode;
 } & NativeProps<"--sticky-offset-top"> & React.RefAttributes<IndexBarRef>>;

package/es/components/index-bar/index-bar.js

@@ -49,6 +49,8 @@ export const IndexBar = forwardRef((p, ref) => {
   }));
 
   function scrollTo(index) {
+    var _a;
+
     const body = bodyRef.current;
     if (!body) return;
     const children = body.children;
@@ -61,6 +63,7 @@ export const IndexBar = forwardRef((p, ref) => {
       if (panelIndex === index) {
         body.scrollTop = panel.offsetTop;
         setActiveIndex(index);
+        activeIndex !== index && ((_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index));
         return;
       }
     }
@@ -69,6 +72,8 @@ export const IndexBar = forwardRef((p, ref) => {
   const {
     run: checkActiveIndex
   } = useThrottleFn(() => {
+    var _a;
+
     const body = bodyRef.current;
     if (!body) return;
     const scrollTop = body.scrollTop;
@@ -82,6 +87,7 @@ export const IndexBar = forwardRef((p, ref) => {
 
       if (panel.offsetTop + panel.clientHeight - titleHeight > scrollTop) {
         setActiveIndex(panelIndex);
+        activeIndex !== panelIndex && ((_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, panelIndex));
         return;
       }
     }

package/es/components/index-bar/index.d.ts

@@ -4,6 +4,7 @@ export type { IndexBarProps, IndexBarRef } from './index-bar';
 export type { IndexBarPanelProps } from './panel';
 declare const _default: import("react").ForwardRefExoticComponent<{
     sticky?: boolean | undefined;
+    onIndexChange?: ((index: string) => void) | undefined;
     children?: import("react").ReactNode;
 } & import("../../utils/native-props").NativeProps<"--sticky-offset-top"> & import("react").RefAttributes<import("./index-bar").IndexBarRef>> & {
     Panel: import("react").FC<import("./panel").IndexBarPanelProps>;

package/es/components/infinite-scroll/infinite-scroll.css

@@ -4,5 +4,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
+}
+.adm-infinite-scroll-failed-text {
+  display: inline-block;
+  margin-right: 8px;
 }

package/es/components/infinite-scroll/infinite-scroll.d.ts

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type InfiniteScrollProps = {
-    loadMore: () => Promise<void>;
+    loadMore: (isRetry: boolean) => Promise<void>;
     hasMore: boolean;
     threshold?: number;
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((hasMore: boolean, failed: boolean, retry: () => void) => React.ReactNode);
 } & NativeProps;
 export declare const InfiniteScroll: FC<InfiniteScrollProps>;