antd-mobile 5.12.7 → 5.14.0

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

@@ -1,31 +1,16 @@
 .adm-modal {
   --z-index: var(--adm-modal-z-index, 1000);
-  position: fixed;
-  z-index: var(--z-index);
+  ---z-index: var(--z-index);
 }
 
-.adm-modal .adm-modal-mask {
-  z-index: 0;
-}
-
-.adm-modal-wrap {
-  position: fixed;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  width: auto;
-  min-width: 560px;
-  max-width: 75vw;
-  transform: translate(-50%, -50%);
+.adm-modal .adm-center-popup {
+  --z-index: var(---z-index);
 }
 
 .adm-modal-body {
   width: 100%;
   max-height: 70vh;
-  box-sizing: border-box;
-  font-size: 28px;
-  background-color: white;
-  border-radius: 16px;
+  font-size: var(--adm-font-size-6);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -43,43 +28,43 @@
   padding-top: 40px;
 }
 
-.adm-modal-body .adm-modal-image-container {
+.adm-modal-image-container {
   margin-bottom: 24px;
   max-height: 40vh;
   overflow-y: scroll;
 }
 
-.adm-modal-body .adm-modal-header {
+.adm-modal-header {
   margin-bottom: 16px;
   padding: 0 24px;
 }
 
-.adm-modal-body .adm-modal-title {
+.adm-modal-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-modal-body .adm-modal-content {
+.adm-modal-content {
   padding: 0 24px 24px;
   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-modal-body .adm-modal-close {
+.adm-modal-close {
   position: absolute;
   right: 16px;
   top: 16px;
   color: var(--adm-color-weak);
   padding: 8px;
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
 }
 
 .adm-modal-footer {
@@ -97,7 +82,7 @@
 }
 
 .adm-modal-footer .adm-modal-button {
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
   line-height: 50px;
 }
 

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

@@ -1,29 +1,17 @@
-import React, { FC, ReactNode } from 'react';
-import type { MaskProps } from '../mask';
+import { FC, ReactNode } from 'react';
 import { Action } from './modal-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 ModalProps = {
-    afterClose?: () => void;
-    afterShow?: () => void;
+import { CenterPopupProps } from '../center-popup';
+export declare type ModalProps = Pick<CenterPopupProps, 'afterClose' | 'afterShow' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose' | 'disableBodyScroll' | 'forceRender' | 'getContainer' | 'maskClassName' | 'maskStyle' | 'stopPropagation' | 'visible'> & {
     image?: string;
     header?: ReactNode;
     title?: ReactNode;
     content?: ReactNode;
     actions?: 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[];
     showCloseButton?: boolean;
-    disableBodyScroll?: boolean;
 } & NativeProps;
 export declare const Modal: FC<ModalProps>;

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

@@ -1,61 +1,21 @@
 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 { 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';
+import CenterPopup from '../center-popup';
 const defaultProps = {
-  visible: false,
   actions: [],
   closeOnAction: false,
-  closeOnMaskClick: false,
-  stopPropagation: ['click'],
-  showCloseButton: false,
-  getContainer: null,
-  disableBodyScroll: true
+  closeOnMaskClick: false
 };
 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: {
-      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.showCloseButton && React.createElement("a", {
+  const element = React.createElement(React.Fragment, null, props.showCloseButton && React.createElement("a", {
     className: classNames(cls('close'), 'adm-plain-anchor'),
     onClick: props.onClose
   }, React.createElement(CloseOutline, null)), !!props.image && React.createElement("div", {
@@ -89,26 +49,25 @@ export const Modal = p => {
       })
     });
   })));
-  const node = withStopPropagation(props.stopPropagation, 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, 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/modal/modal.patch.css

@@ -0,0 +1,29 @@
+.adm-modal-body {
+  font-size: 28px;
+}
+
+.adm-modal-title {
+  font-size: 36px;
+}
+
+.adm-modal-content {
+  font-size: 30px;
+  color: #333333;
+}
+
+.adm-modal-close {
+  color: #999999;
+  font-size: 36px;
+}
+
+.adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item {
+  margin-bottom: 40px;
+}
+
+.adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item:last-child {
+  margin-bottom: 0;
+}
+
+.adm-modal-footer .adm-modal-button {
+  font-size: 36px;
+}

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

@@ -35,7 +35,7 @@
 }
 
 .adm-nav-bar-left {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -44,7 +44,7 @@
 .adm-nav-bar-title {
   justify-content: center;
   white-space: nowrap;
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
   padding: 0 24px;
 }
 

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

@@ -1,9 +1,9 @@
 .adm-notice-bar {
   --background-color: #ababab;
   --border-color: #999999;
-  --text-color: #ffffff;
-  --font-size: 30px;
-  --icon-font-size: 36px;
+  --text-color: var(--adm-color-white);
+  --font-size: var(--adm-font-size-7);
+  --icon-font-size: var(--adm-font-size-10);
   --height: 76px;
   height: var(--height);
   box-sizing: border-box;
@@ -71,5 +71,5 @@
 }
 
 .adm-notice-bar-close-icon {
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
 }

package/2x/es/components/number-keyboard/number-keyboard.css

@@ -15,7 +15,7 @@
 }
 
 .adm-number-keyboard-popup.adm-popup .adm-popup-body {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 
 .adm-number-keyboard-wrapper {
@@ -25,7 +25,7 @@
 .adm-number-keyboard-header {
   height: 68px;
   line-height: 68px;
-  border-top: solid 2px #f5f5f5;
+  border-top: solid 2px var(--adm-color-border);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -70,7 +70,7 @@
   height: 96px;
   font-size: 44px;
   box-sizing: border-box;
-  border: solid 2px #f5f5f5;
+  border: solid 2px var(--adm-color-border);
   border-bottom: none;
   border-left: none;
 }
@@ -105,7 +105,7 @@
 }
 
 .adm-number-keyboard-key.extra-key {
-  border-left: solid 2px #f5f5f5;
+  border-left: solid 2px var(--adm-color-border);
   border-right: none;
 }
 

package/2x/es/components/page-indicator/page-indicator.patch.css

@@ -0,0 +1,31 @@
+.adm-page-indicator-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 2px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.adm-page-indicator-dot-active {
+  border-radius: 2px;
+  background: #1677ff;
+}
+
+.adm-page-indicator-color-white .adm-page-indicator-dot-active.adm-page-indicator-dot-active {
+  background: #ffffff;
+}
+
+.adm-page-indicator-horizontal .adm-page-indicator-dot {
+  margin-right: 6px;
+}
+
+.adm-page-indicator-horizontal .adm-page-indicator-dot-active {
+  width: 26px;
+}
+
+.adm-page-indicator-vertical .adm-page-indicator-dot {
+  margin-bottom: 6px;
+}
+
+.adm-page-indicator-vertical .adm-page-indicator-dot-active {
+  height: 26px;
+}

package/2x/es/components/passcode-input/passcode-input.css

@@ -19,7 +19,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
   width: var(--cell-size);
   height: var(--cell-size);
   background: var(--adm-color-white);

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

@@ -1,7 +1,7 @@
 .adm-picker {
-  --header-button-font-size: 30px;
-  --title-font-size: 30px;
-  --item-font-size: 32px;
+  --header-button-font-size: var(--adm-font-size-7);
+  --title-font-size: var(--adm-font-size-7);
+  --item-font-size: var(--adm-font-size-8);
   --item-height: 68px;
   width: 100%;
   height: 600px;
@@ -19,8 +19,8 @@
 }
 
 .adm-picker-header {
-  flex: none;
-  border-bottom: solid 2px var(--adm-border-color);
+  flex-shrink: 0;
+  border-bottom: solid 2px var(--adm-color-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -42,8 +42,7 @@
 }
 
 .adm-picker-body {
-  flex: auto;
-  height: 100%;
+  flex: 1;
   width: 100%;
 }
 

package/2x/es/components/picker-view/picker-view.css

@@ -1,7 +1,7 @@
 .adm-picker-view {
   --height: 480px;
   --item-height: 68px;
-  --item-font-size: 32px;
+  --item-font-size: var(--adm-font-size-8);
   height: var(--height);
   width: 100%;
   display: flex;
@@ -108,8 +108,8 @@
   height: var(--item-height);
   box-sizing: border-box;
   flex: none;
-  border-top: solid 2px var(--adm-border-color);
-  border-bottom: solid 2px var(--adm-border-color);
+  border-top: solid 2px var(--adm-color-border);
+  border-bottom: solid 2px var(--adm-color-border);
 }
 
 .adm-picker-view-mask-top {

package/2x/es/components/popover/popover-menu.css

@@ -1,5 +1,5 @@
 .adm-popover-menu {
-  --border-color: var(--adm-border-color);
+  --border-color: #eeeeee;
 }
 
 .adm-popover-menu.adm-popover {

package/2x/es/components/popover/popover-menu.patch.css

@@ -0,0 +1,31 @@
+.adm-popover-menu.adm-popover .adm-popover-inner-content {
+  padding: 0 !important;
+}
+
+.adm-popover-menu-item-text {
+  border-top: solid 2px #eeeeee;
+}
+
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+  background-color: #eeeeee;
+}
+
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+  border-bottom: solid 2px #eeeeee;
+}
+
+.adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item-text {
+  border-color: #333333;
+}
+
+.adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+  background-color: #333333;
+}
+
+.adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+  border-color: #333333;
+}
+
+.adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-inner.adm-popover-inner.adm-popover-inner {
+  background-color: rgba(0, 0, 0, 0.9);
+}

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

@@ -3,6 +3,7 @@
   --background: #ffffff;
   --arrow-size: 16px;
   --content-padding: 16px 24px;
+  color: #333333;
   position: absolute;
   top: 0;
   left: 0;
@@ -17,7 +18,7 @@
 .adm-popover.adm-popover-dark {
   --background: rgba(0, 0, 0, 0.75);
   --adm-color-text: #ffffff;
-  color: white;
+  color: #ffffff;
 }
 
 .adm-popover.adm-popover-dark .adm-popover-inner {
@@ -39,7 +40,7 @@
   background-clip: padding-box;
   border-radius: 16px;
   box-shadow: 0 0 60px 0 rgba(51, 51, 51, 0.2);
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   width: max-content;
   min-width: 64px;
   max-width: calc(100vw - 48px);

package/2x/es/components/popover/popover.patch.css

@@ -0,0 +1,24 @@
+.adm-popover {
+  z-index: 1030;
+}
+
+.adm-popover.adm-popover-dark {
+  color: #ffffff;
+}
+
+.adm-popover.adm-popover-dark .adm-popover-inner {
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+.adm-popover-inner {
+  background-color: #ffffff;
+  font-size: 30px;
+}
+
+.adm-popover-inner-content {
+  padding: 16px 24px;
+}
+
+.adm-popover-arrow {
+  display: none !important;
+}

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

@@ -6,7 +6,7 @@
 
 .adm-popup-body {
   position: fixed;
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   z-index: calc(var(--z-index) + 10);
 }
 

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

@@ -1,24 +1,23 @@
-import React, { FC } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { MaskProps } from '../mask';
 import { GetContainer } from '../../utils/render-to-container';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
-export declare type PopupProps = {
-    visible?: boolean;
-    mask?: boolean;
-    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    destroyOnClose?: boolean;
-    forceRender?: boolean;
-    getContainer?: GetContainer;
-    afterShow?: () => void;
+export declare type PopupProps = PropsWithChildren<{
     afterClose?: () => void;
-    position?: 'bottom' | 'top' | 'left' | 'right';
+    afterShow?: () => void;
     bodyClassName?: string;
     bodyStyle?: React.CSSProperties;
+    destroyOnClose?: boolean;
+    forceRender?: boolean;
+    getContainer?: GetContainer;
+    mask?: boolean;
     maskClassName?: string;
     maskStyle?: MaskProps['style'];
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    position?: 'bottom' | 'top' | 'left' | 'right';
     stopPropagation?: PropagationEvent[];
-    children?: React.ReactNode;
-} & NativeProps<'--z-index'>;
+    visible?: boolean;
+}> & NativeProps<'--z-index'>;
 export declare const Popup: FC<PopupProps>;

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

@@ -1,6 +1,6 @@
 .adm-radio {
   --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-radio.adm-radio-disabled .adm-radio-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 
 .adm-radio .adm-radio-custom-icon {

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

@@ -17,7 +17,7 @@
 
 .adm-result-title {
   color: var(--adm-color-text);
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
   line-height: 1.4;
   text-align: center;
 }
@@ -25,7 +25,7 @@
 .adm-result-description {
   margin-top: 16px;
   color: var(--adm-color-weak);
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
   line-height: 1.4;
   text-align: center;
 }

package/2x/es/components/scroll-mask/scroll-mask.css

@@ -10,10 +10,10 @@
 
 .adm-scroll-mask-left {
   left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, var(--adm-color-background), rgba(255, 255, 255, 0));
 }
 
 .adm-scroll-mask-right {
   right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to left, var(--adm-color-background), rgba(255, 255, 255, 0));
 }

package/2x/es/components/scroll-mask/scroll-mask.patch.css

@@ -0,0 +1,7 @@
+.adm-scroll-mask-left {
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+
+.adm-scroll-mask-right {
+  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+}

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

@@ -1,7 +1,7 @@
 .adm-search-bar {
   --height: 64px;
   --padding-left: 16px;
-  --background: #f5f5f5;
+  --background: var(--adm-color-box);
   --border-radius: 12px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
@@ -25,7 +25,7 @@
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
   color: var(--adm-color-light);
-  font-size: 32px;
+  font-size: var(--adm-font-size-8);
 }
 
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
@@ -37,7 +37,7 @@
 
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
-  --font-size: 30px;
+  --font-size: var(--adm-font-size-7);
 }
 
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
@@ -63,5 +63,5 @@
 
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }