antd-mobile 5.12.7 → 5.14.0

package/2x/es/components/dialog/dialog.css

@@ -1,29 +1,16 @@
 .adm-dialog {
   --z-index: var(--adm-dialog-z-index, 1000);
-  position: fixed;
-  z-index: var(--z-index);
+  ---z-index: var(--z-index);
 }
 
-.adm-dialog .adm-dialog-mask {
-  z-index: 0;
-}
-
-.adm-dialog-wrap {
-  position: fixed;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  width: 75vw;
-  max-width: 1000px;
-  transform: translate(-50%, -50%);
+.adm-dialog .adm-center-popup {
+  --z-index: var(---z-index);
 }
 
 .adm-dialog-body {
   width: 100%;
   max-height: 70vh;
-  font-size: 28px;
-  background-color: white;
-  border-radius: 16px;
+  font-size: var(--adm-font-size-6);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -41,67 +28,67 @@
   padding-top: 40px;
 }
 
-.adm-dialog-body .adm-dialog-image-container {
+.adm-dialog-image-container {
   margin-bottom: 24px;
   max-height: 40vh;
 }
 
-.adm-dialog-body .adm-dialog-header {
+.adm-dialog-header {
   margin-bottom: 16px;
   padding: 0 24px;
 }
 
-.adm-dialog-body .adm-dialog-title {
+.adm-dialog-title {
   margin-bottom: 16px;
   padding: 0 24px;
   font-weight: bold;
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
   line-height: 50px;
   text-align: center;
 }
 
-.adm-dialog-body .adm-dialog-content {
+.adm-dialog-content {
   padding: 0 24px 40px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
-  color: #333;
+  color: var(--adm-color-text);
 }
 
-.adm-dialog-body .adm-dialog-content-empty {
+.adm-dialog-content-empty {
   padding: 0;
   height: 24px;
 }
 
-.adm-dialog-body .adm-dialog-footer {
+.adm-dialog-footer {
   user-select: none;
 }
 
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
-  border-top: 1px solid var(--adm-border-color);
+  border-top: 1px solid var(--adm-color-border);
 }
 
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
 
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 20px;
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
   line-height: 50px;
   border-radius: 0;
-  border-right: solid 1px var(--adm-border-color);
+  border-right: solid 1px var(--adm-color-border);
 }
 
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
 
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }
 

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

@@ -1,28 +1,16 @@
-import React, { FC, ReactNode } from 'react';
-import type { MaskProps } from '../mask';
+import { FC, ReactNode } from 'react';
 import { Action } from './dialog-action-button';
-import { GetContainer } from '../../utils/render-to-container';
-import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
-export declare type DialogProps = {
-    afterClose?: () => void;
-    afterShow?: () => void;
+import { CenterPopupProps } from '../center-popup';
+export declare type DialogProps = Pick<CenterPopupProps, 'afterClose' | 'afterShow' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose' | 'disableBodyScroll' | 'forceRender' | 'getContainer' | 'maskClassName' | 'maskStyle' | 'stopPropagation' | 'visible'> & {
     image?: string;
     header?: ReactNode;
     title?: ReactNode;
     content?: ReactNode;
     actions?: (Action | Action[])[];
     onAction?: (action: Action, index: number) => void | Promise<void>;
-    closeOnAction?: boolean;
     onClose?: () => void;
+    closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-    visible?: boolean;
-    getContainer?: GetContainer;
-    bodyStyle?: React.CSSProperties;
-    bodyClassName?: string;
-    maskStyle?: MaskProps['style'];
-    maskClassName?: string;
-    stopPropagation?: PropagationEvent[];
-    disableBodyScroll?: boolean;
 } & NativeProps;
 export declare const Dialog: FC<DialogProps>;

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

@@ -1,58 +1,19 @@
 import { __awaiter } from "tslib";
-import React, { useState } from 'react';
+import React from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
-import { useUnmountedRef } from 'ahooks';
-import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
-import { renderToContainer } from '../../utils/render-to-container';
-import { withStopPropagation } from '../../utils/with-stop-propagation';
 import AutoCenter from '../auto-center';
-import { useSpring, animated } from '@react-spring/web';
-import { withNativeProps } from '../../utils/native-props';
+import CenterPopup from '../center-popup';
 const defaultProps = {
-  visible: false,
   actions: [],
   closeOnAction: false,
-  closeOnMaskClick: false,
-  stopPropagation: ['click'],
-  getContainer: null,
-  disableBodyScroll: true
+  closeOnMaskClick: false
 };
 export const Dialog = p => {
   const props = mergeProps(defaultProps, p);
-  const unmountedRef = useUnmountedRef();
-  const style = useSpring({
-    scale: props.visible ? 1 : 0.8,
-    opacity: props.visible ? 1 : 0,
-    config: {
-      mass: 1.2,
-      tension: 200,
-      friction: 25,
-      clamp: true
-    },
-    onStart: () => {
-      setActive(true);
-    },
-    onRest: () => {
-      var _a, _b;
-
-      if (unmountedRef.current) return;
-      setActive(props.visible);
-
-      if (props.visible) {
-        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
-      } else {
-        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
-      }
-    }
-  });
-  const [active, setActive] = useState(props.visible);
-  const body = React.createElement("div", {
-    className: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
-    style: props.bodyStyle
-  }, !!props.image && React.createElement("div", {
+  const element = React.createElement(React.Fragment, null, !!props.image && React.createElement("div", {
     className: cls('image-container')
   }, React.createElement(Image, {
     src: props.image,
@@ -85,26 +46,25 @@ export const Dialog = p => {
       })
     })));
   })));
-  const node = withNativeProps(props, React.createElement("div", {
-    className: cls(),
-    style: {
-      display: active ? undefined : 'none'
-    }
-  }, React.createElement(Mask, {
+  return React.createElement(CenterPopup, {
+    afterClose: props.afterClose,
+    afterShow: props.afterShow,
+    onMaskClick: props.closeOnMaskClick ? () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    } : undefined,
     visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: classNames(cls('mask'), props.maskClassName),
-    disableBodyScroll: props.disableBodyScroll
-  }), React.createElement("div", {
-    className: cls('wrap'),
-    style: {
-      pointerEvents: props.visible ? undefined : 'none'
-    }
-  }, React.createElement(animated.div, {
-    style: style
-  }, body))));
-  return renderToContainer(props.getContainer, withStopPropagation(props.stopPropagation, node));
+    getContainer: props.getContainer,
+    bodyStyle: props.bodyStyle,
+    bodyClassName: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    maskStyle: props.maskStyle,
+    maskClassName: props.maskClassName,
+    stopPropagation: props.stopPropagation,
+    disableBodyScroll: props.disableBodyScroll,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
+  }, element);
 };
 
 function cls(name = '') {

package/2x/es/components/divider/divider.css

@@ -3,7 +3,7 @@
   align-items: center;
   margin: 32px 0;
   border-width: 0;
-  border-color: var(--adm-border-color);
+  border-color: var(--adm-color-border);
   border-style: solid;
   color: var(--adm-color-weak);
   font-size: 28px;
@@ -40,5 +40,5 @@
   margin: 0 32px;
   vertical-align: middle;
   border-top: 0;
-  border-left: 2px solid var(--adm-border-color);
+  border-left: 2px solid var(--adm-color-border);
 }

package/2x/es/components/dropdown/dropdown.css

@@ -8,7 +8,7 @@
 }
 
 .adm-dropdown-open .adm-dropdown-nav {
-  border-bottom-color: var(--adm-border-color);
+  border-bottom-color: var(--adm-color-border);
 }
 
 .adm-dropdown-item {
@@ -24,7 +24,7 @@
   align-items: center;
   position: relative;
   max-width: 100%;
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
   padding: 24px;
 }
 

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

@@ -39,7 +39,6 @@ export const Ellipsis = p => {
     container.style.textOverflow = 'clip';
     container.style.whiteSpace = 'normal';
     container.style.webkitLineClamp = 'unset';
-    container.style.webkitBoxOrient = 'unset';
     container.style.display = 'block';
     const lineHeight = pxToNumber(originStyle.lineHeight);
     const maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
@@ -98,7 +97,7 @@ export const Ellipsis = p => {
         }
 
         const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
-        const rightPartMiddle = Math.floor((rightPart[0] + rightPart[1]) / 2);
+        const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
         container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
 
         if (container.offsetHeight <= maxHeight) {

package/2x/es/components/empty/empty.css

@@ -17,6 +17,6 @@
 
 .adm-empty-description {
   margin-top: 16px;
-  font-size: 28px;
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-light);
 }

package/2x/es/components/error-block/create-error-block.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import type { ErrorBlockStatus, ImageRecord } from '.';
+export declare type ErrorBlockProps = {
+    status?: ErrorBlockStatus;
+    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 function createErrorBlock(imageRecord: ImageRecord): React.FC<ErrorBlockProps>;

package/2x/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/2x/es/components/error-block/error-block.css

@@ -20,14 +20,14 @@
 }
 
 .adm-error-block-description {
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
   color: #999;
   line-height: 1.4;
   margin-top: 24px;
 }
 
 .adm-error-block-description-title {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
 }
 
 .adm-error-block-description-subtitle {
@@ -49,10 +49,10 @@
 
 .adm-error-block-full-page .adm-error-block-description {
   margin-top: 40px;
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
 }
 
 .adm-error-block-full-page .adm-error-block-description-title {
   font-size: 40px;
-  color: #333;
+  color: var(--adm-color-text);
 }

package/2x/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/2x/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/2x/es/components/error-block/error-block.patch.css

@@ -0,0 +1,29 @@
+.adm-error-block-image {
+  height: 200px;
+  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 - 400px);
+}
+
+.adm-error-block-full-page .adm-error-block-image {
+  height: 400px;
+  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/2x/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/2x/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/2x/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/2x/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/2x/es/components/form/form-item.css

@@ -8,7 +8,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 {
@@ -79,6 +79,6 @@
 }
 
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 8px;
 }

package/2x/es/components/form/form.css

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

package/2x/es/components/form/index.css

@@ -1,7 +1,7 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-border-color);
-  --border-top: solid 2px var(--adm-border-color);
-  --border-bottom: solid 2px var(--adm-border-color);
+  --border-inner: solid 2px var(--adm-color-border);
+  --border-top: solid 2px var(--adm-color-border);
+  --border-bottom: solid 2px var(--adm-color-border);
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
@@ -34,7 +34,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 {
@@ -105,6 +105,6 @@
 }
 
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 8px;
 }

package/2x/es/components/image/image.css

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

package/2x/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/2x/es/components/image/image.patch.css

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