style(Toast): 更新整体大小和间距相关样式

src/components/toast/controller.tsx

@@ -52,6 +52,7 @@ const show = (p: ToastProps | string) => {
  const destroy = useCallback(() => {
  setVisible(false);
  if (props.onClose) props.onClose();
+ setTimeout(internalOnClosed, 1000);
  }, []);
 
  const internalOnClosed = useCallback(() => {
@@ -61,7 +62,7 @@ const show = (p: ToastProps | string) => {
  }
  }, [container]);
 
- update.clear = internalOnClosed;
+ update.clear = destroy;
 
  update.config = useCallback(
  nextState => {
@@ -76,8 +77,8 @@ const show = (p: ToastProps | string) => {
 
  useEffect(() => {
  setVisible(true);
- syncClear();
- toastArray.push(internalOnClosed);
+ !state.allowMultipleToast && syncClear();
+ toastArray.push(destroy);
 
  if (state.duration && +state.duration > 0) {
  timer = window.setTimeout(destroy, state.duration);
@@ -106,8 +107,9 @@ const defaultOptions: ToastOptions = {
  message: '',
  duration: 3000,
  direction: 'vertical',
- loadingType: 'gap',
+ loadingType: 'oval',
  position: 'center',
+ allowMultipleToast: false,
 };
 
 ['info', 'loading', 'success', 'fail'].forEach(method => {

src/components/toast/styles/index.less

@@ -3,12 +3,12 @@
 :root{
  --aunt-toast-z-index: var(--aunt-z-index-full-screen);
  --aunt-toast-content-background-color: rgba(0,0,0,.8);
- --aunt-toast-content-padding: var(--aunt-padding-base) var(--aunt-padding-s);
+ --aunt-toast-content-padding: var(--aunt-padding-xs) var(--aunt-padding-m);
  --aunt-toast-content-border-radius: var(--aunt-border-radius-md);
  --aunt-toast-content-color: var(--aunt-white-color);
  --aunt-toast-content-top: 20%;
  --aunt-toast-content-bottom: 20%;
- --aunt-toast-content-text-size: var(--aunt-font-size-sm);
+ --aunt-toast-content-text-size: var(--aunt-font-size-lg);
  --aunt-toast-content-text-margin-left: var(--aunt-padding-base);
 }
 
@@ -20,10 +20,13 @@
  bottom: 0;
  top: 0;
  box-sizing: border-box;
+
  &--pointer{
  pointer-events: none;
  }
 
+ &__icon{}
+
  &__content{
  position: absolute;
  display: inline-flex;
@@ -61,6 +64,9 @@
  margin-left: var(--aunt-toast-content-text-margin-left);
  }
  }
+ &--margin{
+ margin-top:4px;
+ }
  &--text{
  white-space: pre-wrap;
  text-align: center;

src/components/toast/toast.tsx

@@ -10,14 +10,14 @@ export const Toast: FunctionComponent<ToastProps> = props => {
  const {
  type = 'info',
  direction = 'vertical',
- iconSize = (direction: ToastDirection) => {
- if (direction === 'horizontal') return 20;
- return 34;
- },
  icon,
- loadingType = 'gap',
+ loadingType = 'oval',
  message,
  position = 'center',
+ iconSize = (direction: ToastDirection) => {
+ if (direction === 'horizontal' && message) return 24;
+ return 40;
+ },
  } = props;
 
  const { prefix } = useContext(ConfigProviderContext);
@@ -32,6 +32,7 @@ export const Toast: FunctionComponent<ToastProps> = props => {
  isFunction(iconSize) && typeof iconSize === 'function'
  ? iconSize(direction)
  : (iconSize as number | string);
+
  if (React.isValidElement(icon))
  return React.cloneElement(icon, {
  size: size,
@@ -61,7 +62,14 @@ export const Toast: FunctionComponent<ToastProps> = props => {
  style={props.style}
  >
  {renderIcon()}
- <span className={joinTrim([ns.em('content', 'text')])}>{message}</span>
+ <span
+ className={joinTrim([
+ ns.em('content', 'text'),
+ renderIcon() && direction === 'vertical' ? ns.em('content', 'margin') : '',
+ ])}
+ >
+ {message}
+ </span>
  </div>
  );
  };

src/components/toast/types.ts

@@ -31,6 +31,8 @@ export interface ToastProps extends BaseTypeProps {
  position?: ToastPosition;
  /** 轻提示弹出时的的父容器 */
  teleport?: HTMLElement | (() => HTMLElement);
+ /** 允许同时存在多个 Toast */
+ allowMultipleToast?: boolean;
  /** 关闭时的回调函数 */
  onClose?: () => void;
  /** 完全展示后的回调函数 */