test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

Drawer wrapClassName => className

Browse Source
This commit is contained in:
afc163 2018-08-05 11:56:40 +08:00
parent 5cac2fab4a
commit 510add6305
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/drawer/index.en-US.md
View File

@ -1,7 +1,7 @@
---
type: Feedback
category: Components
subtitle:
subtitle:
title: Drawer
---
@ -27,7 +27,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
| title | The title for Drawer. | string\|ReactNode | - |
| visible | Whether the Drawer dialog is visible or not. | boolean | false |
| width | Width of the Drawer dialog. | string\|number | 256 |
| wrapClassName | The class name of the container of the Drawer dialog. | string | - |
| className | The class name of the container of the Drawer dialog. | string | - |
| zIndex | The `z-index` of the Drawer. | Number | 1000 |
| placement | The placement of the Drawer. | 'left' \| 'right' | 'right'
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |

9
components/drawer/index.tsx
View File

@ -2,6 +2,7 @@ import * as React from 'react';
import RcDrawer from 'rc-drawer';
import PropTypes from 'prop-types';
import createReactContext, { Context } from 'create-react-context';
import warning from 'warning';
import classNames from 'classnames';
const DrawerContext: Context<Drawer | null> = createReactContext(null);
@ -23,6 +24,7 @@ export interface DrawerProps {
title?: React.ReactNode;
visible?: boolean;
width?: number | string;
/* deprecated, use className instead */
wrapClassName?: string;
zIndex?: number;
prefixCls?: string;
@ -53,7 +55,6 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
title: PropTypes.node,
visible: PropTypes.bool,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
wrapClassName: PropTypes.string,
zIndex: PropTypes.number,
prefixCls: PropTypes.string,
placement: PropTypes.string,
@ -178,7 +179,8 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
);
}
renderProvider = (value: Drawer) => {
let { zIndex, style, placement, className, ...rest } = this.props;
let { zIndex, style, placement, className, wrapClassName, ...rest } = this.props;
warning(wrapClassName === undefined, 'wrapClassName is deprecated, please use className instead.');
const RcDrawerStyle = this.state.push
? {
zIndex,
@ -186,7 +188,6 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
}
: { zIndex };
this.praentDrawer = value;
const drawerClassNames = classNames(this.props.wrapClassName, className);
return (
<DrawerContext.Provider value={this}>
<RcDrawer
@ -197,7 +198,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
showMask={this.props.mask}
placement={placement}
style={RcDrawerStyle}
className={drawerClassNames}
className={classNames(wrapClassName, className)}
>
{this.renderBody()}
</RcDrawer>

2
components/drawer/index.zh-CN.md
View File

@ -28,7 +28,7 @@ title: Drawer
| title | 标题 | string \| ReactNode | - |
| visible | Drawer 是否可见 | boolean | - |
| width | 宽度 | string \| number | 256 |
| wrapClassName | 对话框外层容器的类名 | string | - |
| className | 对话框外层容器的类名 | string | - |
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
| placement | 抽屉的方向 | 'left' \| 'right' | 'right'
| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |