diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js index 05c7e23744..d7452bfba7 100644 --- a/components/config-provider/__tests__/components.test.js +++ b/components/config-provider/__tests__/components.test.js @@ -354,7 +354,7 @@ describe('ConfigProvider', () => { // Modal testPair('Modal', props => (
- + Bamboo is Little Light
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md index ec35080ea2..47b5a7a74c 100644 --- a/components/drawer/index.en-US.md +++ b/components/drawer/index.en-US.md @@ -21,7 +21,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr | --- | --- | --- | --- | --- | | closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true | 3.7.0 | | destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false | 3.7.0 | -| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' | 3.7.0 | +| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' | 3.7.0 | | mask | Whether to show mask or not. | Boolean | true | 3.7.0 | | maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true | 3.7.0 | | maskStyle | Style for Drawer's mask element. | object | {} | 3.7.0 | diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index e7ef9bc1c6..8c775b41e9 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -20,7 +20,7 @@ type placementType = (typeof PlacementTypes)[number]; export interface DrawerProps { closable?: boolean; destroyOnClose?: boolean; - getContainer?: string | HTMLElement | getContainerFunc; + getContainer?: string | HTMLElement | getContainerFunc | false; maskClosable?: boolean; mask?: boolean; maskStyle?: React.CSSProperties; @@ -77,20 +77,6 @@ class Drawer extends React.Component { - const { visible, onClose } = this.props; - if (visible !== undefined && onClose) { - onClose(e); - } - }; - - onMaskClick = (e: EventType) => { - if (!this.props.maskClosable && !(e.nativeEvent instanceof KeyboardEvent)) { - return; - } - this.close(e); - }; - push = () => { this.setState({ push: true, @@ -116,7 +102,7 @@ class Drawer extends React.Component this.props.destroyOnClose && !this.props.visible; - // get drawar push width or height + // get drawer push width or height getPushTransform = (placement?: placementType) => { if (placement === 'left' || placement === 'right') { return `translateX(${placement === 'left' ? 180 : -180}px)`; @@ -152,10 +138,10 @@ class Drawer extends React.Component + ) @@ -214,11 +200,9 @@ class Drawer extends React.Component HTMLElement` \| Selectors | 'body' | 3.7.0 | -| maskClosable | 点击蒙层是否允许关闭 | boolean | true | 3.7.0 | 3.7.0 | -| mask | 是否展示遮罩 | Boolean | true | +| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' | 3.7.0 | +| maskClosable | 点击蒙层是否允许关闭 | boolean | true | 3.7.0 | +| mask | 是否展示遮罩 | Boolean | true | 3.7.0 | | maskStyle | 遮罩样式 | object | {} | 3.7.0 | | style | 可用于设置 Drawer 最外层容器的样式 | object | - | 3.7.0 | | bodyStyle | 可用于设置 Drawer 的样式，调整浮层位置等 | object | - | 3.12.0 | diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js index 325f93d19e..7dd1306d9c 100644 --- a/components/locale-provider/__tests__/index.test.js +++ b/components/locale-provider/__tests__/index.test.js @@ -145,7 +145,7 @@ const App = () => ( item.title} /> - +

Locale Modal

 diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 7065776d76..dfae7fdc87 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -68,7 +68,7 @@ export interface ModalProps { maskTransitionName?: string; transitionName?: string; className?: string; - getContainer?: (instance: React.ReactInstance) => HTMLElement; + getContainer?: string | HTMLElement | getContainerFunc | false | null; zIndex?: number; bodyStyle?: React.CSSProperties; maskStyle?: React.CSSProperties; @@ -78,6 +78,8 @@ export interface ModalProps { prefixCls?: string; } +type getContainerFunc = () => HTMLElement; + export interface ModalFuncProps { prefixCls?: string; className?: string; @@ -106,7 +108,7 @@ export interface ModalFuncProps { maskStyle?: React.CSSProperties; type?: string; keyboard?: boolean; - getContainer?: (instance: React.ReactInstance) => HTMLElement; + getContainer?: string | HTMLElement | getContainerFunc | false | null; autoFocusButton?: null | 'ok' | 'cancel'; transitionName?: string; maskTransitionName?: string; @@ -221,7 +223,7 @@ export default class Modal extends React.Component { return ( -
-
-