add top MultiDrawer

components/drawer/__tests__/MultiDrawer.test.js

@@ -42,7 +42,6 @@ class MultiDrawer extends React.Component {
           title="Multi-level drawer"
           className="test_drawer"
           width={520}
-          closable={false}
           onClose={this.onClose}
           getContainer={false}
           placement={placement}
@@ -54,7 +53,7 @@ class MultiDrawer extends React.Component {
           <Drawer
             title="Two-level Drawer"
             width={320}
-            closable={false}
+            className="Two-level"
             getContainer={false}
             placement={placement}
             onClose={this.onChildrenDrawerClose}
@@ -112,5 +111,16 @@ describe('Drawer', () => {
     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);
+    wrapper.find('.Two-level .ant-drawer-close').simulate('click');
+    expect(wrapper.state().childrenDrawer).toBe(false);
+  });
+
+  it('render left MultiDrawer', () => {
+    const wrapper = mount(<MultiDrawer placement="top" />);
+    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('translateY(180px)');
+    expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
   });
 });

components/drawer/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
 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';
@@ -13,6 +13,7 @@ type EventType =
 
 type getContainerfunc = () => HTMLElement;
 
+type placementType =  'top' | 'right' | 'bottom' | 'left';
 export interface DrawerProps {
   closable?: boolean;
   destroyOnClose?: boolean;
@@ -30,7 +31,7 @@ export interface DrawerProps {
   zIndex?: number;
   prefixCls?: string;
   push?: boolean;
-  placement?: 'top' | 'right' | 'bottom' | 'left';
+  placement?: placementType;
   onClose?: (e: EventType) => void;
   className?: string;
 }
@@ -125,6 +126,16 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
 
   getDestoryOnClose = () => (this.props.destroyOnClose && !this.props.visible);
 
+  // get drawar push width or height
+  getPushTransform = (placement?: placementType) => {
+    if (placement === 'left' || placement === 'right') {
+      return `translateX(${placement === 'left' ? 180 : -180}px)`;
+    }
+    if (placement === 'top' || placement === 'bottom') {
+      return `translateY(${placement === 'top' ? 180 : -180}px)`;
+    }
+  }
+  // render drawer body dom
   renderBody = () => {
     if (this.destoryClose && !this.props.visible) {
       return null;
@@ -139,12 +150,15 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
       } : {};
 
     const isDestroyOnClose = this.getDestoryOnClose();
+
     if (isDestroyOnClose) {
       // Increase the opacity transition, delete children after closing.
       containerStyle.opacity = 0;
       containerStyle.transition = 'opacity .3s';
     }
     const { prefixCls, title, closable } = this.props;
+
+    // is have header dom
     let header;
     if (title) {
       header = (
@@ -153,6 +167,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
         </div>
       );
     }
+    // is have closer button
     let closer;
     if (closable) {
       closer = (
@@ -180,15 +195,22 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
       </div>
     );
   }
+
+  getRcDrawerStyle = () => {
+    const { zIndex, placement } = this.props;
+    return this.state.push
+    ? {
+      zIndex,
+      transform: this.getPushTransform(placement),
+    }
+    : { zIndex };
+  }
+
+  // render Provider for Multi-level drawe
   renderProvider = (value: Drawer) => {
     let { zIndex, style, placement, className, wrapClassName, width, height, ...rest } = this.props;
     warning(wrapClassName === undefined, 'wrapClassName is deprecated, please use className instead.');
-    const RcDrawerStyle = this.state.push
+
-      ? {
-        zIndex,
-        transform: `translateX(${placement === 'left' ? 180 : -180}px)`,
-      }
-      : { zIndex };
     this.praentDrawer = value;
     const offsetStyle: any = {};
     if (placement === 'left' || placement === 'right') {
@@ -199,14 +221,14 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
     return (
       <DrawerContext.Provider value={this}>
         <RcDrawer
+          handler={false}
           {...rest}
           {...offsetStyle}
-          handler={false}
           open={this.props.visible}
           onMaskClick={this.onMaskClick}
           showMask={this.props.mask}
           placement={placement}
-          style={RcDrawerStyle}
+          style={this.getRcDrawerStyle()}
           className={classNames(wrapClassName, className)}
         >
           {this.renderBody()}
@@ -214,6 +236,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
       </DrawerContext.Provider>
     );
   }
+
   render() {
     return (
       <DrawerContext.Consumer>{this.renderProvider}</DrawerContext.Consumer>

components/drawer/style/drawer.less

@@ -92,7 +92,7 @@
       &-mask {
         opacity: 0.3;
         height: 100%;
-        animation: antdDrawerFadeIn @animation-duration-slow  @ease-base-out;
+        animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
         transition: none;
       }
     }
@@ -181,8 +181,6 @@
   }
   &-open {
     transition: transform @animation-duration-slow @ease-base-out;
-      transition: transform @animation-duration-slow @ease-base-out;
-    }
     &-content {
       box-shadow: @shadow-2;
     }