antd-mobile 5.0.0-rc.9 → 5.2.0

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

@@ -21,22 +21,33 @@
 
 .adm-modal-main {
   width: 100%;
+  max-height: 70vh;
+  box-sizing: border-box;
   font-size: 28px;
   background-color: white;
   border-radius: 16px;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.adm-modal-main > * {
+  flex: none;
+}
+
+.adm-modal-main > .adm-modal-image-container {
+  flex: auto;
 }
 
 .adm-modal-main .adm-modal-body {
   padding: 40px 24px 24px;
+  display: flex;
+  flex-direction: column;
 }
 
-.adm-modal-main .adm-modal-body .adm-modal-close {
-  position: absolute;
-  right: 24px;
-  top: 24px;
-  color: var(--adm-color-weak);
-  padding: 4px;
+.adm-modal-main .adm-modal-body > * + * {
+  margin-top: 16px;
 }
 
 .adm-modal-main .adm-modal-body-header-wrapper {
@@ -52,38 +63,47 @@
 }
 
 .adm-modal-main .adm-modal-body-content {
-  max-height: 70vh;
-  overflow-x: hidden;
-  overflow-y: auto;
   font-size: 30px;
   line-height: 1.4;
   color: #333;
 }
 
-.adm-modal-main .adm-modal-footer {
+.adm-modal-main .adm-modal-close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  color: var(--adm-color-weak);
+  padding: 8px;
+  font-size: 36px;
+}
+
+.adm-modal-footer {
   user-select: none;
   padding: 16px 24px 24px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button {
-  font-size: 36px;
-  line-height: 50px;
-  border-right: solid 1px var(--adm-border-color);
+.adm-modal-footer.adm-space {
+  --gap-vertical: 40px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:last-child {
-  border-right: none;
+.adm-modal-footer .adm-modal-button {
+  font-size: 36px;
+  line-height: 50px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {
   display: none;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
   opacity: 0.7;
+}
+
+.adm-modal-image-container {
+  overflow-y: auto;
 }

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

@@ -1,35 +1,4 @@
-var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
+import { __awaiter } from "tslib";
 import React, { useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
@@ -38,24 +7,26 @@ import Mask from '../mask';
 import { ModalActionButton } from './modal-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';
 import { CloseOutline } from 'antd-mobile-icons';
-var classPrefix = "adm-modal";
-var defaultProps = {
+const classPrefix = `adm-modal`;
+const defaultProps = {
   visible: false,
   actions: [],
   closeOnAction: false,
   closeOnMaskClick: false,
   stopPropagation: ['click'],
-  showCloseButton: false
+  showCloseButton: false,
+  getContainer: null
 };
-export var Modal = function Modal(p) {
-  var props = mergeProps(defaultProps, p);
-  var unmountedRef = useUnmountedRef();
-  var style = useSpring({
+export const Modal = p => {
+  const props = mergeProps(defaultProps, p);
+  const unmountedRef = useUnmountedRef();
+  const style = useSpring({
     scale: props.visible ? 1 : 0.8,
     opacity: props.visible ? 1 : 0,
     config: {
@@ -64,10 +35,10 @@ export var Modal = function Modal(p) {
       friction: 30,
       clamp: true
     },
-    onStart: function onStart() {
+    onStart: () => {
       setActive(true);
     },
-    onRest: function onRest() {
+    onRest: () => {
       var _a, _b;
 
       if (unmountedRef.current) return;
@@ -80,87 +51,64 @@ export var Modal = function Modal(p) {
       }
     }
   });
-
-  var _useState = useState(props.visible),
-      active = _useState[0],
-      setActive = _useState[1];
-
-  return withStopPropagation(props.stopPropagation, withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  const [active, setActive] = useState(props.visible);
+  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
     className: classPrefix,
     style: {
       display: active ? 'unset' : 'none'
     }
-  }, /*#__PURE__*/React.createElement(Mask, {
+  }, React.createElement(Mask, {
     visible: props.visible,
-    getContainer: props.getContainer,
     onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
     style: props.maskStyle,
-    className: classNames(classPrefix + "-mask", props.maskClassName)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-wrap",
+    className: classNames(`${classPrefix}-mask`, props.maskClassName)
+  }), React.createElement("div", {
+    className: `${classPrefix}-wrap`,
     style: {
       pointerEvents: props.visible ? 'unset' : 'none'
     }
-  }, /*#__PURE__*/React.createElement(animated.div, {
+  }, React.createElement(animated.div, {
     style: Object.assign({}, style),
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    className: classPrefix + "-main"
-  }, !!props.image && /*#__PURE__*/React.createElement(Image, {
+    onClick: e => e.stopPropagation(),
+    className: `${classPrefix}-main`
+  }, props.showCloseButton && React.createElement("a", {
+    className: classNames(`${classPrefix}-close`, 'adm-plain-anchor'),
+    onClick: props.onClose
+  }, React.createElement(CloseOutline, null)), !!props.image && React.createElement("div", {
+    className: `${classPrefix}-image-container`
+  }, React.createElement(Image, {
     src: props.image,
     alt: 'modal header image',
     width: '100%'
-  }), /*#__PURE__*/React.createElement("div", {
+  })), React.createElement("div", {
     style: props.bodyStyle,
-    className: classNames(classPrefix + "-body", props.bodyClassName)
-  }, props.showCloseButton && /*#__PURE__*/React.createElement("a", {
-    className: classNames(classPrefix + "-close", 'adm-plain-anchor'),
-    onClick: props.onClose
-  }, /*#__PURE__*/React.createElement(CloseOutline, null)), /*#__PURE__*/React.createElement(Space, {
-    direction: 'vertical',
-    block: true
-  }, !!props.header && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-body-header-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-body-header"
-  }, props.header)), !!props.title && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-body-title"
-  }, props.title), !!props.content && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-body-content"
-  }, typeof props.content === 'string' ? /*#__PURE__*/React.createElement(AutoCenter, null, props.content) : props.content))), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-footer"
-  }, /*#__PURE__*/React.createElement(Space, {
+    className: classNames(`${classPrefix}-body`, props.bodyClassName)
+  }, !!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(Space, {
     direction: 'vertical',
-    block: true
-  }, props.actions.map(function (action, index) {
-    return /*#__PURE__*/React.createElement(ModalActionButton, {
+    block: true,
+    className: `${classPrefix}-footer`
+  }, props.actions.map((action, index) => {
+    return React.createElement(ModalActionButton, {
       key: action.key,
       action: action,
-      onAction: function onAction() {
-        return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-          var _a, _b, _c;
+      onAction: () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
 
-          return regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  _context.next = 2;
-                  return Promise.all([(_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action), (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, index)]);
+        yield Promise.all([(_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action), (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, index)]);
 
-                case 2:
-                  if (props.closeOnAction) {
-                    (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
-                  }
-
-                case 3:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
-      }
+        if (props.closeOnAction) {
+          (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
+        }
+      })
     });
-  }))))))));
+  })))))));
+  return renderToContainer(props.getContainer, node);
 };

package/2x/es/components/modal/show.d.ts

@@ -3,6 +3,7 @@ export declare type ModalShowProps = Omit<ModalProps, 'visible'>;
 export declare type ModalShowRef = {
     close: () => void;
 };
+export declare const closeFnSet: Set<() => void>;
 export declare function show(props: ModalShowProps): {
     close: () => void;
 };

package/2x/es/components/modal/show.js

@@ -1,13 +1,11 @@
 import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { renderToBody } from '../../utils/render-to-body';
 import { Modal } from './modal';
+export const closeFnSet = new Set();
 export function show(props) {
-  var Wrapper = /*#__PURE__*/forwardRef(function (_, ref) {
-    var _useState = useState(false),
-        visible = _useState[0],
-        setVisible = _useState[1];
-
-    useEffect(function () {
+  const Wrapper = forwardRef((_, ref) => {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
       setVisible(true);
     }, []);
 
@@ -18,31 +16,37 @@ export function show(props) {
       setVisible(false);
     }
 
-    useImperativeHandle(ref, function () {
-      return {
-        close: handleClose
-      };
-    });
-    return /*#__PURE__*/React.createElement(Modal, Object.assign({}, props, {
+    useImperativeHandle(ref, () => ({
+      close: handleClose
+    }));
+
+    function handleAfterClose() {
+      var _a;
+
+      (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      unmount();
+      closeFnSet.delete(close);
+    }
+
+    return React.createElement(Modal, Object.assign({}, props, {
       visible: visible,
       onClose: handleClose,
-      afterClose: function afterClose() {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
+      afterClose: handleAfterClose
     }));
   });
-  var ref = /*#__PURE__*/createRef();
-  var unmount = renderToBody( /*#__PURE__*/React.createElement(Wrapper, {
+  const ref = createRef();
+  const unmount = renderToBody(React.createElement(Wrapper, {
     ref: ref
   }));
-  return {
-    close: function close() {
-      var _a;
 
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
+  const close = () => {
+    var _a;
+
+    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+  };
+
+  closeFnSet.add(close);
+  return {
+    close
   };
 }

package/2x/es/components/nav-bar/nav-bar.css

@@ -24,14 +24,14 @@
 .adm-nav-bar-back {
   display: flex;
   align-items: center;
-  margin-right: 24px;
+  margin-right: 32px;
   padding: 12px 0;
   cursor: pointer;
 }
 
 .adm-nav-bar-back-arrow {
-  font-size: 36px;
-  margin-right: 12px;
+  font-size: 48px;
+  margin-right: 8px;
 }
 
 .adm-nav-bar-left {

package/2x/es/components/nav-bar/nav-bar.js

@@ -3,30 +3,32 @@ import classNames from 'classnames';
 import { LeftOutline } from 'antd-mobile-icons';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-nav-bar";
-var defaultProps = {
+const classPrefix = `adm-nav-bar`;
+const defaultProps = {
   back: '',
   backArrow: true
 };
-export var NavBar = function NavBar(p) {
-  var props = mergeProps(defaultProps, p);
-  var back = props.back,
-      backArrow = props.backArrow;
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+export const NavBar = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    back,
+    backArrow
+  } = props;
+  return withNativeProps(props, React.createElement("div", {
     className: classNames(classPrefix)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-left",
+  }, React.createElement("div", {
+    className: `${classPrefix}-left`,
     role: 'button'
-  }, back !== null && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-back",
+  }, back !== null && React.createElement("div", {
+    className: `${classPrefix}-back`,
     onClick: props.onBack
-  }, backArrow && /*#__PURE__*/React.createElement("span", {
-    className: classPrefix + "-back-arrow"
-  }, backArrow === true ? /*#__PURE__*/React.createElement(LeftOutline, null) : backArrow), /*#__PURE__*/React.createElement("span", {
+  }, backArrow && React.createElement("span", {
+    className: `${classPrefix}-back-arrow`
+  }, backArrow === true ? React.createElement(LeftOutline, null) : backArrow), React.createElement("span", {
     "aria-hidden": 'true'
-  }, back)), props.left), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-title"
-  }, props.children), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-right"
+  }, back)), props.left), React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, props.children), React.createElement("div", {
+    className: `${classPrefix}-right`
   }, props.right)));
 };

package/2x/es/components/notice-bar/notice-bar.css

@@ -1,15 +1,18 @@
 .adm-notice-bar {
-  height: 60px;
+  --background-color: #ababab;
+  --border-color: #999999;
+  --text-color: #ffffff;
+  --font-size: 30px;
+  --icon-font-size: 36px;
+  --height: 76px;
+  height: var(--height);
   box-sizing: border-box;
-  font-size: 28px;
-  line-height: 60px;
+  font-size: var(--font-size);
+  line-height: var(--height);
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  --background-color: #b2b2b2;
-  --border-color: #a0a0a0;
-  --text-color: #ffffff;
   border: solid 2px var(--border-color);
   border-left: none;
   border-right: none;
@@ -39,9 +42,11 @@
   --text-color: #1677ff;
 }
 
-.adm-notice-bar .adm-notice-bar-left:not(:empty) {
+.adm-notice-bar .adm-notice-bar-left {
   flex-shrink: 0;
   margin-right: 16px;
+  font-size: var(--icon-font-size);
+  line-height: var(--height);
 }
 
 .adm-notice-bar .adm-notice-bar-content {
@@ -57,11 +62,14 @@
   width: auto;
   transition-timing-function: linear;
   position: absolute;
-  padding: 0 8px;
   white-space: nowrap;
 }
 
 .adm-notice-bar .adm-notice-bar-right {
   flex-shrink: 0;
   margin-left: 24px;
+}
+
+.adm-notice-bar-close-icon {
+  font-size: 36px;
 }

package/2x/es/components/notice-bar/notice-bar.d.ts

@@ -17,5 +17,5 @@ export declare type NoticeBarProps = {
     extra?: React.ReactNode;
     /** 左侧广播图标 */
     icon?: React.ReactNode;
-} & NativeProps<'--background-color' | '--border-color' | '--text-color'>;
+} & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;
 export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;

package/2x/es/components/notice-bar/notice-bar.js

@@ -6,29 +6,26 @@ import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { useMutationEffect } from '../../utils/use-mutation-effect';
-var classPrefix = "adm-notice-bar";
-var defaultProps = {
+const classPrefix = `adm-notice-bar`;
+const defaultProps = {
   color: 'default',
   delay: 2000,
-  speed: 50
+  speed: 50,
+  icon: React.createElement(SoundOutline, null)
 };
-export var NoticeBar = /*#__PURE__*/memo(function (p) {
-  var props = mergeProps(defaultProps, p);
-  var containerRef = useRef(null);
-  var textRef = useRef(null);
-
-  var _useState = useState(true),
-      visible = _useState[0],
-      setVisible = _useState[1];
-
-  var speed = props.speed;
-  var delayLockRef = useRef(true);
-  var animatingRef = useRef(false);
+export const NoticeBar = memo(p => {
+  const props = mergeProps(defaultProps, p);
+  const containerRef = useRef(null);
+  const textRef = useRef(null);
+  const [visible, setVisible] = useState(true);
+  const speed = props.speed;
+  const delayLockRef = useRef(true);
+  const animatingRef = useRef(false);
 
   function start() {
     if (delayLockRef.current) return;
-    var container = containerRef.current;
-    var text = textRef.current;
+    const container = containerRef.current;
+    const text = textRef.current;
     if (!container || !text) return;
 
     if (container.offsetWidth >= text.offsetWidth) {
@@ -39,29 +36,29 @@ export var NoticeBar = /*#__PURE__*/memo(function (p) {
     }
 
     if (animatingRef.current) return;
-    var initial = !text.style.transform;
+    const initial = !text.style.transform;
     text.style.transitionDuration = '0s';
 
     if (initial) {
       text.style.transform = 'translateX(0)';
     } else {
-      text.style.transform = "translateX(" + container.offsetWidth + "px)";
+      text.style.transform = `translateX(${container.offsetWidth}px)`;
     }
 
-    var distance = initial ? text.offsetWidth : container.offsetWidth + text.offsetWidth;
+    const distance = initial ? text.offsetWidth : container.offsetWidth + text.offsetWidth;
     animatingRef.current = true;
-    text.style.transitionDuration = Math.round(distance / speed) + "s";
-    text.style.transform = "translateX(-" + text.offsetWidth + "px)";
+    text.style.transitionDuration = `${Math.round(distance / speed)}s`;
+    text.style.transform = `translateX(-${text.offsetWidth}px)`;
   }
 
-  useTimeout(function () {
+  useTimeout(() => {
     delayLockRef.current = false;
     start();
   }, props.delay);
-  useResizeEffect(function (text) {
+  useResizeEffect(text => {
     start();
   }, containerRef);
-  useMutationEffect(function () {
+  useMutationEffect(() => {
     start();
   }, textRef, {
     subtree: true,
@@ -69,24 +66,25 @@ export var NoticeBar = /*#__PURE__*/memo(function (p) {
     characterData: true
   });
   if (!visible) return null;
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, classPrefix + "-" + props.color)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classPrefix + "-left"
-  }, 'icon' in props ? props.icon : /*#__PURE__*/React.createElement(SoundOutline, null)), /*#__PURE__*/React.createElement("span", {
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-${props.color}`)
+  }, props.icon && React.createElement("span", {
+    className: `${classPrefix}-left`
+  }, props.icon), React.createElement("span", {
     ref: containerRef,
-    className: classPrefix + "-content"
-  }, /*#__PURE__*/React.createElement("span", {
-    onTransitionEnd: function onTransitionEnd() {
+    className: `${classPrefix}-content`
+  }, React.createElement("span", {
+    onTransitionEnd: () => {
       animatingRef.current = false;
       start();
     },
     ref: textRef,
-    className: classPrefix + "-content-inner"
-  }, props.content)), (props.closeable || props.extra) && /*#__PURE__*/React.createElement("span", {
-    className: classPrefix + "-right"
-  }, props.extra, props.closeable && /*#__PURE__*/React.createElement(CloseOutline, {
-    onClick: function onClick() {
+    className: `${classPrefix}-content-inner`
+  }, props.content)), (props.closeable || props.extra) && React.createElement("span", {
+    className: `${classPrefix}-right`
+  }, props.extra, props.closeable && React.createElement(CloseOutline, {
+    className: `${classPrefix}-close-icon`,
+    onClick: () => {
       var _a;
 
       setVisible(false);