antd-mobile 5.13.1 → 5.14.2

package/2x/cjs/components/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 .adm-checkbox {
   --icon-size: 44px;
-  --font-size: 34px;
+  --font-size: var(--adm-font-size-9);
   --gap: 16px;
   display: inline-flex;
   vertical-align: text-bottom;
@@ -49,7 +49,7 @@
 .adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 
 .adm-checkbox .adm-checkbox-custom-icon {
@@ -57,7 +57,7 @@
 }
 
 .adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-icon {
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   color: var(--adm-color-primary);
 }
 

package/2x/cjs/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/cjs/components/dialog/dialog.d.ts

@@ -1,30 +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;
-    destroyOnClose?: boolean;
-    forceRender?: boolean;
 } & NativeProps;
 export declare const Dialog: FC<DialogProps>;

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

@@ -7,89 +7,32 @@ exports.Dialog = void 0;
 
 var _tslib = require("tslib");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _ahooks = require("ahooks");
-
-var _mask = _interopRequireDefault(require("../mask"));
-
 var _dialogActionButton = require("./dialog-action-button");
 
 var _image = _interopRequireDefault(require("../image"));
 
-var _renderToContainer = require("../../utils/render-to-container");
-
-var _withStopPropagation = require("../../utils/with-stop-propagation");
-
 var _autoCenter = _interopRequireDefault(require("../auto-center"));
 
-var _web = require("@react-spring/web");
-
-var _nativeProps = require("../../utils/native-props");
-
-var _shouldRender = require("../../utils/should-render");
-
-var _useInnerVisible = require("../../utils/use-inner-visible");
+var _centerPopup = _interopRequireDefault(require("../center-popup"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const defaultProps = {
-  visible: false,
   actions: [],
   closeOnAction: false,
-  closeOnMaskClick: false,
-  stopPropagation: ['click'],
-  getContainer: null,
-  disableBodyScroll: true,
-  destroyOnClose: false,
-  forceRender: false
+  closeOnMaskClick: false
 };
 
 const Dialog = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  const unmountedRef = (0, _ahooks.useUnmountedRef)();
-  const style = (0, _web.useSpring)({
-    scale: props.visible ? 1 : 0.8,
-    opacity: props.visible ? 1 : 0,
-    config: {
-      mass: 1.2,
-      tension: 200,
-      friction: 25,
-      clamp: 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] = (0, _react.useState)(props.visible);
-  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
-    if (props.visible) {
-      setActive(true);
-    }
-  }, [props.visible]);
-  const maskVisible = (0, _useInnerVisible.useInnerVisible)(active && props.visible);
-
-  const body = _react.default.createElement("div", {
-    className: (0, _classnames.default)(cls('body'), props.image && cls('with-image'), props.bodyClassName),
-    style: props.bodyStyle
-  }, !!props.image && _react.default.createElement("div", {
+
+  const element = _react.default.createElement(_react.default.Fragment, null, !!props.image && _react.default.createElement("div", {
     className: cls('image-container')
   }, _react.default.createElement(_image.default, {
     src: props.image,
@@ -123,28 +66,27 @@ const Dialog = p => {
     })));
   })));
 
-  const node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: cls(),
-    style: {
-      display: active ? undefined : 'none',
-      pointerEvents: active ? undefined : 'none'
-    }
-  }, _react.default.createElement(_mask.default, {
-    visible: maskVisible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: (0, _classnames.default)(cls('mask'), props.maskClassName),
-    disableBodyScroll: props.disableBodyScroll
-  }), _react.default.createElement("div", {
-    className: cls('wrap')
-  }, _react.default.createElement(_web.animated.div, {
-    style: style
-  }, body)))));
-  return _react.default.createElement(_shouldRender.ShouldRender, {
-    active: active,
-    forceRender: props.forceRender,
-    destroyOnClose: props.destroyOnClose
-  }, (0, _renderToContainer.renderToContainer)(props.getContainer, node));
+  return _react.default.createElement(_centerPopup.default, {
+    className: (0, _classnames.default)(cls(), props.className),
+    style: props.style,
+    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,
+    getContainer: props.getContainer,
+    bodyStyle: props.bodyStyle,
+    bodyClassName: (0, _classnames.default)(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);
 };
 
 exports.Dialog = Dialog;

package/2x/cjs/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/cjs/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/cjs/components/ellipsis/ellipsis.js

@@ -57,7 +57,6 @@ 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));

package/2x/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/image/image.js

@@ -97,10 +97,12 @@ const Image = (0, _stagedComponents.staged)(p => {
 
   if (props.width) {
     style['--width'] = (0, _toCssLength.toCSSLength)(props.width);
+    style['width'] = (0, _toCssLength.toCSSLength)(props.width);
   }
 
   if (props.height) {
     style['--height'] = (0, _toCssLength.toCSSLength)(props.height);
+    style['height'] = (0, _toCssLength.toCSSLength)(props.height);
   }
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {

package/2x/cjs/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;
+}

package/2x/cjs/components/image-uploader/image-uploader.css

@@ -28,7 +28,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 0 0 0 24px;
   font-size: 16px;
-  color: #fff;
+  color: var(--adm-color-white);
   cursor: pointer;
 }
 
@@ -44,7 +44,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: rgba(50, 50, 51, 0.88);
 }
 
@@ -61,7 +61,7 @@
 .adm-image-uploader-cell-mask-message {
   display: inline-block;
   padding: 12px 8px;
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
 }
 
 .adm-image-uploader-cell-image {
@@ -74,7 +74,7 @@
 }
 
 .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/2x/cjs/components/image-viewer/image-viewer.css

@@ -68,5 +68,5 @@
   top: 24px;
   transform: translateX(-50%);
   color: #e6e6e6;
-  font-size: 28px;
+  font-size: var(--adm-font-size-6);
 }

package/2x/cjs/components/index-bar/index-bar.css

@@ -24,8 +24,8 @@
   height: 70px;
   padding: 0 24px;
   color: var(--adm-color-weak);
-  font-size: 26px;
-  background-color: #f5f5f5;
+  font-size: var(--adm-font-size-main);
+  background-color: var(--adm-color-box);
 }
 
 .adm-index-bar-sidebar {
@@ -36,7 +36,7 @@
   z-index: 910;
   overflow: visible;
   color: var(--adm-color-weak);
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
   user-select: none;
   touch-action: none;
 }
@@ -78,7 +78,7 @@
 }
 
 .adm-index-bar-sidebar-item-active {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
   border-radius: 50%;
 }

package/2x/cjs/components/infinite-scroll/infinite-scroll.css

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

package/2x/cjs/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>;