antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/es/components/jumbo-tabs/jumbo-tabs.css

@@ -5,7 +5,7 @@
 }
 .adm-jumbo-tabs-header {
   position: relative;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-jumbo-tabs-tab-list {
   display: flex;
@@ -30,11 +30,12 @@
   flex-direction: column;
   align-items: center;
   position: relative;
+  width: -webkit-min-content;
   width: min-content;
   margin: 0 auto;
   padding: 12px 0;
   cursor: pointer;
-  font-size: 17px;
+  font-size: var(--adm-font-size-9);
   white-space: nowrap;
 }
 .adm-jumbo-tabs-tab-title {
@@ -42,18 +43,19 @@
   padding: 0 4px;
 }
 .adm-jumbo-tabs-tab-description {
+  width: -webkit-min-content;
   width: min-content;
   padding: 0 8px;
   border-radius: 10px;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-main);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-jumbo-tabs-tab-active {
   color: var(--adm-color-primary);
 }
 .adm-jumbo-tabs-tab-active .adm-jumbo-tabs-tab-description {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
 }
 .adm-jumbo-tabs-tab-disabled {
@@ -63,20 +65,3 @@
 .adm-jumbo-tabs-content {
   padding: 12px;
 }
-.adm-jumbo-tabs-header-mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 30px;
-  height: 100%;
-  pointer-events: none;
-}
-.adm-jumbo-tabs-header-mask-left {
-  left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-}
-.adm-jumbo-tabs-header-mask-right {
-  right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
-}

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

@@ -1,8 +1,16 @@
 /// <reference types="react" />
 import './list.less';
-export type { ListProps } from './list';
+export type { ListProps, ListRef } from './list';
 export type { ListItemProps } from './list-item';
-declare const _default: import("react").FC<import("./list").ListProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<{
+    header?: import("react").ReactNode;
+    mode?: "default" | "card" | undefined;
+    children?: import("react").ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--active-background-color" | "--align-items" | "--border-bottom" | "--border-inner" | "--border-top" | "--extra-max-width" | "--font-size" | "--header-font-size" | "--padding-left" | "--padding-right" | "--prefix-padding-right" | "--prefix-width", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./list").ListRef>> & {
     Item: import("react").FC<import("./list-item").ListItemProps>;
 };
 export default _default;

package/es/components/list/list.css

@@ -1,15 +1,16 @@
 .adm-list {
-  --header-font-size: 15px;
+  --header-font-size: var(--adm-font-size-7);
   --prefix-width: 'auto';
   --prefix-padding-right: 12px;
   --align-items: center;
-  --active-background-color: var(--adm-border-color);
-  --border-inner: solid 1px var(--adm-border-color);
-  --border-top: solid 1px var(--adm-border-color);
-  --border-bottom: solid 1px var(--adm-border-color);
+  --active-background-color: var(--adm-color-border);
+  --border-inner: solid 1px var(--adm-color-border);
+  --border-top: solid 1px var(--adm-color-border);
+  --border-bottom: solid 1px var(--adm-color-border);
   --padding-left: 12px;
   --padding-right: 12px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
+  --extra-max-width: 70%;
 }
 .adm-list-header {
   color: var(--adm-color-weak);
@@ -17,7 +18,7 @@
   padding: 8px var(--padding-right) 8px var(--padding-left);
 }
 .adm-list-body {
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   overflow: hidden;
   font-size: var(--font-size);
 }
@@ -41,13 +42,13 @@
   display: block;
   padding-left: var(--padding-left);
   position: relative;
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   line-height: 1.5;
 }
 .adm-list-item-title,
 .adm-list-item-description {
   color: var(--adm-color-weak);
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
 }
 .adm-list-item-content {
   display: flex;
@@ -68,8 +69,9 @@
 .adm-list-item-content-extra {
   flex: none;
   padding-left: 12px;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   color: var(--adm-color-weak);
+  max-width: var(--extra-max-width);
 }
 .adm-list-item-content-arrow {
   flex: none;

package/es/components/list/list.d.ts

@@ -1,8 +1,19 @@
-import { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ListProps = {
     header?: ReactNode;
     mode?: 'default' | 'card';
     children?: ReactNode;
-} & NativeProps<'--header-font-size' | '--prefix-width' | '--prefix-padding-right' | '--align-items' | '--active-background-color' | '--border-inner' | '--border-top' | '--border-bottom' | '--padding-left' | '--padding-right' | '--font-size'>;
-export declare const List: FC<ListProps>;
+} & NativeProps<'--active-background-color' | '--align-items' | '--border-bottom' | '--border-inner' | '--border-top' | '--extra-max-width' | '--font-size' | '--header-font-size' | '--padding-left' | '--padding-right' | '--prefix-padding-right' | '--prefix-width'>;
+export declare type ListRef = {
+    nativeElement: HTMLDivElement | null;
+};
+export declare const List: React.ForwardRefExoticComponent<{
+    header?: ReactNode;
+    mode?: "default" | "card" | undefined;
+    children?: ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--active-background-color" | "--align-items" | "--border-bottom" | "--border-inner" | "--border-top" | "--extra-max-width" | "--font-size" | "--header-font-size" | "--padding-left" | "--padding-right" | "--prefix-padding-right" | "--prefix-width", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ListRef>>;

package/es/components/list/list.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
@@ -6,10 +6,18 @@ const classPrefix = `adm-list`;
 const defaultProps = {
   mode: 'default'
 };
-export const List = p => {
+export const List = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
+  const nativeElementRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    get nativeElement() {
+      return nativeElementRef.current;
+    }
+
+  }));
   return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, `${classPrefix}-${props.mode}`)
+    className: classNames(classPrefix, `${classPrefix}-${props.mode}`),
+    ref: nativeElementRef
   }, props.header && React.createElement("div", {
     className: `${classPrefix}-header`
   }, props.header), React.createElement("div", {
@@ -17,4 +25,4 @@ export const List = p => {
   }, React.createElement("div", {
     className: `${classPrefix}-body-inner`
   }, props.children))));
-};
+});

package/es/components/mask/mask.js

@@ -6,7 +6,7 @@ import { useSpring, animated } from '@react-spring/web';
 import { renderToContainer } from '../../utils/render-to-container';
 import { mergeProps } from '../../utils/with-default-props';
 import { useConfig } from '../config-provider';
-import { useShouldRender } from '../../utils/should-render';
+import { ShouldRender } from '../../utils/should-render';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
 const classPrefix = `adm-mask`;
 const opacityRecord = {
@@ -47,7 +47,7 @@ export const Mask = p => {
     config: {
       precision: 0.01,
       mass: 1,
-      tension: 200,
+      tension: 250,
       friction: 30,
       clamp: true
     },
@@ -67,14 +67,12 @@ export const Mask = p => {
       }
     }
   });
-  const shouldRender = useShouldRender(active, props.forceRender, props.destroyOnClose);
   const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement(animated.div, {
     className: classPrefix,
     ref: ref,
-    style: Object.assign(Object.assign({
+    style: Object.assign(Object.assign({}, props.style), {
       background,
-      opacity
-    }, props.style), {
+      opacity,
       display: active ? undefined : 'none'
     }),
     onClick: e => {
@@ -91,6 +89,10 @@ export const Mask = p => {
     onClick: props.onMaskClick
   }), React.createElement("div", {
     className: `${classPrefix}-content`
-  }, shouldRender && props.children))));
-  return renderToContainer(props.getContainer, node);
+  }, props.children))));
+  return React.createElement(ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, renderToContainer(props.getContainer, node));
 };

package/es/components/mask/mask.patch.css

@@ -0,0 +1,3 @@
+.adm-mask {
+  z-index: 1000;
+}

package/es/components/modal/modal-action-button.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type Action = {
     key: string | number;
-    text: string;
+    text: ReactNode;
     disabled?: boolean;
     danger?: boolean;
     primary?: boolean;

package/es/components/modal/modal.css

@@ -1,28 +1,14 @@
 .adm-modal {
   --z-index: var(--adm-modal-z-index, 1000);
-  position: fixed;
-  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: 280px;
-  max-width: 75vw;
-  transform: translate(-50%, -50%);
+  ---z-index: var(--z-index);
+}
+.adm-modal .adm-center-popup {
+  --z-index: var(---z-index);
 }
 .adm-modal-body {
   width: 100%;
   max-height: 70vh;
-  box-sizing: border-box;
-  font-size: 14px;
-  background-color: white;
-  border-radius: 8px;
+  font-size: var(--adm-font-size-6);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -36,42 +22,35 @@
 .adm-modal-body:not(.adm-modal-with-image) {
   padding-top: 20px;
 }
-.adm-modal-body .adm-modal-image-container {
+.adm-modal-image-container {
   margin-bottom: 12px;
   max-height: 40vh;
   overflow-y: scroll;
 }
-.adm-modal-body .adm-modal-header {
+.adm-modal-header {
   margin-bottom: 8px;
   padding: 0 12px;
 }
-.adm-modal-body .adm-modal-title {
+.adm-modal-title {
   margin-bottom: 8px;
   padding: 0 12px;
   font-weight: bold;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   text-align: center;
 }
-.adm-modal-body .adm-modal-content {
+.adm-modal-content {
   padding: 0 12px 12px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
-  color: #333;
-}
-.adm-modal-body .adm-modal-close {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  color: var(--adm-color-weak);
-  padding: 4px;
-  font-size: 18px;
+  color: var(--adm-color-text);
 }
 .adm-modal-footer {
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   padding: 8px 12px 12px;
 }
 .adm-modal-footer-empty {
@@ -82,7 +61,7 @@
   --gap-vertical: 20px;
 }
 .adm-modal-footer .adm-modal-button {
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
 }
 .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {

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

@@ -1,28 +1,17 @@
-import React, { FC, ReactNode } from 'react';
+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?: React.CSSProperties;
-    maskClassName?: string;
-    stopPropagation?: PropagationEvent[];
     showCloseButton?: boolean;
-    disableBodyScroll?: boolean;
 } & NativeProps;
 export declare const Modal: FC<ModalProps>;

package/es/components/modal/modal.js

@@ -1,64 +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
+  getContainer: null
 };
 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", {
-    className: classNames(cls('close'), 'adm-plain-anchor'),
-    onClick: props.onClose
-  }, React.createElement(CloseOutline, null)), !!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,
@@ -89,26 +46,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, {
+    className: classNames(cls(), props.className),
+    style: props.style,
+    afterClose: props.afterClose,
+    afterShow: props.afterShow,
+    showCloseButton: props.showCloseButton,
+    closeOnMaskClick: props.closeOnMaskClick,
+    onClose: props.onClose,
     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/es/components/modal/modal.patch.css

@@ -0,0 +1,23 @@
+.adm-modal-body {
+  font-size: 14px;
+}
+.adm-modal-title {
+  font-size: 18px;
+}
+.adm-modal-content {
+  font-size: 15px;
+  color: #333333;
+}
+.adm-modal-close {
+  color: #999999;
+  font-size: 18px;
+}
+.adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item {
+  margin-bottom: 20px;
+}
+.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: 18px;
+}

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

@@ -1,5 +1,5 @@
 import { ModalProps } from './modal';
-export declare type ModalShowProps = Omit<ModalProps, 'visible'>;
+export declare type ModalShowProps = Omit<ModalProps, 'visible' | 'destroyOnClose' | 'forceRender'>;
 export declare type ModalShowHandler = {
     close: () => void;
 };

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

@@ -30,7 +30,7 @@
   margin-right: 4px;
 }
 .adm-nav-bar-left {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -38,7 +38,7 @@
 .adm-nav-bar-title {
   justify-content: center;
   white-space: nowrap;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   padding: 0 12px;
 }
 .adm-nav-bar-right {

package/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: 15px;
-  --icon-font-size: 18px;
+  --text-color: var(--adm-color-white);
+  --font-size: var(--adm-font-size-7);
+  --icon-font-size: var(--adm-font-size-10);
   --height: 38px;
   height: var(--height);
   box-sizing: border-box;
@@ -61,6 +61,14 @@
   flex-shrink: 0;
   margin-left: 12px;
 }
+.adm-notice-bar-close {
+  width: 24px;
+  height: 24px;
+  margin-right: -3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .adm-notice-bar-close-icon {
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }

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

@@ -82,13 +82,15 @@ export const NoticeBar = memo(p => {
     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`,
+  }, props.extra, props.closeable && React.createElement("div", {
+    className: `${classPrefix}-close`,
     onClick: () => {
       var _a;
 
       setVisible(false);
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  }))));
+  }, React.createElement(CloseOutline, {
+    className: `${classPrefix}-close-icon`
+  })))));
 });