Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: drawer support getPopupContainer and getPrefixCls by ConfigProvider #24727

Merged
merged 3 commits into from Jun 4, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 12 additions & 0 deletions components/config-provider/__tests__/container.test.js
Expand Up @@ -3,6 +3,7 @@ import { mount } from 'enzyme';
import ConfigProvider from '..';
import DatePicker from '../../date-picker';
import Slider from '../../slider';
import Drawer from '../../drawer';

describe('ConfigProvider.GetPopupContainer', () => {
it('Datepicker', () => {
Expand All @@ -25,4 +26,15 @@ describe('ConfigProvider.GetPopupContainer', () => {
wrapper.find('.ant-slider-handle').first().simulate('mouseenter');
expect(getPopupContainer).toHaveBeenCalled();
});

it('drawer', () => {
const getPopupContainer = jest.fn(node => node.parentNode);
const Demo = ({ visible }) => (
<ConfigProvider getPopupContainer={getPopupContainer}>
<Drawer visible={visible} />
</ConfigProvider>
);
mount(<Demo visible />);
expect(getPopupContainer).toHaveBeenCalled();
});
});
15 changes: 15 additions & 0 deletions components/drawer/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -11,6 +11,21 @@ exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
</button>
`;

exports[`renders ./components/drawer/demo/config-provider.md correctly 1`] = `
<div
class="site-drawer-render-in-current-wrapper"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Open
</span>
</button>
</div>
`;

exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
<button
class="ant-btn ant-btn-primary"
Expand Down
57 changes: 57 additions & 0 deletions components/drawer/demo/config-provider.md
@@ -0,0 +1,57 @@
---
order: 99
title:
zh-CN: ConfigProvider
en-US: ConfigProvider
debug: true
---

## zh-CN

支持 ConfigProvider 配置。

## en-US

config by ConfigProvider.

```tsx
import React, { useState, useRef } from 'react';
import { Drawer, ConfigProvider, Button } from 'antd';

const App: React.FC = () => {
const domRef = useRef();
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return (
<ConfigProvider
getPopupContainer={() => {
return domRef.current;
}}
>
<div ref={domRef} className="site-drawer-render-in-current-wrapper">
<Button type="primary" onClick={showDrawer}>
Open
</Button>
<Drawer
style={{ position: 'absolute' }}
title="ConfigProvider"
placement="right"
onClose={onClose}
visible={visible}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</div>
</ConfigProvider>
);
};

ReactDOM.render(<App />, mountNode);
```
115 changes: 69 additions & 46 deletions components/drawer/index.tsx
Expand Up @@ -6,7 +6,7 @@ import classNames from 'classnames';
import omit from 'omit.js';

import { ConfigConsumerProps } from '../config-provider';
import { withConfigConsumer } from '../config-provider/context';
import { withConfigConsumer, ConfigConsumer } from '../config-provider/context';
import { tuple } from '../_util/type';

const DrawerContext = React.createContext<Drawer | null>(null);
Expand Down Expand Up @@ -253,54 +253,77 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS

// render Provider for Multi-level drawer
renderProvider = (value: Drawer) => {
const { prefixCls, placement, className, mask, direction, visible, ...rest } = this.props;
this.parentDrawer = value;
const drawerClassName = classNames(className, {
'no-mask': !mask,
[`${prefixCls}-rtl`]: direction === 'rtl',
});
const offsetStyle = mask ? this.getOffsetStyle() : {};

return (
<DrawerContext.Provider value={this}>
<RcDrawer
handler={false}
{...omit(rest, [
'zIndex',
'style',
'closable',
'destroyOnClose',
'drawerStyle',
'headerStyle',
'bodyStyle',
'footerStyle',
'footer',
'locale',
'title',
'push',
'visible',
'getPopupContainer',
'rootPrefixCls',
'getPrefixCls',
'renderEmpty',
'csp',
'pageHeader',
'autoInsertSpaceInButton',
'width',
'height',
'dropdownMatchSelectWidth',
])}
{...offsetStyle}
prefixCls={prefixCls}
open={visible}
showMask={mask}
placement={placement}
style={this.getRcDrawerStyle()}
className={drawerClassName}
>
{this.renderBody()}
</RcDrawer>
</DrawerContext.Provider>
<ConfigConsumer>
{({ getPopupContainer, getPrefixCls }) => {
const {
prefixCls: customizePrefixCls,
placement,
className,
mask,
direction,
visible,
...rest
} = this.props;

const prefixCls = getPrefixCls('select', customizePrefixCls);
const drawerClassName = classNames(className, {
'no-mask': !mask,
[`${prefixCls}-rtl`]: direction === 'rtl',
});
const offsetStyle = mask ? this.getOffsetStyle() : {};

return (
<DrawerContext.Provider value={this}>
<RcDrawer
handler={false}
{...omit(rest, [
'zIndex',
'style',
'closable',
'destroyOnClose',
'drawerStyle',
'headerStyle',
'bodyStyle',
'footerStyle',
'footer',
'locale',
'title',
'push',
'visible',
'getPopupContainer',
'rootPrefixCls',
'getPrefixCls',
'renderEmpty',
'csp',
'pageHeader',
'autoInsertSpaceInButton',
'width',
'height',
'dropdownMatchSelectWidth',
])}
getContainer={
// 有可能为 false,所以不能直接判断
rest.getContainer === undefined
? () => (getPopupContainer ? getPopupContainer(document.body) : undefined)
: rest.getContainer
}
{...offsetStyle}
prefixCls={prefixCls}
open={visible}
showMask={mask}
placement={placement}
style={this.getRcDrawerStyle()}
className={drawerClassName}
>
{this.renderBody()}
</RcDrawer>
</DrawerContext.Provider>
);
}}
</ConfigConsumer>
);
};

Expand Down