add wrapClassName and multi-level-drawer test

components/drawer/__tests__/Drawer.test.js

@@ -54,4 +54,18 @@ describe('Drawer', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('wrapClassName is test_drawer', () => {
+    const wrapper = render(
+      <Drawer
+        destroyOnClose
+        visible={false}
+        wrapClassName="test_drawer"
+        getContainer={false}
+      >
+        Here is content of Drawer
+      </Drawer>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });

components/drawer/__tests__/MultiDrawer.test.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Drawer from '..';
+import Button from '../../button';
+
+class MultiDrawer extends React.Component {
+  state = { visible: false, childrenDrawer: false };
+
+  showDrawer = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  showChildrenDrawer = () => {
+    this.setState({
+      childrenDrawer: true,
+    });
+  };
+
+  onChildrenDrawerClose = () => {
+    this.setState({
+      childrenDrawer: false,
+    });
+  };
+
+  render() {
+    const { childrenDrawer, visible } = this.state;
+    const { placement } = this.props;
+    return (
+      <div>
+        <Button type="primary" id="open_drawer" onClick={this.showDrawer}>
+          Open drawer
+        </Button>
+        <Drawer
+          title="Multi-level drawer"
+          wrapClassName="test_drawer"
+          width={520}
+          closable={false}
+          onClose={this.onClose}
+          getContainer={false}
+          placement={placement}
+          visible={visible}
+        >
+          <Button type="primary" id="open_two_drawer" onClick={this.showChildrenDrawer}>
+              Two-level drawer
+          </Button>
+          <Drawer
+            title="Two-level Drawer"
+            width={320}
+            closable={false}
+            getContainer={false}
+            placement={placement}
+            onClose={this.onChildrenDrawerClose}
+            visible={childrenDrawer}
+          >
+            <div id="two_drawer_text">
+              This is two-level drawer
+            </div>
+          </Drawer>
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              width: '100%',
+              borderTop: '1px solid #e8e8e8',
+              padding: '10px 16px',
+              textAlign: 'right',
+              left: 0,
+              background: '#fff',
+              borderRadius: '0 0 4px 4px',
+            }}
+          >
+            <Button
+              style={{
+                marginRight: 8,
+              }}
+              onClick={this.onClose}
+            >
+              Cancel
+            </Button>
+            <Button onClick={this.onClose} type="primary">
+              Submit
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+    );
+  }
+}
+
+describe('Drawer', () => {
+  it('render right MultiDrawer', () => {
+    const wrapper = mount(<MultiDrawer placement="right" />);
+    wrapper.find('button#open_drawer').simulate('click');
+    wrapper.find('button#open_two_drawer').simulate('click');
+    const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    expect(translateX).toEqual('translateX(-180px)');
+    expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
+  });
+
+  it('render right MultiDrawer', () => {
+    const wrapper = mount(<MultiDrawer placement="left" />);
+    wrapper.find('button#open_drawer').simulate('click');
+    wrapper.find('button#open_two_drawer').simulate('click');
+    const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    expect(translateX).toEqual('translateX(180px)');
+    expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
+  });
+});

components/drawer/__tests__/__snapshots__/Drawer.test.js.snap

@@ -164,3 +164,44 @@ exports[`Drawer render correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Drawer wrapClassName is test_drawer 1`] = `
+<div
+  class=""
+>
+  <div
+    class="ant-drawer ant-drawer-right test_drawer"
+  >
+    <div
+      class="ant-drawer-mask"
+    />
+    <div
+      class="ant-drawer-content-wrapper"
+      style="transform:translateX(100%);width:256px"
+    >
+      <div
+        class="ant-drawer-content"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+          style="overflow:auto;height:100%;opacity:0;transition:opacity .3s"
+        >
+          <button
+            aria-label="Close"
+            class="ant-drawer-close"
+          >
+            <span
+              class="ant-drawer-close-x"
+            />
+          </button>
+          <div
+            class="ant-drawer-body"
+          >
+            Here is content of Drawer
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/drawer/demo/multi-level-drawer.md

@@ -52,6 +52,7 @@ class App extends React.Component {
         <Drawer
           title="Multi-level drawer"
           width={520}
+          wrapClassName="test_drawer"
           closable={false}
           onClose={this.onClose}
           visible={this.state.visible}
@@ -60,7 +61,7 @@ class App extends React.Component {
               Two-level drawer
           </Button>
           <Drawer
-            title="Food"
+            title="Two-level Drawer"
             width={320}
             closable={false}
             onClose={this.onChildrenDrawerClose}

components/drawer/index.tsx

@@ -125,11 +125,13 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
     }
     this.destoryClose = false;
     const { placement } = this.props;
+
     const containerStyle: React.CSSProperties = placement === 'left'
       || placement === 'right' ? {
         overflow: 'auto',
         height: '100%',
       } : {};
+
     const isDestroyOnClose = this.getDestoryOnClose();
     if (isDestroyOnClose) {
       // Increase the opacity transition, delete children after closing.
@@ -191,7 +193,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
           showMask={this.props.mask}
           placement={placement}
           style={RcDrawerStyle}
-          class={this.props.wrapClassName}
+          className={this.props.wrapClassName}
         >
           {this.renderBody()}
         </RcDrawer>