enhance: (Mask & Toast) reuse GetContainer type (ant-design#4240)

wakeGISer · Oct 22, 2021 · 9cd84ef · 9cd84ef
1 parent 4842906
commit 9cd84ef
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/src/components/mask/mask.tsx b/src/components/mask/mask.tsx
@@ -2,7 +2,10 @@ import { NativeProps, withNativeProps } from '../../utils/native-props'
 import React, { useMemo, useRef, useState } from 'react'
 import { useLockScroll } from '../../utils/use-lock-scroll'
 import { useSpring, animated } from '@react-spring/web'
-import { renderToContainer } from '../../utils/render-to-container'
+import {
+  renderToContainer,
+  GetContainer,
+} from '../../utils/render-to-container'
 import { mergeProps } from '../../utils/with-default-props'
 import { useConfig } from '../config-provider'
 import { useShouldRender } from '../../utils/use-should-render'
@@ -27,7 +30,7 @@ export type MaskProps = {
   disableBodyScroll?: boolean
   color?: 'black' | 'white'
   opacity?: 'default' | 'thin' | 'thick' | number
-  getContainer?: HTMLElement | (() => HTMLElement) | null
+  getContainer?: GetContainer
   afterShow?: () => void
   afterClose?: () => void
   stopPropagation?: PropagationEvent[]

diff --git a/src/components/toast/index.en.md b/src/components/toast/index.en.md
@@ -20,7 +20,7 @@ The `show` method supports passing in a `props` object, which contains the follo
 | icon            | `Toast` icon                                                       | `'success' \| 'fail' \| 'loading' \| React.ReactNode` | -               |
 | duration        | Prompt duration, if it is `0`, it will not be closed automatically | `number`                                              | `2000`          |
 | position        | Vertical display position                                          | `'top' \| 'bottom' \| 'center'`                       | `'center'`      |
-| getContainer    | The customized parent container of the light prompt                | `HTMLElement \| (() => HTMLElement) \| undefined`     | `document.body` |
+| getContainer    | The customized parent container of the light prompt                | `HTMLElement \| (() => HTMLElement) \| null`          | `document.body` |
 | stopPropagation | Stop the propagation of some events.                               | `PropagationEvent[]`                                  | `['click']`     |
 
 > Only one light reminder is allowed to pop up at the same time, and the newly appeared `Toast` will squeeze out the previously displayed `Toast`.

diff --git a/src/components/toast/index.zh.md b/src/components/toast/index.zh.md
@@ -20,7 +20,7 @@
 | icon            | `Toast` 图标                          | `'success' \| 'fail' \| 'loading' \| React.ReactNode` | -               |
 | duration        | 提示持续时间，若为 `0` 则不会自动关闭 | `number`                                              | `2000`          |
 | position        | 垂直方向显示位置                      | `'top' \| 'bottom' \| 'center'`                       | `'center'`      |
-| getContainer    | 自定义轻提示的父容器                  | `HTMLElement \| (() => HTMLElement) \| undefined`     | `document.body` |
+| getContainer    | 自定义轻提示的父容器                  | `HTMLElement \| (() => HTMLElement) \| null`          | `document.body` |
 | stopPropagation | 阻止某些事件的冒泡                    | `PropagationEvent[]`                                  | `['click']`     |
 
 > 同一时间只允许弹出一个轻提示，新出现的 `Toast` 会将之前正在显示中的 `Toast` 挤掉。

diff --git a/src/components/toast/toast.tsx b/src/components/toast/toast.tsx
@@ -5,6 +5,7 @@ import Loading from '../loading'
 import Mask from '../mask'
 import { mergeProps } from '../../utils/with-default-props'
 import { PropagationEvent } from '../../utils/with-stop-propagation'
+import { GetContainer } from '../../utils/render-to-container'
 
 const classPrefix = `adm-toast`
 
@@ -18,7 +19,7 @@ export interface ToastProps {
   duration?: number
   position?: 'top' | 'bottom' | 'center'
   visible?: boolean
-  getContainer?: HTMLElement | (() => HTMLElement)
+  getContainer?: GetContainer
   stopPropagation?: PropagationEvent[]
 }