Drawer wrapClassName => className

components/drawer/index.en-US.md

 ---
 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) | - |

components/drawer/index.tsx

@@ -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>

components/drawer/index.zh-CN.md

@@ -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) | 无 |