antd-mobile 5.1.0 → 5.2.2

package/cjs/components/tabs/tabs.js

@@ -25,6 +25,10 @@ var _useResizeEffect = require("../../utils/use-resize-effect");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
+
+var _shouldRender = require("../../utils/should-render");
+
 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); }
@@ -166,7 +170,7 @@ const Tabs = p => {
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     animate(!x.isAnimating);
   }, []);
-  (0, _ahooks.useUpdateLayoutEffect)(() => {
+  (0, _useIsomorphicUpdateLayoutEffect.useIsomorphicUpdateLayoutEffect)(() => {
     animate();
   }, [activeKey]);
   (0, _useResizeEffect.useResizeEffect)(() => {
@@ -253,24 +257,18 @@ const Tabs = p => {
       return null;
     }
 
-    if (pane.key === activeKey) {
-      return _react.default.createElement("div", {
-        key: pane.key,
-        className: `${classPrefix}-content`
-      }, pane.props.children);
-    }
-
-    if (pane.props.forceRender) {
-      return _react.default.createElement("div", {
-        key: pane.key,
-        className: `${classPrefix}-content`,
-        style: {
-          display: 'none'
-        }
-      }, pane.props.children);
-    }
-
-    return null;
+    const active = pane.key === activeKey;
+    return _react.default.createElement(_shouldRender.ShouldRender, {
+      key: pane.key,
+      active: active,
+      forceRender: pane.props.forceRender,
+      destroyOnClose: pane.props.destroyOnClose
+    }, _react.default.createElement("div", {
+      className: `${classPrefix}-content`,
+      style: {
+        display: active ? 'block' : 'none'
+      }
+    }, pane.props.children));
   })));
 };
 

package/cjs/components/virtual-input/virtual-input.d.ts

@@ -18,7 +18,7 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
     onClick?: ((e: React.MouseEvent<HTMLDivElement>) => void) | undefined;
-    keyboard?: React.ReactElement<NumberKeyboardProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
-} & Pick<InputProps, "value" | "disabled" | "onChange" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;
+} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;

package/cjs/utils/measure-css-length.d.ts

@@ -0,0 +1 @@
+export declare function measureCSSLength(raw: string): number;

package/cjs/utils/measure-css-length.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.measureCSSLength = measureCSSLength;
+
+var _isDev = require("./is-dev");
+
+var _devLog = require("./dev-log");
+
+function measureCSSLength(raw) {
+  const withUnit = raw.trim();
+
+  if (withUnit.endsWith('px')) {
+    return parseFloat(withUnit);
+  } else if (withUnit.endsWith('rem')) {
+    return parseFloat(withUnit) * parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+  } else if (withUnit.endsWith('vw')) {
+    return parseFloat(withUnit) * window.innerWidth / 100;
+  } else {
+    if (_isDev.isDev) {
+      (0, _devLog.devError)('Global', 'You are using a not supported CSS unit. Only `px` `rem` and `vw` are supported.');
+    }
+
+    return 0;
+  }
+}

package/cjs/utils/native-props.d.ts

@@ -5,4 +5,4 @@ export interface NativeProps<S extends string = never> {
     style?: CSSProperties & Partial<Record<S, string>>;
     tabIndex?: number;
 }
-export declare function withNativeProps<P extends NativeProps>(props: P, element: ReactElement): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare function withNativeProps<P extends NativeProps>(props: P, element: ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/cjs/utils/render-to-container.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 export declare type GetContainer = HTMLElement | (() => HTMLElement) | null;
-export declare function renderToContainer(getContainer: GetContainer, node: ReactElement): ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
+export declare function renderToContainer(getContainer: GetContainer, node: ReactElement): ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/cjs/utils/should-render.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactElement } from 'react';
+interface Props {
+    active: boolean;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
+    children: ReactElement;
+}
+export declare const ShouldRender: FC<Props>;
+export declare function useShouldRender(active: boolean, forceRender?: boolean, destroyOnClose?: boolean): boolean;
+export {};

package/{2x/cjs/utils/use-should-render.js → cjs/utils/should-render.js}

@@ -3,10 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ShouldRender = void 0;
 exports.useShouldRender = useShouldRender;
 
 var _useInitialized = require("./use-initialized");
 
+const ShouldRender = props => {
+  const shouldRender = useShouldRender(props.active, props.forceRender, props.destroyOnClose);
+  return shouldRender ? props.children : null;
+};
+
+exports.ShouldRender = ShouldRender;
+
 function useShouldRender(active, forceRender, destroyOnClose) {
   const initialized = (0, _useInitialized.useInitialized)(active);
   if (forceRender) return true;

package/cjs/utils/use-drag-and-pinch.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: {} | Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => Pick<import("react").DOMAttributes<EventTarget>, "onClick" | "onChange" | "onPause" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">;
+export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: {} | Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => import("@use-gesture/react").ReactDOMAttributes;

package/cjs/utils/use-isomorphic-update-layout-effect.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useIsomorphicUpdateLayoutEffect = void 0;
 
-var _createUpdateEffect = require("ahooks/lib/createUpdateEffect");
-
 var _ahooks = require("ahooks");
 
-const useIsomorphicUpdateLayoutEffect = (0, _createUpdateEffect.createUpdateEffect)(_ahooks.useIsomorphicLayoutEffect);
+const useIsomorphicUpdateLayoutEffect = (0, _ahooks.createUpdateEffect)(_ahooks.useIsomorphicLayoutEffect);
 exports.useIsomorphicUpdateLayoutEffect = useIsomorphicUpdateLayoutEffect;

package/cjs/utils/use-props-value.d.ts

@@ -3,5 +3,5 @@ declare type Options<T> = {
     defaultValue: T;
     onChange?: (v: T) => void;
 };
-export declare function usePropsValue<T>(options: Options<T>): readonly [T, (v: T) => void];
+export declare function usePropsValue<T>(options: Options<T>): readonly [T, (this: unknown, v: T) => void];
 export {};

package/cjs/utils/use-tab-list-scroll.js

@@ -13,6 +13,8 @@ var _bound = require("./bound");
 
 var _ahooks = require("ahooks");
 
+var _useIsomorphicUpdateLayoutEffect = require("./use-isomorphic-update-layout-effect");
+
 const useTabListScroll = (targetRef, activeIndex) => {
   const [{
     scrollLeft
@@ -50,7 +52,7 @@ const useTabListScroll = (targetRef, activeIndex) => {
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     animate(true);
   }, []);
-  (0, _ahooks.useUpdateLayoutEffect)(() => {
+  (0, _useIsomorphicUpdateLayoutEffect.useIsomorphicUpdateLayoutEffect)(() => {
     animate();
   }, [activeIndex]);
   (0, _useMutationEffect.useMutationEffect)(() => {

package/cjs/utils/use-touch.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Direction = '' | 'vertical' | 'horizontal';
 export declare function useTouch(): {
     move: EventListener;

package/cjs/utils/validate.js

@@ -23,7 +23,7 @@ function isObject(val) {
 }
 
 function isPromise(obj) {
-  return obj && typeof obj === 'object' && typeof obj.then === 'function';
+  return !!obj && typeof obj === 'object' && typeof obj.then === 'function';
 }
 
 function isDate(val) {

package/cjs/utils/with-stop-propagation.d.ts

@@ -1,3 +1,3 @@
 import React, { ReactElement } from 'react';
 export declare type PropagationEvent = 'click';
-export declare function withStopPropagation(events: PropagationEvent[], element: ReactElement): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare function withStopPropagation(events: PropagationEvent[], element: ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/es/components/calendar/calendar.d.ts

@@ -1,5 +1,13 @@
-import { FC } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
+declare type Page = {
+    month: number;
+    year: number;
+};
+export declare type CalenderRef = {
+    jumpTo: (page: Page | ((page: Page) => Page)) => void;
+    jumpToToday: () => void;
+};
 export declare type CalendarProps = {
     weekStartsOn?: 'Monday' | 'Sunday';
     renderLabel?: (date: Date) => string | null | undefined;
@@ -20,4 +28,5 @@ export declare type CalendarProps = {
     defaultValue?: [Date, Date] | null;
     onChange?: (val: [Date, Date]) => void;
 }) & NativeProps;
-export declare const Calendar: FC<CalendarProps>;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalenderRef>>;
+export {};

package/es/components/calendar/calendar.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { forwardRef, useMemo, useState, useImperativeHandle } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import dayjs from 'dayjs';
 import classNames from 'classnames';
@@ -13,7 +13,7 @@ const classPrefix = 'adm-calendar';
 const defaultProps = {
   weekStartsOn: 'Sunday'
 };
-export const Calendar = p => {
+export const Calendar = forwardRef((p, ref) => {
   const today = dayjs();
   const props = mergeProps(defaultProps, p);
   const {
@@ -32,6 +32,25 @@ export const Calendar = p => {
 
     (_a = props.onPageChange) === null || _a === void 0 ? void 0 : _a.call(props, current.year(), current.month() + 1);
   }, [current]);
+  useImperativeHandle(ref, () => ({
+    jumpTo: pageOrPageGenerator => {
+      let page;
+
+      if (typeof pageOrPageGenerator === 'function') {
+        page = pageOrPageGenerator({
+          year: current.year(),
+          month: current.month() + 1
+        });
+      } else {
+        page = pageOrPageGenerator;
+      }
+
+      setCurrent(dayjs().year(page.year).month(page.month - 1));
+    },
+    jumpToToday: () => {
+      setCurrent(dayjs().date(1));
+    }
+  }));
   const header = React.createElement("div", {
     className: `${classPrefix}-header`
   }, React.createElement("a", {
@@ -117,13 +136,18 @@ export const Calendar = p => {
             (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, d.toDate());
           } else if (props.selectionMode === 'range') {
             if (begin !== null && end === null) {
-              if (d.isBefore(begin)) {
-                setEnd(begin);
-                setBegin(d);
-                (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, [d.toDate(), begin.toDate()]);
+              if (begin.isSame(d.toDate())) {
+                setBegin(null);
+                setEnd(null);
               } else {
-                setEnd(d);
-                (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, [begin.toDate(), d.toDate()]);
+                if (d.isBefore(begin)) {
+                  setEnd(begin);
+                  setBegin(d);
+                  (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, [d.toDate(), begin.toDate()]);
+                } else {
+                  setEnd(d);
+                  (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, [begin.toDate(), d.toDate()]);
+                }
               }
             } else {
               setBegin(d);
@@ -158,4 +182,4 @@ export const Calendar = p => {
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, header, mark, body));
-};
+});

package/es/components/calendar/index.d.ts

@@ -1,4 +1,4 @@
 import './calendar.less';
 import { Calendar } from './calendar';
-export type { CalendarProps } from './calendar';
+export type { CalendarProps, CalenderRef } from './calendar';
 export default Calendar;

package/es/components/capsule-tabs/capsule-tabs.d.ts

@@ -4,6 +4,7 @@ export declare type CapsuleTabProps = {
     title: ReactNode;
     disabled?: boolean;
     forceRender?: boolean;
+    destroyOnClose?: boolean;
 } & NativeProps;
 export declare const CapsuleTab: FC<CapsuleTabProps>;
 export declare type CapsuleTabsProps = {

package/es/components/capsule-tabs/capsule-tabs.js

@@ -6,6 +6,7 @@ import { usePropsValue } from '../../utils/use-props-value';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { useTabListScroll } from '../../utils/use-tab-list-scroll';
 import ScrollMask from '../scroll-mask';
+import { ShouldRender } from '../../utils/should-render';
 const classPrefix = `adm-capsule-tabs`;
 export const CapsuleTab = () => {
   return null;
@@ -83,22 +84,17 @@ export const CapsuleTabs = props => {
       return null;
     }
 
-    if (pane.key === activeKey) {
-      return React.createElement("div", {
-        key: pane.key,
-        className: `${classPrefix}-content`
-      }, pane.props.children);
-    }
-
-    if (pane.props.forceRender) {
-      return React.createElement("div", {
-        key: pane.key,
-        style: {
-          display: 'none'
-        }
-      }, pane.props.children);
-    }
-
-    return null;
+    const active = pane.key === activeKey;
+    return React.createElement(ShouldRender, {
+      key: pane.key,
+      active: active,
+      forceRender: pane.props.forceRender,
+      destroyOnClose: pane.props.destroyOnClose
+    }, React.createElement("div", {
+      className: `${classPrefix}-content`,
+      style: {
+        display: active ? 'block' : 'none'
+      }
+    }, pane.props.children));
   })));
 };

package/es/components/cascade-picker/prompt.d.ts

@@ -1,2 +1,3 @@
 import { CascadePickerProps } from './cascade-picker';
-export declare function prompt(props: Omit<CascadePickerProps, 'value' | 'visible' | 'children'>): Promise<(string | null)[] | null>;
+import type { PickerValue } from '../picker';
+export declare function prompt(props: Omit<CascadePickerProps, 'value' | 'visible' | 'children'>): Promise<PickerValue[] | null>;

package/es/components/collapse/collapse.js

@@ -5,8 +5,9 @@ import { DownOutline } from 'antd-mobile-icons';
 import classNames from 'classnames';
 import { useSpring, animated } from '@react-spring/web';
 import { usePropsValue } from '../../utils/use-props-value';
-import { useMount, useUpdateLayoutEffect } from 'ahooks';
-import { useShouldRender } from '../../utils/use-should-render';
+import { useMount } from 'ahooks';
+import { useShouldRender } from '../../utils/should-render';
+import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
 const classPrefix = `adm-collapse`;
 export const CollapsePanel = () => {
   return null;
@@ -34,7 +35,7 @@ const CollapsePanelContent = props => {
       immediate: true
     });
   });
-  useUpdateLayoutEffect(() => {
+  useIsomorphicUpdateLayoutEffect(() => {
     const inner = innerRef.current;
     if (!inner) return;
 

package/es/components/date-picker/date-picker.js

@@ -5,6 +5,7 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { convertDateToStringArray, convertStringArrayToDate, generateDatePickerColumns, defaultRenderLabel } from './date-picker-utils';
+import { bound } from '../../utils/bound';
 const thisYear = new Date().getFullYear();
 const defaultProps = {
   min: new Date(new Date().setFullYear(thisYear - 10)),
@@ -26,7 +27,15 @@ export const DatePicker = p => {
     }
   });
   const now = useMemo(() => new Date(), []);
-  const pickerValue = useMemo(() => convertDateToStringArray(value !== null && value !== void 0 ? value : now, props.precision), [value, props.precision]);
+  const pickerValue = useMemo(() => {
+    let date = value;
+
+    if (date === null) {
+      date = new Date(bound(now.getTime(), props.min.getTime(), props.max.getTime()));
+    }
+
+    return convertDateToStringArray(date, props.precision);
+  }, [value, props.precision]);
   const onConfirm = useCallback(val => {
     setValue(convertStringArrayToDate(val, props.precision));
   }, [setValue, props.precision]);

package/es/components/dialog/clear.d.ts

@@ -0,0 +1 @@
+export declare function clear(): void;

package/es/components/dialog/clear.js

@@ -0,0 +1,6 @@
+import { closeFnSet } from './show';
+export function clear() {
+  closeFnSet.forEach(close => {
+    close();
+  });
+}

package/es/components/dialog/dialog.css

@@ -15,7 +15,7 @@
   max-width: 500px;
   transform: translate(-50%, -50%);
 }
-.adm-dialog-main {
+.adm-dialog-body {
   width: 100%;
   max-height: 70vh;
   font-size: 14px;
@@ -25,29 +25,33 @@
   display: flex;
   flex-direction: column;
 }
-.adm-dialog-main > * {
+.adm-dialog-body > * {
   flex: none;
 }
-.adm-dialog-main > .adm-dialog-image-container {
+.adm-dialog-body > .adm-dialog-content {
   flex: auto;
 }
-.adm-dialog-main > .adm-dialog-image-container + .adm-dialog-body {
-  padding-top: 12px;
+.adm-dialog-body:not(.adm-dialog-with-image) {
+  padding-top: 20px;
 }
-.adm-dialog-main .adm-dialog-body {
-  padding: 20px 12px;
+.adm-dialog-body .adm-dialog-image-container {
+  margin-bottom: 12px;
+  max-height: 40vh;
 }
-.adm-dialog-main .adm-dialog-body-header-wrapper {
-  display: flex;
-  justify-content: center;
+.adm-dialog-body .adm-dialog-header {
+  margin-bottom: 8px;
+  padding: 0 12px;
 }
-.adm-dialog-main .adm-dialog-body-title {
+.adm-dialog-body .adm-dialog-title {
+  margin-bottom: 8px;
+  padding: 0 12px;
   font-weight: bold;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
 }
-.adm-dialog-main .adm-dialog-body-content {
+.adm-dialog-body .adm-dialog-content {
+  padding: 0 12px 20px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -55,28 +59,32 @@
   line-height: 1.4;
   color: #333;
 }
-.adm-dialog-main .adm-dialog-footer {
+.adm-dialog-body .adm-dialog-content-empty {
+  padding: 0;
+  height: 12px;
+}
+.adm-dialog-body .adm-dialog-footer {
   user-select: none;
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
   border-top: 0.5px solid var(--adm-border-color);
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 10px;
   font-size: 18px;
   line-height: 25px;
   border-radius: 0;
   border-right: solid 0.5px var(--adm-border-color);
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }
 .adm-dialog-image-container {

package/es/components/dialog/dialog.js

@@ -6,13 +6,11 @@ import { useUnmountedRef } from 'ahooks';
 import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
-import Space from '../space';
 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';
-const classPrefix = `adm-dialog`;
 const defaultProps = {
   visible: false,
   actions: [],
@@ -50,51 +48,27 @@ export const Dialog = p => {
     }
   });
   const [active, setActive] = useState(props.visible);
-  const node = withNativeProps(props, React.createElement("div", {
-    className: classPrefix,
-    style: {
-      display: active ? 'unset' : 'none'
-    }
-  }, React.createElement(Mask, {
-    visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: classNames(`${classPrefix}-mask`, props.maskClassName)
-  }), React.createElement("div", {
-    className: `${classPrefix}-wrap`,
-    style: {
-      pointerEvents: props.visible ? 'unset' : 'none'
-    }
-  }, React.createElement(animated.div, {
-    style: Object.assign({}, style),
-    onClick: e => e.stopPropagation(),
-    className: `${classPrefix}-main`
+  const body = React.createElement("div", {
+    className: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    style: props.bodyStyle
   }, !!props.image && React.createElement("div", {
-    className: `${classPrefix}-image-container`
+    className: cls('image-container')
   }, React.createElement(Image, {
     src: props.image,
     alt: 'dialog header image',
     width: '100%'
-  })), React.createElement("div", {
-    style: props.bodyStyle,
-    className: classNames(`${classPrefix}-body`, props.bodyClassName)
-  }, React.createElement(Space, {
-    direction: 'vertical',
-    block: true
-  }, !!props.header && React.createElement("div", {
-    className: `${classPrefix}-body-header-wrapper`
-  }, React.createElement("div", {
-    className: `${classPrefix}-body-header`
-  }, props.header)), !!props.title && React.createElement("div", {
-    className: `${classPrefix}-body-title`
-  }, props.title), !!props.content && React.createElement("div", {
-    className: `${classPrefix}-body-content`
-  }, typeof props.content === 'string' ? React.createElement(AutoCenter, null, props.content) : props.content))), React.createElement("div", {
-    className: `${classPrefix}-footer`
+  })), !!props.header && React.createElement("div", {
+    className: cls('header')
+  }, React.createElement(AutoCenter, null, props.header)), !!props.title && React.createElement("div", {
+    className: cls('title')
+  }, props.title), React.createElement("div", {
+    className: classNames(cls('content'), !props.content && cls('content-empty'))
+  }, typeof props.content === 'string' ? React.createElement(AutoCenter, null, props.content) : props.content), React.createElement("div", {
+    className: cls('footer')
   }, props.actions.map((row, index) => {
     const actions = Array.isArray(row) ? row : [row];
     return React.createElement("div", {
-      className: `${classPrefix}-action-row`,
+      className: cls('action-row'),
       key: index
     }, actions.map((action, index) => React.createElement(DialogActionButton, {
       key: action.key,
@@ -109,6 +83,28 @@ export const Dialog = p => {
         }
       })
     })));
-  }))))));
+  })));
+  const node = withNativeProps(props, React.createElement("div", {
+    className: cls(),
+    style: {
+      display: active ? 'unset' : 'none'
+    }
+  }, React.createElement(Mask, {
+    visible: props.visible,
+    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
+    style: props.maskStyle,
+    className: classNames(cls('mask'), props.maskClassName)
+  }), React.createElement("div", {
+    className: cls('wrap'),
+    style: {
+      pointerEvents: props.visible ? 'unset' : 'none'
+    }
+  }, React.createElement(animated.div, {
+    style: style
+  }, body))));
   return renderToContainer(props.getContainer, withStopPropagation(props.stopPropagation, node));
-};
+};
+
+function cls(name = '') {
+  return 'adm-dialog' + (name && '-') + name;
+}