antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

package/cjs/components/tabs/tabs.js

@@ -3,30 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tabs = exports.TabPane = void 0;
+exports.Tabs = exports.Tab = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _web = require("@react-spring/web");
+
 var _nativeProps = require("../../utils/native-props");
 
-var _useControllableValue = require("../../utils/use-controllable-value");
+var _usePropsValue2 = require("../../utils/use-props-value");
+
+var _bound = require("../../utils/bound");
+
+var _ahooks = require("ahooks");
+
+var _useMutationEffect = require("../../utils/use-mutation-effect");
+
+var _useResizeEffect = require("../../utils/use-resize-effect");
+
+var _withDefaultProps = require("../../utils/with-default-props");
 
 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 _getRequireWildcardCache(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; }
+
 var classPrefix = "adm-tabs";
 
-var TabPane = function TabPane() {
+var Tab = function Tab() {
   return null;
 };
 
-exports.TabPane = TabPane;
+exports.Tab = Tab;
+var defaultProps = {
+  activeLineMode: 'auto',
+  stretch: true
+};
 
-var Tabs = function Tabs(props) {
+var Tabs = function Tabs(p) {
   var _a;
 
-  var childrenRecord = {};
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var tabListContainerRef = (0, _react.useRef)(null);
+  var activeLineRef = (0, _react.useRef)(null);
+  var keyToIndexRecord = {};
   var firstActiveKey = null;
   var panes = [];
 
@@ -39,31 +62,197 @@ var Tabs = function Tabs(props) {
       firstActiveKey = key;
     }
 
-    childrenRecord[key] = child.props.children;
-    panes.push(child);
+    var length = panes.push(child);
+    keyToIndexRecord[key] = length - 1;
   });
 
-  var _useNewControllableVa = (0, _useControllableValue.useNewControllableValue)({
+  var _usePropsValue = (0, _usePropsValue2.usePropsValue)({
     value: props.activeKey,
     defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
     onChange: props.onChange
   }),
-      activeKey = _useNewControllableVa[0],
-      setActiveKey = _useNewControllableVa[1];
+      activeKey = _usePropsValue[0],
+      setActiveKey = _usePropsValue[1];
+
+  var _useSpring = (0, _web.useSpring)(function () {
+    return {
+      x: 0,
+      width: 0,
+      config: {
+        tension: 300,
+        clamp: true
+      }
+    };
+  }),
+      _useSpring$ = _useSpring[0],
+      x = _useSpring$.x,
+      width = _useSpring$.width,
+      api = _useSpring[1];
+
+  var _useSpring2 = (0, _web.useSpring)(function () {
+    return {
+      scrollLeft: 0,
+      config: {
+        tension: 300,
+        clamp: true
+      }
+    };
+  }),
+      scrollLeft = _useSpring2[0].scrollLeft,
+      scrollApi = _useSpring2[1];
+
+  var _useSpring3 = (0, _web.useSpring)(function () {
+    return {
+      leftMaskOpacity: 0,
+      rightMaskOpacity: 0,
+      config: {
+        clamp: true
+      }
+    };
+  }),
+      _useSpring3$ = _useSpring3[0],
+      leftMaskOpacity = _useSpring3$.leftMaskOpacity,
+      rightMaskOpacity = _useSpring3$.rightMaskOpacity,
+      maskApi = _useSpring3[1];
+
+  function animate(immediate) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+
+    var container = tabListContainerRef.current;
+    if (!container) return;
+    var activeIndex = keyToIndexRecord[activeKey];
+
+    if (activeIndex === undefined) {
+      api.start({
+        x: 0,
+        width: 0,
+        immediate: true
+      });
+      return;
+    }
+
+    var activeLine = activeLineRef.current;
+    if (!activeLine) return;
+    var activeTabWrapper = container.children.item(activeIndex + 1);
+    var activeTab = activeTabWrapper.children.item(0);
+    var activeTabLeft = activeTab.offsetLeft;
+    var activeTabWidth = activeTab.offsetWidth;
+    var activeTabWrapperLeft = activeTabWrapper.offsetLeft;
+    var activeTabWrapperWidth = activeTabWrapper.offsetWidth;
+    var containerWidth = container.offsetWidth;
+    var containerScrollWidth = container.scrollWidth;
+    var containerScrollLeft = container.scrollLeft;
+    var activeLineWidth = activeLine.offsetWidth;
+    var x = 0;
+    var width = 0;
+
+    if (props.activeLineMode === 'auto') {
+      x = activeTabLeft;
+      width = activeTabWidth;
+    } else if (props.activeLineMode === 'full') {
+      x = activeTabWrapperLeft;
+      width = activeTabWrapperWidth;
+    } else {
+      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+    }
+
+    api.start({
+      x: x,
+      width: width,
+      immediate: immediate
+    });
+    var maxScrollDistance = containerScrollWidth - containerWidth;
+    if (maxScrollDistance <= 0) return;
+    var nextScrollLeft = (0, _bound.bound)(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, containerScrollWidth - containerWidth);
+    scrollApi.start({
+      scrollLeft: nextScrollLeft,
+      from: {
+        scrollLeft: containerScrollLeft
+      },
+      immediate: immediate
+    });
+  }
+
+  (0, _react.useLayoutEffect)(function () {
+    animate(true);
+  }, []);
+  (0, _ahooks.useUpdateLayoutEffect)(function () {
+    animate();
+  }, [activeKey]);
+  (0, _useResizeEffect.useResizeEffect)(function () {
+    animate(true);
+  }, tabListContainerRef);
+  (0, _useMutationEffect.useMutationEffect)(function () {
+    animate(true);
+  }, tabListContainerRef, {
+    subtree: true,
+    childList: true,
+    characterData: true
+  });
+
+  var _useThrottleFn = (0, _ahooks.useThrottleFn)(function (immediate) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+
+    var container = tabListContainerRef.current;
+    if (!container) return;
+    var scrollLeft = container.scrollLeft;
+    var showLeftMask = scrollLeft > 0;
+    var showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+    maskApi.start({
+      leftMaskOpacity: showLeftMask ? 1 : 0,
+      rightMaskOpacity: showRightMask ? 1 : 0,
+      immediate: immediate
+    });
+  }, {
+    wait: 100,
+    trailing: true,
+    leading: true
+  }),
+      updateMask = _useThrottleFn.run;
 
+  (0, _react.useLayoutEffect)(function () {
+    updateMask(true);
+  }, []);
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-tab-list"
-  }, panes.map(function (pane) {
-    var _classNames;
+    className: classPrefix + "-header"
+  }, /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+    className: (0, _classnames["default"])(classPrefix + "-header-mask", classPrefix + "-header-mask-left"),
+    style: {
+      opacity: leftMaskOpacity
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+    className: (0, _classnames["default"])(classPrefix + "-header-mask", classPrefix + "-header-mask-right"),
+    style: {
+      opacity: rightMaskOpacity
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+    className: classPrefix + "-tab-list",
+    ref: tabListContainerRef,
+    scrollLeft: scrollLeft,
+    onScroll: updateMask
+  }, /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+    ref: activeLineRef,
+    className: classPrefix + "-tab-line",
+    style: {
+      width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 30px)' : width,
+      x: x
+    }
+  }), panes.map(function (pane) {
+    var _classNames, _classNames2;
 
     return (0, _nativeProps.withNativeProps)(pane.props, /*#__PURE__*/_react["default"].createElement("div", {
       key: pane.key,
-      className: classPrefix + "-tab-wrapper"
+      className: (0, _classnames["default"])(classPrefix + "-tab-wrapper", (_classNames = {}, _classNames[classPrefix + "-tab-wrapper-stretch"] = props.stretch, _classNames))
     }, /*#__PURE__*/_react["default"].createElement("div", {
       onClick: function onClick() {
         var key = pane.key;
+        if (pane.props.disabled) return;
 
         if (key === undefined || key === null) {
           return;
@@ -71,9 +260,9 @@ var Tabs = function Tabs(props) {
 
         setActiveKey(key.toString());
       },
-      className: (0, _classnames["default"])(classPrefix + "-tab", (_classNames = {}, _classNames[classPrefix + "-tab-active"] = pane.key === activeKey, _classNames))
+      className: (0, _classnames["default"])(classPrefix + "-tab", (_classNames2 = {}, _classNames2[classPrefix + "-tab-active"] = pane.key === activeKey, _classNames2[classPrefix + "-tab-disabled"] = pane.props.disabled, _classNames2))
     }, pane.props.title)));
-  })), panes.map(function (pane) {
+  }))), panes.map(function (pane) {
     if (pane.props.children === undefined) {
       return null;
     }

package/cjs/components/tag/tag.css

@@ -1,19 +1,17 @@
 .adm-tag {
-  padding: 2px 4px;
-  font-size: 10px;
+  --border-radius: var(--adm-tag-border-radius, 2px);
+  padding: 3px 5px;
+  font-size: 12px;
+  line-height: 1;
   font-weight: normal;
-  background-color: var(--color);
-  color: #ffffff;
+  background: var(--background-color);
+  color: var(--text-color);
   display: inline-block;
   white-space: nowrap;
-  border-radius: 2px;
-  border: 0.5px solid var(--color);
+  border-radius: var(--border-radius);
+  border: 0.5px solid var(--border-color);
   box-sizing: border-box;
 }
 .adm-tag-round {
   border-radius: 100px;
 }
-.adm-tag-outline {
-  background: transparent;
-  color: var(--color);
-}

package/cjs/components/tag/tag.d.ts

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type TagProps = {
-    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | string;
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | (string & {});
     fill?: 'solid' | 'outline';
     round?: boolean;
-} & NativeProps;
+    onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+} & NativeProps<'--border-color' | '--background-color' | '--text-color' | '--border-radius'>;
 export declare const Tag: FC<TagProps>;

package/cjs/components/tag/tag.js

@@ -37,11 +37,14 @@ var Tag = function Tag(p) {
   var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   var color = (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color;
   var style = {
-    '--color': color
+    '--border-color': color,
+    '--text-color': props.fill === 'outline' ? color : '#ffffff',
+    '--background-color': props.fill === 'outline' ? 'transparent' : color
   };
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("span", {
     style: style,
-    className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-round"] = props.round, _classNames[classPrefix + "-outline"] = props.fill === 'outline', _classNames))
+    onClick: props.onClick,
+    className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-round"] = props.round, _classNames))
   }, props.children));
 };
 

package/cjs/components/text-area/text-area.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur'> & {
     onChange?: (val: string) => void;
@@ -7,7 +8,7 @@ export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaH
     placeholder?: string;
     rows?: number;
     maxLength?: number;
-    showCount?: boolean;
+    showCount?: boolean | ((length: number, maxLength?: number) => ReactNode);
     autoSize?: boolean | {
         minRows?: number;
         maxRows?: number;
@@ -19,14 +20,14 @@ export declare type TextAreaRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "autoComplete" | "readOnly" | "onFocus" | "onBlur"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;
     placeholder?: string | undefined;
     rows?: number | undefined;
     maxLength?: number | undefined;
-    showCount?: boolean | undefined;
+    showCount?: boolean | ((length: number, maxLength?: number | undefined) => ReactNode) | undefined;
     autoSize?: boolean | {
         minRows?: number | undefined;
         maxRows?: number | undefined;

package/cjs/components/text-area/text-area.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _useControllableValue = require("../../utils/use-controllable-value");
+var _usePropsValue2 = require("../../utils/use-props-value");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
@@ -52,9 +52,9 @@ var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
       showCount = props.showCount,
       textAreaProps = __rest(props, ["className", "style", "defaultValue", "value", "onChange", "rows", "autoSize", "showCount"]);
 
-  var _useNewControllableVa = (0, _useControllableValue.useNewControllableValue)(props),
-      value = _useNewControllableVa[0],
-      setValue = _useNewControllableVa[1];
+  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var nativeTextAreaRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, function () {
@@ -96,6 +96,16 @@ var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
 
     textArea.style.height = height + "px";
   }, [value, autoSize]);
+  var count;
+
+  if (typeof showCount === 'function') {
+    count = showCount(value.length, props.maxLength);
+  } else if (showCount) {
+    count = /*#__PURE__*/_react["default"].createElement("div", {
+      className: classPrefix + "-count"
+    }, props.maxLength === undefined ? value.length : value.length + '/' + props.maxLength);
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(classPrefix + "-wrapper", className),
     style: style
@@ -119,9 +129,7 @@ var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     id: props.id
-  })), showCount && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-count"
-  }, props.maxLength === undefined ? value.length : value.length + '/' + props.maxLength));
+  })), count);
 });
 exports.TextArea = TextArea;
 TextArea.defaultProps = defaultProps;

package/cjs/components/toast/methods.js

@@ -3,116 +3,96 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.show = show;
 exports.clear = clear;
+exports.show = show;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _noop = require("../../utils/noop");
-
 var _getContainer = require("../../utils/get-container");
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _ahooks = require("ahooks");
-
 var _toast = require("./toast");
 
+var _withDefaultProps = require("../../utils/with-default-props");
+
 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 _getRequireWildcardCache(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; }
 
-var toastArray = [];
+var containers = [];
+
+function unmount(container) {
+  var unmountResult = _reactDom["default"].unmountComponentAtNode(container);
+
+  if (unmountResult && container.parentNode) {
+    container.parentNode.removeChild(container);
+  }
+}
+
+var defaultProps = {
+  duration: 2000
+};
 
 function show(p) {
-  var props = typeof p === 'string' ? {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, typeof p === 'string' ? {
     content: p
-  } : p;
+  } : p);
   var timer = 0;
-  var _props$afterClose = props.afterClose,
-      afterClose = _props$afterClose === void 0 ? _noop.noop : _props$afterClose,
-      _props$getContainer = props.getContainer,
+  var _props$getContainer = props.getContainer,
       getContainer = _props$getContainer === void 0 ? function () {
     return document.body;
   } : _props$getContainer;
   var container = document.createElement('div');
   var bodyContainer = (0, _getContainer.resolveContainer)(getContainer);
   bodyContainer.appendChild(container);
+  clear();
+  containers.push(container);
 
   var TempToast = function TempToast() {
     var _useState = (0, _react.useState)(true),
         visible = _useState[0],
         setVisible = _useState[1];
 
-    var _useState2 = (0, _react.useState)(Object.assign({
-      duration: 2000
-    }, props)),
-        state = _useState2[0],
-        setState = _useState2[1]; // clearDOM after animation
-
-
-    var _afterClose = function _afterClose() {
-      afterClose();
-
-      var unmountResult = _reactDom["default"].unmountComponentAtNode(container);
-
-      if (unmountResult && container.parentNode) {
-        container.parentNode.removeChild(container);
-      }
-    }; // close with animation
-
-
-    var destroy = (0, _react.useCallback)(function () {
-      setVisible(false);
-    }, []);
     (0, _react.useEffect)(function () {
-      _clear();
+      return function () {
+        var _a;
 
-      toastArray.push(_afterClose);
+        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      };
     }, []);
     (0, _react.useEffect)(function () {
-      if (state.duration !== 0 && 'duration' in state) {
-        timer = window.setTimeout(destroy, state.duration);
+      if (props.duration === 0) {
+        return;
       }
 
+      timer = window.setTimeout(function () {
+        setVisible(false);
+      }, props.duration);
       return function () {
-        if (timer !== 0) {
-          window.clearTimeout(timer);
-        }
-      };
-    }, []); // 当修改 duration 时，重新计时
-
-    (0, _ahooks.useUpdateEffect)(function () {
-      if ('duration' in state) {
         window.clearTimeout(timer);
-        timer = window.setTimeout(destroy, state.duration);
-      }
-    }, [state.duration]);
-    return /*#__PURE__*/_react["default"].createElement(_toast.InternalToast, Object.assign({}, state, {
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement(_toast.InternalToast, Object.assign({}, props, {
       getContainer: function getContainer() {
         return container;
       },
       visible: visible,
-      afterClose: _afterClose
+      afterClose: function afterClose() {
+        unmount(container);
+      }
     }));
   };
 
   _reactDom["default"].render( /*#__PURE__*/_react["default"].createElement(TempToast, null), container);
-} // 同步的销毁
-
-
-function _clear() {
-  var fn = toastArray.pop();
-
-  while (fn) {
-    fn();
-    fn = toastArray.pop();
-  }
-} // 针对 toast 还没弹出来就立刻销毁的情况，将销毁放到下一个 event loop 中，避免销毁失败。
-
+}
 
 function clear() {
-  setTimeout(_clear);
+  while (true) {
+    var container = containers.pop();
+    if (!container) break;
+    unmount(container);
+  }
 }

package/cjs/components/toast/toast.css

@@ -1,5 +1,5 @@
 .adm-toast-mask .adm-toast-wrap {
-  position: relative;
+  position: absolute;
   top: 50%;
   left: 50%;
   width: fit-content;
@@ -8,21 +8,26 @@
   max-height: 70%;
   overflow: auto;
   color: white;
-  text-align: center;
   word-break: break-all;
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 8px;
   transform: translate(-50%, -50%);
   pointer-events: all;
+  font-size: 15px;
+  line-height: 1.5;
 }
 .adm-toast-mask .adm-toast-wrap-text {
-  padding: 8px 12px;
+  padding: 12px;
 }
 .adm-toast-mask .adm-toast-wrap-icon {
-  padding: 16px;
+  padding: 35px 40px;
 }
 .adm-toast-mask .adm-toast-wrap-icon .adm-toast-icon {
+  text-align: center;
   margin-bottom: 8px;
   font-size: 36px;
   line-height: 1;
 }
+.adm-toast-loading {
+  font-size: 24px;
+}

package/cjs/components/toast/toast.d.ts

@@ -1,24 +1,17 @@
 import React, { ReactNode } from 'react';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { GetContainer } from '../../utils/render-to-container';
 export interface ToastProps {
-    /** Toast 完全关闭后的回调 */
     afterClose?: () => void;
-    /** Toast 遮罩样式 */
     maskStyle?: React.CSSProperties;
-    /** Toast 遮罩类名 */
     maskClassName?: string;
-    /** 是否允许背景点击 */
     maskClickable?: boolean;
-    /** toast 文本内容 */
     content?: ReactNode;
-    /** toast 图标 */
     icon?: 'success' | 'fail' | 'loading' | React.ReactNode;
-    /** 提示持续时间，若为 0 则不会自动关闭 */
     duration?: number;
-    /** 垂直方向显示位置，默认为 center */
     position?: 'top' | 'bottom' | 'center';
-    /** 是否显示 */
     visible?: boolean;
-    /** 轻提示弹出时的的父容器 */
-    getContainer?: HTMLElement | (() => HTMLElement);
+    getContainer?: GetContainer;
+    stopPropagation?: PropagationEvent[];
 }
 export declare const InternalToast: React.FC<ToastProps>;