rc-drawer - npm Package Compare versions

Comparing version 0.4.11 to 1.2.0

es/Drawer.js

 import _defineProperty from 'babel-runtime/helpers/defineProperty';
-import _extends from 'babel-runtime/helpers/extends';
-import _typeof from 'babel-runtime/helpers/typeof';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
@@ -9,23 +7,12 @@ import _createClass from 'babel-runtime/helpers/createClass';
 import React from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
+import classnames from 'classnames';
+import { dataToArray, transitionEnd } from './utils';
 
-function getOffset(ele) {
-  var el = ele;
-  var _x = 0;
-  var _y = 0;
-  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
-    _x += el.offsetLeft - el.scrollLeft;
-    _y += el.offsetTop - el.scrollTop;
-    el = el.offsetParent;
-  }
-  return { top: _y, left: _x };
-}
+var windowIsUndefined = typeof window === 'undefined';
 
-var CANCEL_DISTANCE_ON_SCROLL = 20;
+var Drawer = function (_React$PureComponent) {
+  _inherits(Drawer, _React$PureComponent);
 
-var Drawer = function (_React$Component) {
-  _inherits(Drawer, _React$Component);
-
   function Drawer(props) {
@@ -36,447 +23,384 @@ _classCallCheck(this, Drawer);
 
-    _this.onOverlayClicked = function () {
-      if (_this.props.open) {
-        // see https://github.com/react-component/drawer/issues/9
-        setTimeout(function () {
-          _this.props.onOpenChange(false, { overlayClicked: true });
-        }, 0);
-      }
+    _initialiseProps.call(_this);
+
+    if (props.onIconClick || props.parent || props.iconChild || props.width) {
+      console.warn('rc-drawer-menu API has been changed, please look at the releases, ' + 'https://github.com/react-component/drawer-menu/releases');
+    }
+    _this.state = {
+      open: props.open !== undefined ? props.open : !!props.defaultOpen
     };
+    return _this;
+  }
 
-    _this.onTouchStart = function (ev) {
-      // filter out if a user starts swiping with a second finger
-      if (!_this.isTouching()) {
-        var touch = ev.targetTouches[0];
-        _this.setState({
-          touchIdentifier: !_this.notTouch ? touch.identifier : null,
-          touchStartX: touch.clientX,
-          touchStartY: touch.clientY,
-          touchCurrentX: touch.clientX,
-          touchCurrentY: touch.clientY
+  _createClass(Drawer, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.getParentAndLevelDom(this.props);
+      if (this.props.getContainer || this.props.parent) {
+        this.container = this.defaultGetContainer();
+      }
+      this.forceUpdate();
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var open = nextProps.open,
+          placement = nextProps.placement;
+
+      if (open !== undefined && open !== this.props.open) {
+        this.isOpenChange = true;
+        this.setState({
+          open: open
         });
       }
-    };
-
-    _this.onTouchMove = function (ev) {
-      // ev.preventDefault(); // cannot touchmove with FastClick
-      if (_this.isTouching()) {
-        for (var ind = 0; ind < ev.targetTouches.length; ind++) {
-          // we only care about the finger that we are tracking
-          if (ev.targetTouches[ind].identifier === _this.state.touchIdentifier) {
-            _this.setState({
-              touchCurrentX: ev.targetTouches[ind].clientX,
-              touchCurrentY: ev.targetTouches[ind].clientY
-            });
-            break;
-          }
+      if (placement !== this.props.placement) {
+        // test 的 bug, 有动画过场，删除 dom
+        this.contextDom = null;
+      }
+      if (this.props.level !== nextProps.level) {
+        this.getParentAndLevelDom(nextProps);
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.container) {
+        this.setLevelDomTransform(false, true);
+        // 拦不住。。直接删除；
+        if (this.props.getContainer) {
+          this.container.parentNode.removeChild(this.container);
         }
       }
-    };
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
 
-    _this.onTouchEnd = function () {
-      _this.notTouch = false;
-      if (_this.isTouching()) {
-        // trigger a change to open if sidebar has been dragged beyond dragToggleDistance
-        var touchWidth = _this.touchSidebarWidth();
+      var children = this.getChildToRender();
+      if (!this.props.getContainer) {
+        return React.createElement(
+          'div',
+          { className: this.props.wrapperClassName, ref: function ref(c) {
+              _this2.container = c;
+            } },
+          children
+        );
+      }
+      if (!this.container) {
+        return null;
+      }
+      return createPortal(children, this.container);
+    }
+  }]);
 
-        if (_this.props.open && touchWidth < _this.state.sidebarWidth - _this.props.dragToggleDistance || !_this.props.open && touchWidth > _this.props.dragToggleDistance) {
-          _this.props.onOpenChange(!_this.props.open);
-        }
+  return Drawer;
+}(React.PureComponent);
 
-        var touchHeight = _this.touchSidebarHeight();
+Drawer.propTypes = {
+  wrapperClassName: PropTypes.string,
+  open: PropTypes.bool,
+  bodyStyle: PropTypes.object,
+  defaultOpen: PropTypes.bool,
+  placement: PropTypes.string,
+  level: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  levelTransition: PropTypes.string,
+  getContainer: PropTypes.string,
+  handleChild: PropTypes.any,
+  handleStyle: PropTypes.object,
+  onChange: PropTypes.func,
+  onMaskClick: PropTypes.func,
+  onHandleClick: PropTypes.func,
+  showMask: PropTypes.bool,
+  maskStyle: PropTypes.object
+};
+Drawer.defaultProps = {
+  className: '',
+  prefixCls: 'drawer',
+  placement: 'left',
+  getContainer: 'body',
+  level: 'all',
+  levelTransition: 'transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86)',
+  onChange: function onChange() {},
+  onMaskClick: function onMaskClick() {},
+  onHandleClick: function onHandleClick() {},
+  handleChild: React.createElement('i', { className: 'drawer-handle-icon' }),
+  handleStyle: {},
+  showMask: true,
+  maskStyle: {}
+};
 
-        if (_this.props.open && touchHeight < _this.state.sidebarHeight - _this.props.dragToggleDistance || !_this.props.open && touchHeight > _this.props.dragToggleDistance) {
-          _this.props.onOpenChange(!_this.props.open);
-        }
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
 
-        _this.setState({
-          touchIdentifier: null,
-          touchStartX: null,
-          touchStartY: null,
-          touchCurrentX: null,
-          touchCurrentY: null
-        });
-      }
-    };
+  this.levelDom = [];
+  this.contextDom = null;
+  this.maskDom = null;
+  this.handleDom = null;
+  this.mousePos = null;
 
-    _this.onScroll = function () {
-      if (_this.isTouching() && _this.inCancelDistanceOnScroll()) {
-        _this.setState({
-          touchIdentifier: null,
-          touchStartX: null,
-          touchStartY: null,
-          touchCurrentX: null,
-          touchCurrentY: null
+  this.getParentAndLevelDom = function (props) {
+    if (windowIsUndefined) {
+      return;
+    }
+    var level = props.level,
+        getContainer = props.getContainer;
+
+    _this3.levelDom = [];
+    _this3.parent = getContainer && document.querySelectorAll(getContainer)[0] || _this3.container.parentNode;
+    if (level === 'all') {
+      var children = Array.prototype.slice.call(_this3.parent.children);
+      children.forEach(function (child) {
+        if (child.nodeName !== 'SCRIPT' && child.nodeName !== 'STYLE' && child !== _this3.container) {
+          _this3.levelDom.push(child);
+        }
+      });
+    } else if (level) {
+      dataToArray(level).forEach(function (key) {
+        document.querySelectorAll(key).forEach(function (item) {
+          _this3.levelDom.push(item);
         });
-      }
-    };
+      });
+    }
+  };
 
-    _this.inCancelDistanceOnScroll = function () {
-      var cancelDistanceOnScroll = void 0;
-      switch (_this.props.position) {
-        case 'right':
-          cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentX - _this.state.touchStartX) < CANCEL_DISTANCE_ON_SCROLL;
-          break;
-        case 'bottom':
-          cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentY - _this.state.touchStartY) < CANCEL_DISTANCE_ON_SCROLL;
-          break;
-        case 'top':
-          cancelDistanceOnScroll = Math.abs(_this.state.touchStartY - _this.state.touchCurrentY) < CANCEL_DISTANCE_ON_SCROLL;
-          break;
-        case 'left':
-        default:
-          cancelDistanceOnScroll = Math.abs(_this.state.touchStartX - _this.state.touchCurrentX) < CANCEL_DISTANCE_ON_SCROLL;
-      }
-      return cancelDistanceOnScroll;
-    };
+  this.trnasitionEnd = function (e) {
+    var dom = e.target;
+    dom.removeEventListener(transitionEnd, _this3.trnasitionEnd);
+    dom.style.transition = '';
+  };
 
-    _this.isTouching = function () {
-      return _this.state.touchIdentifier !== null;
+  this.onTouchEnd = function (e, close) {
+    if (_this3.props.open !== undefined) {
+      return;
+    }
+    var open = close || _this3.state.open;
+    _this3.isOpenChange = true;
+    _this3.setState({
+      open: !open
+    });
+  };
+
+  this.onMaskTouchEnd = function (e) {
+    _this3.props.onMaskClick(e);
+    _this3.onTouchEnd(e, true);
+  };
+
+  this.onIconTouchEnd = function (e) {
+    _this3.props.onHandleClick(e);
+    _this3.onTouchEnd(e);
+  };
+
+  this.onScrollTouchStart = function (e) {
+    if (e.touches.length > 1) {
+      return;
+    }
+    var touchs = e.touches[0];
+    _this3.mousePos = {
+      x: touchs.pageX,
+      y: touchs.pageY
     };
+  };
 
-    _this.saveSidebarSize = function () {
-      var sidebar = ReactDOM.findDOMNode(_this.refs.sidebar);
-      var width = sidebar.offsetWidth;
-      var height = sidebar.offsetHeight;
-      var sidebarTop = getOffset(ReactDOM.findDOMNode(_this.refs.sidebar)).top;
-      var dragHandleTop = getOffset(ReactDOM.findDOMNode(_this.refs.dragHandle)).top;
+  this.onScrollTouchEnd = function () {
+    _this3.mousePos = null;
+  };
 
-      if (width !== _this.state.sidebarWidth) {
-        _this.setState({ sidebarWidth: width });
+  this.getScollDom = function (dom) {
+    var doms = [];
+    var setScrollDom = function setScrollDom(d) {
+      if (!d) {
+        return;
       }
-      if (height !== _this.state.sidebarHeight) {
-        _this.setState({ sidebarHeight: height });
+      if (d.scrollHeight > d.clientHeight || d.scrollWidth > d.clientWidth) {
+        doms.push(d);
       }
-      if (sidebarTop !== _this.state.sidebarTop) {
-        _this.setState({ sidebarTop: sidebarTop });
+      if (d !== _this3.contextDom && d !== _this3.handleDom && d !== _this3.maskDom) {
+        setScrollDom(d.parentNode);
       }
-      if (dragHandleTop !== _this.state.dragHandleTop) {
-        _this.setState({ dragHandleTop: dragHandleTop });
-      }
     };
+    setScrollDom(dom);
+    return doms[doms.length - 1];
+  };
 
-    _this.touchSidebarWidth = function () {
-      // if the sidebar is open and start point of drag is inside the sidebar
-      // we will only drag the distance they moved their finger
-      // otherwise we will move the sidebar to be below the finger.
-      if (_this.props.position === 'right') {
-        if (_this.props.open && window.innerWidth - _this.state.touchStartX < _this.state.sidebarWidth) {
-          if (_this.state.touchCurrentX > _this.state.touchStartX) {
-            return _this.state.sidebarWidth + _this.state.touchStartX - _this.state.touchCurrentX;
-          }
-          return _this.state.sidebarWidth;
-        }
-        return Math.min(window.innerWidth - _this.state.touchCurrentX, _this.state.sidebarWidth);
-      }
+  this.getIsHandleDom = function (dom) {
+    if (dom.className === _this3.props.className + '-handle') {
+      return true;
+    }
+    if (dom.parentNode) {
+      return _this3.getIsHandleDom(dom.parentNode);
+    }
+    return false;
+  };
 
-      if (_this.props.position === 'left') {
-        if (_this.props.open && _this.state.touchStartX < _this.state.sidebarWidth) {
-          if (_this.state.touchCurrentX > _this.state.touchStartX) {
-            return _this.state.sidebarWidth;
-          }
-          return _this.state.sidebarWidth - _this.state.touchStartX + _this.state.touchCurrentX;
-        }
-        return Math.min(_this.state.touchCurrentX, _this.state.sidebarWidth);
+  this.removeScroll = function (e) {
+    if (!_this3.props.showMask) {
+      return;
+    }
+    var dom = e.target;
+    var scrollDom = _this3.getScollDom(dom);
+    if (dom === _this3.maskDom || _this3.getIsHandleDom(dom) || !scrollDom) {
+      if (e.preventDefault) {
+        e.preventDefault();
       }
-    };
+      e.returnValue = false;
+      return;
+    }
 
-    _this.touchSidebarHeight = function () {
-      // if the sidebar is open and start point of drag is inside the sidebar
-      // we will only drag the distance they moved their finger
-      // otherwise we will move the sidebar to be below the finger.
-      if (_this.props.position === 'bottom') {
-        if (_this.props.open && window.innerHeight - _this.state.touchStartY < _this.state.sidebarHeight) {
-          if (_this.state.touchCurrentY > _this.state.touchStartY) {
-            return _this.state.sidebarHeight + _this.state.touchStartY - _this.state.touchCurrentY;
-          }
-          return _this.state.sidebarHeight;
-        }
-        return Math.min(window.innerHeight - _this.state.touchCurrentY, _this.state.sidebarHeight);
+    var y = e.deltaY;
+    var x = e.deltaX;
+    if (e.type === 'touchmove') {
+      if (e.touches.length > 1 || !_this3.mousePos) {
+        return;
       }
-
-      if (_this.props.position === 'top') {
-        var touchStartOffsetY = _this.state.touchStartY - _this.state.sidebarTop;
-        if (_this.props.open && touchStartOffsetY < _this.state.sidebarHeight) {
-          if (_this.state.touchCurrentY > _this.state.touchStartY) {
-            return _this.state.sidebarHeight;
-          }
-          return _this.state.sidebarHeight - _this.state.touchStartY + _this.state.touchCurrentY;
-        }
-        return Math.min(_this.state.touchCurrentY - _this.state.dragHandleTop, _this.state.sidebarHeight);
+      var touches = e.touches[0];
+      // 上滑为正，下滑为负
+      y = _this3.mousePos.y - touches.pageY;
+      x = _this3.mousePos.x - touches.pageX;
+    }
+    // 竖向
+    var scrollTop = scrollDom.scrollTop;
+    var height = scrollDom.clientHeight;
+    var scrollHeight = scrollDom.scrollHeight;
+    var isScrollY = scrollHeight - height > 2;
+    var maxOrMinScrollY = isScrollY && (scrollTop <= 0 && y < 0 || scrollTop + height >= scrollHeight && y > 0);
+    // 横向
+    var width = scrollDom.clientWidth;
+    var scrollLeft = scrollDom.scrollLeft;
+    var scrollWidth = scrollDom.scrollWidth;
+    var isScrollX = scrollWidth - width > 2;
+    var maxOrMinScrollX = scrollWidth - width > 2 && (scrollLeft <= 0 && x < 0 || scrollLeft + width >= scrollWidth && x > 0);
+    if (!isScrollY && !isScrollX || maxOrMinScrollY || maxOrMinScrollX) {
+      if (e.preventDefault) {
+        e.preventDefault();
       }
-    };
+      e.returnValue = false;
+      return;
+    }
+  };
 
-    _this.renderStyle = function (_ref) {
-      var sidebarStyle = _ref.sidebarStyle,
-          isTouching = _ref.isTouching,
-          overlayStyle = _ref.overlayStyle,
-          contentStyle = _ref.contentStyle;
+  this.setLevelDomTransform = function (open, openTransition, placementName, value) {
+    var _props = _this3.props,
+        placement = _props.placement,
+        levelTransition = _props.levelTransition,
+        onChange = _props.onChange;
 
-      if (_this.props.position === 'right' || _this.props.position === 'left') {
-        sidebarStyle.transform = 'translateX(0%)';
-        sidebarStyle.WebkitTransform = 'translateX(0%)';
-        if (isTouching) {
-          var percentage = _this.touchSidebarWidth() / _this.state.sidebarWidth;
-          // slide open to what we dragged
-          if (_this.props.position === 'right') {
-            sidebarStyle.transform = 'translateX(' + (1 - percentage) * 100 + '%)';
-            sidebarStyle.WebkitTransform = 'translateX(' + (1 - percentage) * 100 + '%)';
-          }
-          if (_this.props.position === 'left') {
-            sidebarStyle.transform = 'translateX(-' + (1 - percentage) * 100 + '%)';
-            sidebarStyle.WebkitTransform = 'translateX(-' + (1 - percentage) * 100 + '%)';
-          }
-          // fade overlay to match distance of drag
-          overlayStyle.opacity = percentage;
-          overlayStyle.visibility = 'visible';
-        }
-        if (contentStyle) {
-          contentStyle[_this.props.position] = _this.state.sidebarWidth + 'px';
-        }
+    _this3.levelDom.forEach(function (dom) {
+      if (_this3.isOpenChange || openTransition) {
+        dom.style.transition = levelTransition;
+        dom.addEventListener(transitionEnd, _this3.trnasitionEnd);
       }
-      if (_this.props.position === 'top' || _this.props.position === 'bottom') {
-        sidebarStyle.transform = 'translateY(0%)';
-        sidebarStyle.WebkitTransform = 'translateY(0%)';
-        if (isTouching) {
-          var _percentage = _this.touchSidebarHeight() / _this.state.sidebarHeight;
-          // slide open to what we dragged
-          if (_this.props.position === 'bottom') {
-            sidebarStyle.transform = 'translateY(' + (1 - _percentage) * 100 + '%)';
-            sidebarStyle.WebkitTransform = 'translateY(' + (1 - _percentage) * 100 + '%)';
+      var placementPos = placement === 'left' || placement === 'top' ? value : -value;
+      dom.style.transform = open ? placementName + '(' + placementPos + 'px)' : '';
+    });
+    // 处理 body 滚动
+    if (!windowIsUndefined) {
+      var passiveSupported = false;
+      try {
+        window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
+          get: function get() {
+            passiveSupported = true;
           }
-          if (_this.props.position === 'top') {
-            sidebarStyle.transform = 'translateY(-' + (1 - _percentage) * 100 + '%)';
-            sidebarStyle.WebkitTransform = 'translateY(-' + (1 - _percentage) * 100 + '%)';
-          }
-          // fade overlay to match distance of drag
-          overlayStyle.opacity = _percentage;
-          overlayStyle.visibility = 'visible';
-        }
-        if (contentStyle) {
-          contentStyle[_this.props.position] = _this.state.sidebarHeight + 'px';
-        }
+        }));
+      } catch (err) {
+        console.log(err);
       }
-    };
-
-    _this.state = {
-      // the detected width of the sidebar in pixels
-      sidebarWidth: 0,
-      sidebarHeight: 0,
-      sidebarTop: 0,
-      dragHandleTop: 0,
-
-      // keep track of touching params
-      touchIdentifier: null,
-      touchStartX: null,
-      touchStartY: null,
-      touchCurrentX: null,
-      touchCurrentY: null,
-
-      // if touch is supported by the browser
-      touchSupported: (typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && 'ontouchstart' in window
-    };
-    return _this;
-  }
-
-  _createClass(Drawer, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.saveSidebarSize();
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      // filter out the updates when we're touching
-      if (!this.isTouching()) {
-        this.saveSidebarSize();
+      var passive = passiveSupported ? { passive: false } : false;
+      if (open) {
+        document.body.addEventListener('mousewheel', _this3.removeScroll);
+        document.body.addEventListener('touchmove', _this3.removeScroll, passive);
+      } else {
+        document.body.removeEventListener('mousewheel', _this3.removeScroll);
+        document.body.removeEventListener('touchmove', _this3.removeScroll, passive);
       }
     }
+    if (onChange && _this3.isOpenChange) {
+      onChange(open);
+      _this3.isOpenChange = false;
+    }
+  };
 
-    // This logic helps us prevents the user from sliding the sidebar horizontally
-    // while scrolling the sidebar vertically. When a scroll event comes in, we're
-    // cancelling the ongoing gesture if it did not move horizontally much.
+  this.getChildToRender = function () {
+    var _classnames;
 
+    var open = _this3.props.open !== undefined ? _this3.props.open : _this3.state.open;
+    var _props2 = _this3.props,
+        className = _props2.className,
+        prefixCls = _props2.prefixCls,
+        style = _props2.style,
+        placement = _props2.placement,
+        children = _props2.children,
+        handleChild = _props2.handleChild,
+        handleStyle = _props2.handleStyle,
+        showMask = _props2.showMask,
+        maskStyle = _props2.maskStyle;
 
-    // True if the on going gesture X distance is less than the cancel distance
-
-
-    // calculate the sidebarWidth based on current touch info
-
-    // calculate the sidebarHeight based on current touch info
-
-  }, {
-    key: 'render',
-    value: function render() {
-      var _rootCls,
-          _this2 = this;
-
-      var _props = this.props,
-          className = _props.className,
-          style = _props.style,
-          prefixCls = _props.prefixCls,
-          position = _props.position,
-          transitions = _props.transitions,
-          touch = _props.touch,
-          enableDragHandle = _props.enableDragHandle,
-          sidebar = _props.sidebar,
-          children = _props.children,
-          docked = _props.docked,
-          open = _props.open;
-
-
-      var sidebarStyle = _extends({}, this.props.sidebarStyle);
-      var contentStyle = _extends({}, this.props.contentStyle);
-      var overlayStyle = _extends({}, this.props.overlayStyle);
-
-      var rootCls = (_rootCls = {}, _defineProperty(_rootCls, className, !!className), _defineProperty(_rootCls, prefixCls, true), _defineProperty(_rootCls, prefixCls + '-' + position, true), _rootCls);
-
-      var rootProps = { style: style };
-      var isTouching = this.isTouching();
-
-      if (isTouching) {
-        this.renderStyle({ sidebarStyle: sidebarStyle, isTouching: true, overlayStyle: overlayStyle });
-      } else if (docked) {
-        if (this.state.sidebarWidth !== 0) {
-          rootCls[prefixCls + '-docked'] = true;
-          this.renderStyle({ sidebarStyle: sidebarStyle, contentStyle: contentStyle });
+    var wrapperClassname = classnames(prefixCls, (_classnames = {}, _defineProperty(_classnames, prefixCls + '-' + placement, true), _defineProperty(_classnames, prefixCls + '-open', open), _defineProperty(_classnames, className, !!className), _classnames));
+    var value = _this3.contextDom ? _this3.contextDom.getBoundingClientRect()[placement === 'left' || placement === 'right' ? 'width' : 'height'] : 0;
+    var placementName = 'translate' + (placement === 'left' || placement === 'right' ? 'X' : 'Y');
+    // 百分比与像素动画不同步，第一次打用后全用像素动画。
+    var defaultValue = !_this3.contextDom ? '100%' : value + 'px';
+    var placementPos = placement === 'left' || placement === 'top' ? '-' + defaultValue : defaultValue;
+    var transform = open ? '' : placementName + '(' + placementPos + ')';
+    if (_this3.isOpenChange === undefined || _this3.isOpenChange) {
+      _this3.setLevelDomTransform(open, false, placementName, value);
+    }
+    return React.createElement(
+      'div',
+      { className: wrapperClassname, style: style },
+      showMask && React.createElement('div', {
+        className: prefixCls + '-mask',
+        onClick: _this3.onMaskTouchEnd,
+        style: maskStyle,
+        ref: function ref(c) {
+          _this3.maskDom = c;
         }
-      } else if (open) {
-        rootCls[prefixCls + '-open'] = true;
-        this.renderStyle({ sidebarStyle: sidebarStyle });
-        overlayStyle.opacity = 1;
-        overlayStyle.visibility = 'visible';
-      }
-
-      if (isTouching || !transitions) {
-        sidebarStyle.transition = 'none';
-        sidebarStyle.WebkitTransition = 'none';
-        contentStyle.transition = 'none';
-        overlayStyle.transition = 'none';
-      }
-
-      var dragHandle = null;
-
-      if (this.state.touchSupported && touch) {
-        if (open) {
-          rootProps.onTouchStart = function (ev) {
-            _this2.notTouch = true;
-            _this2.onTouchStart(ev);
-          };
-          rootProps.onTouchMove = this.onTouchMove;
-          rootProps.onTouchEnd = this.onTouchEnd;
-          rootProps.onTouchCancel = this.onTouchEnd;
-          rootProps.onScroll = this.onScroll;
-        } else if (enableDragHandle) {
-          dragHandle = React.createElement('div', { className: prefixCls + '-draghandle', style: this.props.dragHandleStyle,
-            onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove,
-            onTouchEnd: this.onTouchEnd, onTouchCancel: this.onTouchEnd,
-            ref: 'dragHandle'
-          });
-        }
-      }
-
-      // const evt = {};
-      // // FastClick use touchstart instead of click
-      // if (this.state.touchSupported) {
-      //   evt.onTouchStart = () => {
-      //     this.notTouch = true;
-      //     this.onOverlayClicked();
-      //   };
-      //   evt.onTouchEnd = () => {
-      //     this.notTouch = false;
-      //     this.setState({
-      //       touchIdentifier: null,
-      //     });
-      //   };
-      // } else {
-      //   evt.onClick = this.onOverlayClicked;
-      // }
-
-      return React.createElement(
+      }),
+      React.createElement(
         'div',
-        _extends({ className: classNames(rootCls) }, rootProps),
+        {
+          className: prefixCls + '-content-wrapper',
+          style: { transform: transform }
+        },
         React.createElement(
           'div',
-          { className: prefixCls + '-sidebar', style: sidebarStyle,
-            ref: 'sidebar'
+          {
+            className: prefixCls + '-content',
+            onTouchStart: _this3.onScrollTouchStart,
+            onTouchEnd: _this3.onScrollTouchEnd,
+            ref: function ref(c) {
+              _this3.contextDom = c;
+            }
           },
-          sidebar
+          children
         ),
-        React.createElement('div', { className: prefixCls + '-overlay',
-          style: overlayStyle,
-          role: 'presentation',
-          ref: 'overlay',
-          onClick: this.onOverlayClicked
-        }),
-        React.createElement(
+        handleChild && React.createElement(
           'div',
-          { className: prefixCls + '-content', style: contentStyle,
-            ref: 'content'
+          {
+            className: prefixCls + '-handle',
+            onClick: _this3.onIconTouchEnd,
+            style: handleStyle,
+            ref: function ref(c) {
+              _this3.handleDom = c;
+            }
           },
-          dragHandle,
-          children
+          handleChild
         )
-      );
+      )
+    );
+  };
+
+  this.defaultGetContainer = function () {
+    if (windowIsUndefined) {
+      return null;
     }
-  }]);
+    var container = document.createElement('div');
+    _this3.parent.appendChild(container);
+    if (_this3.props.wrapperClassName) {
+      container.className = _this3.props.wrapperClassName;
+    }
+    return container;
+  };
+};
 
-  return Drawer;
-}(React.Component);
-
-Drawer.propTypes = {
-  prefixCls: PropTypes.string,
-  className: PropTypes.string,
-  // main content to render
-  children: PropTypes.node.isRequired,
-
-  // styles
-  // styles: PropTypes.shape({
-  //   dragHandle: PropTypes.object,
-  // }),
-  style: PropTypes.object,
-  sidebarStyle: PropTypes.object,
-  contentStyle: PropTypes.object,
-  overlayStyle: PropTypes.object,
-  dragHandleStyle: PropTypes.object,
-
-  // sidebar content to render
-  sidebar: PropTypes.node.isRequired,
-
-  // boolean if sidebar should be docked
-  docked: PropTypes.bool,
-
-  // boolean if sidebar should slide open
-  open: PropTypes.bool,
-
-  // boolean if transitions should be disabled
-  transitions: PropTypes.bool,
-
-  // boolean if touch gestures are enabled
-  touch: PropTypes.bool,
-  enableDragHandle: PropTypes.bool,
-
-  // where to place the sidebar
-  position: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
-
-  // distance we have to drag the sidebar to toggle open state
-  dragToggleDistance: PropTypes.number,
-
-  // callback called when the overlay is clicked
-  onOpenChange: PropTypes.func
-};
-Drawer.defaultProps = {
-  prefixCls: 'rc-drawer',
-  sidebarStyle: {},
-  contentStyle: {},
-  overlayStyle: {},
-  dragHandleStyle: {},
-  docked: false,
-  open: false,
-  transitions: true,
-  touch: true,
-  enableDragHandle: true,
-  position: 'left',
-  dragToggleDistance: 30,
-  onOpenChange: function onOpenChange() {}
-};
 export default Drawer;

es/index.js

 // export this package's api
 import Drawer from './Drawer';
+
 export default Drawer;

lib/Drawer.js

@@ -11,10 +11,2 @@ 'use strict';
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _typeof2 = require('babel-runtime/helpers/typeof');
-
-var _typeof3 = _interopRequireDefault(_typeof2);
-
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
@@ -40,2 +32,4 @@
 
+var _reactDom = require('react-dom');
+
 var _propTypes = require('prop-types');
@@ -45,29 +39,15 @@
 
-var _reactDom = require('react-dom');
+var _classnames2 = require('classnames');
 
-var _reactDom2 = _interopRequireDefault(_reactDom);
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _classnames = require('classnames');
+var _utils = require('./utils');
 
-var _classnames2 = _interopRequireDefault(_classnames);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function getOffset(ele) {
-  var el = ele;
-  var _x = 0;
-  var _y = 0;
-  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
-    _x += el.offsetLeft - el.scrollLeft;
-    _y += el.offsetTop - el.scrollTop;
-    el = el.offsetParent;
-  }
-  return { top: _y, left: _x };
-}
+var windowIsUndefined = typeof window === 'undefined';
 
-var CANCEL_DISTANCE_ON_SCROLL = 20;
+var Drawer = function (_React$PureComponent) {
+  (0, _inherits3['default'])(Drawer, _React$PureComponent);
 
-var Drawer = function (_React$Component) {
-  (0, _inherits3['default'])(Drawer, _React$Component);
-
   function Drawer(props) {
@@ -78,447 +58,384 @@ (0, _classCallCheck3['default'])(this, Drawer);
 
-    _this.onOverlayClicked = function () {
-      if (_this.props.open) {
-        // see https://github.com/react-component/drawer/issues/9
-        setTimeout(function () {
-          _this.props.onOpenChange(false, { overlayClicked: true });
-        }, 0);
-      }
+    _initialiseProps.call(_this);
+
+    if (props.onIconClick || props.parent || props.iconChild || props.width) {
+      console.warn('rc-drawer-menu API has been changed, please look at the releases, ' + 'https://github.com/react-component/drawer-menu/releases');
+    }
+    _this.state = {
+      open: props.open !== undefined ? props.open : !!props.defaultOpen
     };
+    return _this;
+  }
 
-    _this.onTouchStart = function (ev) {
-      // filter out if a user starts swiping with a second finger
-      if (!_this.isTouching()) {
-        var touch = ev.targetTouches[0];
-        _this.setState({
-          touchIdentifier: !_this.notTouch ? touch.identifier : null,
-          touchStartX: touch.clientX,
-          touchStartY: touch.clientY,
-          touchCurrentX: touch.clientX,
-          touchCurrentY: touch.clientY
+  (0, _createClass3['default'])(Drawer, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.getParentAndLevelDom(this.props);
+      if (this.props.getContainer || this.props.parent) {
+        this.container = this.defaultGetContainer();
+      }
+      this.forceUpdate();
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var open = nextProps.open,
+          placement = nextProps.placement;
+
+      if (open !== undefined && open !== this.props.open) {
+        this.isOpenChange = true;
+        this.setState({
+          open: open
         });
       }
-    };
-
-    _this.onTouchMove = function (ev) {
-      // ev.preventDefault(); // cannot touchmove with FastClick
-      if (_this.isTouching()) {
-        for (var ind = 0; ind < ev.targetTouches.length; ind++) {
-          // we only care about the finger that we are tracking
-          if (ev.targetTouches[ind].identifier === _this.state.touchIdentifier) {
-            _this.setState({
-              touchCurrentX: ev.targetTouches[ind].clientX,
-              touchCurrentY: ev.targetTouches[ind].clientY
-            });
-            break;
-          }
+      if (placement !== this.props.placement) {
+        // test 的 bug, 有动画过场，删除 dom
+        this.contextDom = null;
+      }
+      if (this.props.level !== nextProps.level) {
+        this.getParentAndLevelDom(nextProps);
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.container) {
+        this.setLevelDomTransform(false, true);
+        // 拦不住。。直接删除；
+        if (this.props.getContainer) {
+          this.container.parentNode.removeChild(this.container);
         }
       }
-    };
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
 
-    _this.onTouchEnd = function () {
-      _this.notTouch = false;
-      if (_this.isTouching()) {
-        // trigger a change to open if sidebar has been dragged beyond dragToggleDistance
-        var touchWidth = _this.touchSidebarWidth();
+      var children = this.getChildToRender();
+      if (!this.props.getContainer) {
+        return _react2['default'].createElement(
+          'div',
+          { className: this.props.wrapperClassName, ref: function ref(c) {
+              _this2.container = c;
+            } },
+          children
+        );
+      }
+      if (!this.container) {
+        return null;
+      }
+      return (0, _reactDom.createPortal)(children, this.container);
+    }
+  }]);
+  return Drawer;
+}(_react2['default'].PureComponent);
 
-        if (_this.props.open && touchWidth < _this.state.sidebarWidth - _this.props.dragToggleDistance || !_this.props.open && touchWidth > _this.props.dragToggleDistance) {
-          _this.props.onOpenChange(!_this.props.open);
-        }
+Drawer.propTypes = {
+  wrapperClassName: _propTypes2['default'].string,
+  open: _propTypes2['default'].bool,
+  bodyStyle: _propTypes2['default'].object,
+  defaultOpen: _propTypes2['default'].bool,
+  placement: _propTypes2['default'].string,
+  level: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].array]),
+  levelTransition: _propTypes2['default'].string,
+  getContainer: _propTypes2['default'].string,
+  handleChild: _propTypes2['default'].any,
+  handleStyle: _propTypes2['default'].object,
+  onChange: _propTypes2['default'].func,
+  onMaskClick: _propTypes2['default'].func,
+  onHandleClick: _propTypes2['default'].func,
+  showMask: _propTypes2['default'].bool,
+  maskStyle: _propTypes2['default'].object
+};
+Drawer.defaultProps = {
+  className: '',
+  prefixCls: 'drawer',
+  placement: 'left',
+  getContainer: 'body',
+  level: 'all',
+  levelTransition: 'transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86)',
+  onChange: function onChange() {},
+  onMaskClick: function onMaskClick() {},
+  onHandleClick: function onHandleClick() {},
+  handleChild: _react2['default'].createElement('i', { className: 'drawer-handle-icon' }),
+  handleStyle: {},
+  showMask: true,
+  maskStyle: {}
+};
 
-        var touchHeight = _this.touchSidebarHeight();
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
 
-        if (_this.props.open && touchHeight < _this.state.sidebarHeight - _this.props.dragToggleDistance || !_this.props.open && touchHeight > _this.props.dragToggleDistance) {
-          _this.props.onOpenChange(!_this.props.open);
-        }
+  this.levelDom = [];
+  this.contextDom = null;
+  this.maskDom = null;
+  this.handleDom = null;
+  this.mousePos = null;
 
-        _this.setState({
-          touchIdentifier: null,
-          touchStartX: null,
-          touchStartY: null,
-          touchCurrentX: null,
-          touchCurrentY: null
-        });
-      }
-    };
+  this.getParentAndLevelDom = function (props) {
+    if (windowIsUndefined) {
+      return;
+    }
+    var level = props.level,
+        getContainer = props.getContainer;
 
-    _this.onScroll = function () {
-      if (_this.isTouching() && _this.inCancelDistanceOnScroll()) {
-        _this.setState({
-          touchIdentifier: null,
-          touchStartX: null,
-          touchStartY: null,
-          touchCurrentX: null,
-          touchCurrentY: null
+    _this3.levelDom = [];
+    _this3.parent = getContainer && document.querySelectorAll(getContainer)[0] || _this3.container.parentNode;
+    if (level === 'all') {
+      var children = Array.prototype.slice.call(_this3.parent.children);
+      children.forEach(function (child) {
+        if (child.nodeName !== 'SCRIPT' && child.nodeName !== 'STYLE' && child !== _this3.container) {
+          _this3.levelDom.push(child);
+        }
+      });
+    } else if (level) {
+      (0, _utils.dataToArray)(level).forEach(function (key) {
+        document.querySelectorAll(key).forEach(function (item) {
+          _this3.levelDom.push(item);
         });
-      }
-    };
+      });
+    }
+  };
 
-    _this.inCancelDistanceOnScroll = function () {
-      var cancelDistanceOnScroll = void 0;
-      switch (_this.props.position) {
-        case 'right':
-          cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentX - _this.state.touchStartX) < CANCEL_DISTANCE_ON_SCROLL;
-          break;
-        case 'bottom':
-          cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentY - _this.state.touchStartY) < CANCEL_DISTANCE_ON_SCROLL;
-          break;
-        case 'top':
-          cancelDistanceOnScroll = Math.abs(_this.state.touchStartY - _this.state.touchCurrentY) < CANCEL_DISTANCE_ON_SCROLL;
-          break;
-        case 'left':
-        default:
-          cancelDistanceOnScroll = Math.abs(_this.state.touchStartX - _this.state.touchCurrentX) < CANCEL_DISTANCE_ON_SCROLL;
-      }
-      return cancelDistanceOnScroll;
-    };
+  this.trnasitionEnd = function (e) {
+    var dom = e.target;
+    dom.removeEventListener(_utils.transitionEnd, _this3.trnasitionEnd);
+    dom.style.transition = '';
+  };
 
-    _this.isTouching = function () {
-      return _this.state.touchIdentifier !== null;
+  this.onTouchEnd = function (e, close) {
+    if (_this3.props.open !== undefined) {
+      return;
+    }
+    var open = close || _this3.state.open;
+    _this3.isOpenChange = true;
+    _this3.setState({
+      open: !open
+    });
+  };
+
+  this.onMaskTouchEnd = function (e) {
+    _this3.props.onMaskClick(e);
+    _this3.onTouchEnd(e, true);
+  };
+
+  this.onIconTouchEnd = function (e) {
+    _this3.props.onHandleClick(e);
+    _this3.onTouchEnd(e);
+  };
+
+  this.onScrollTouchStart = function (e) {
+    if (e.touches.length > 1) {
+      return;
+    }
+    var touchs = e.touches[0];
+    _this3.mousePos = {
+      x: touchs.pageX,
+      y: touchs.pageY
     };
+  };
 
-    _this.saveSidebarSize = function () {
-      var sidebar = _reactDom2['default'].findDOMNode(_this.refs.sidebar);
-      var width = sidebar.offsetWidth;
-      var height = sidebar.offsetHeight;
-      var sidebarTop = getOffset(_reactDom2['default'].findDOMNode(_this.refs.sidebar)).top;
-      var dragHandleTop = getOffset(_reactDom2['default'].findDOMNode(_this.refs.dragHandle)).top;
+  this.onScrollTouchEnd = function () {
+    _this3.mousePos = null;
+  };
 
-      if (width !== _this.state.sidebarWidth) {
-        _this.setState({ sidebarWidth: width });
+  this.getScollDom = function (dom) {
+    var doms = [];
+    var setScrollDom = function setScrollDom(d) {
+      if (!d) {
+        return;
       }
-      if (height !== _this.state.sidebarHeight) {
-        _this.setState({ sidebarHeight: height });
+      if (d.scrollHeight > d.clientHeight || d.scrollWidth > d.clientWidth) {
+        doms.push(d);
       }
-      if (sidebarTop !== _this.state.sidebarTop) {
-        _this.setState({ sidebarTop: sidebarTop });
+      if (d !== _this3.contextDom && d !== _this3.handleDom && d !== _this3.maskDom) {
+        setScrollDom(d.parentNode);
       }
-      if (dragHandleTop !== _this.state.dragHandleTop) {
-        _this.setState({ dragHandleTop: dragHandleTop });
-      }
     };
+    setScrollDom(dom);
+    return doms[doms.length - 1];
+  };
 
-    _this.touchSidebarWidth = function () {
-      // if the sidebar is open and start point of drag is inside the sidebar
-      // we will only drag the distance they moved their finger
-      // otherwise we will move the sidebar to be below the finger.
-      if (_this.props.position === 'right') {
-        if (_this.props.open && window.innerWidth - _this.state.touchStartX < _this.state.sidebarWidth) {
-          if (_this.state.touchCurrentX > _this.state.touchStartX) {
-            return _this.state.sidebarWidth + _this.state.touchStartX - _this.state.touchCurrentX;
-          }
-          return _this.state.sidebarWidth;
-        }
-        return Math.min(window.innerWidth - _this.state.touchCurrentX, _this.state.sidebarWidth);
-      }
+  this.getIsHandleDom = function (dom) {
+    if (dom.className === _this3.props.className + '-handle') {
+      return true;
+    }
+    if (dom.parentNode) {
+      return _this3.getIsHandleDom(dom.parentNode);
+    }
+    return false;
+  };
 
-      if (_this.props.position === 'left') {
-        if (_this.props.open && _this.state.touchStartX < _this.state.sidebarWidth) {
-          if (_this.state.touchCurrentX > _this.state.touchStartX) {
-            return _this.state.sidebarWidth;
-          }
-          return _this.state.sidebarWidth - _this.state.touchStartX + _this.state.touchCurrentX;
-        }
-        return Math.min(_this.state.touchCurrentX, _this.state.sidebarWidth);
+  this.removeScroll = function (e) {
+    if (!_this3.props.showMask) {
+      return;
+    }
+    var dom = e.target;
+    var scrollDom = _this3.getScollDom(dom);
+    if (dom === _this3.maskDom || _this3.getIsHandleDom(dom) || !scrollDom) {
+      if (e.preventDefault) {
+        e.preventDefault();
       }
-    };
+      e.returnValue = false;
+      return;
+    }
 
-    _this.touchSidebarHeight = function () {
-      // if the sidebar is open and start point of drag is inside the sidebar
-      // we will only drag the distance they moved their finger
-      // otherwise we will move the sidebar to be below the finger.
-      if (_this.props.position === 'bottom') {
-        if (_this.props.open && window.innerHeight - _this.state.touchStartY < _this.state.sidebarHeight) {
-          if (_this.state.touchCurrentY > _this.state.touchStartY) {
-            return _this.state.sidebarHeight + _this.state.touchStartY - _this.state.touchCurrentY;
-          }
-          return _this.state.sidebarHeight;
-        }
-        return Math.min(window.innerHeight - _this.state.touchCurrentY, _this.state.sidebarHeight);
+    var y = e.deltaY;
+    var x = e.deltaX;
+    if (e.type === 'touchmove') {
+      if (e.touches.length > 1 || !_this3.mousePos) {
+        return;
       }
-
-      if (_this.props.position === 'top') {
-        var touchStartOffsetY = _this.state.touchStartY - _this.state.sidebarTop;
-        if (_this.props.open && touchStartOffsetY < _this.state.sidebarHeight) {
-          if (_this.state.touchCurrentY > _this.state.touchStartY) {
-            return _this.state.sidebarHeight;
-          }
-          return _this.state.sidebarHeight - _this.state.touchStartY + _this.state.touchCurrentY;
-        }
-        return Math.min(_this.state.touchCurrentY - _this.state.dragHandleTop, _this.state.sidebarHeight);
+      var touches = e.touches[0];
+      // 上滑为正，下滑为负
+      y = _this3.mousePos.y - touches.pageY;
+      x = _this3.mousePos.x - touches.pageX;
+    }
+    // 竖向
+    var scrollTop = scrollDom.scrollTop;
+    var height = scrollDom.clientHeight;
+    var scrollHeight = scrollDom.scrollHeight;
+    var isScrollY = scrollHeight - height > 2;
+    var maxOrMinScrollY = isScrollY && (scrollTop <= 0 && y < 0 || scrollTop + height >= scrollHeight && y > 0);
+    // 横向
+    var width = scrollDom.clientWidth;
+    var scrollLeft = scrollDom.scrollLeft;
+    var scrollWidth = scrollDom.scrollWidth;
+    var isScrollX = scrollWidth - width > 2;
+    var maxOrMinScrollX = scrollWidth - width > 2 && (scrollLeft <= 0 && x < 0 || scrollLeft + width >= scrollWidth && x > 0);
+    if (!isScrollY && !isScrollX || maxOrMinScrollY || maxOrMinScrollX) {
+      if (e.preventDefault) {
+        e.preventDefault();
       }
-    };
+      e.returnValue = false;
+      return;
+    }
+  };
 
-    _this.renderStyle = function (_ref) {
-      var sidebarStyle = _ref.sidebarStyle,
-          isTouching = _ref.isTouching,
-          overlayStyle = _ref.overlayStyle,
-          contentStyle = _ref.contentStyle;
+  this.setLevelDomTransform = function (open, openTransition, placementName, value) {
+    var _props = _this3.props,
+        placement = _props.placement,
+        levelTransition = _props.levelTransition,
+        onChange = _props.onChange;
 
-      if (_this.props.position === 'right' || _this.props.position === 'left') {
-        sidebarStyle.transform = 'translateX(0%)';
-        sidebarStyle.WebkitTransform = 'translateX(0%)';
-        if (isTouching) {
-          var percentage = _this.touchSidebarWidth() / _this.state.sidebarWidth;
-          // slide open to what we dragged
-          if (_this.props.position === 'right') {
-            sidebarStyle.transform = 'translateX(' + (1 - percentage) * 100 + '%)';
-            sidebarStyle.WebkitTransform = 'translateX(' + (1 - percentage) * 100 + '%)';
-          }
-          if (_this.props.position === 'left') {
-            sidebarStyle.transform = 'translateX(-' + (1 - percentage) * 100 + '%)';
-            sidebarStyle.WebkitTransform = 'translateX(-' + (1 - percentage) * 100 + '%)';
-          }
-          // fade overlay to match distance of drag
-          overlayStyle.opacity = percentage;
-          overlayStyle.visibility = 'visible';
-        }
-        if (contentStyle) {
-          contentStyle[_this.props.position] = _this.state.sidebarWidth + 'px';
-        }
+    _this3.levelDom.forEach(function (dom) {
+      if (_this3.isOpenChange || openTransition) {
+        dom.style.transition = levelTransition;
+        dom.addEventListener(_utils.transitionEnd, _this3.trnasitionEnd);
       }
-      if (_this.props.position === 'top' || _this.props.position === 'bottom') {
-        sidebarStyle.transform = 'translateY(0%)';
-        sidebarStyle.WebkitTransform = 'translateY(0%)';
-        if (isTouching) {
-          var _percentage = _this.touchSidebarHeight() / _this.state.sidebarHeight;
-          // slide open to what we dragged
-          if (_this.props.position === 'bottom') {
-            sidebarStyle.transform = 'translateY(' + (1 - _percentage) * 100 + '%)';
-            sidebarStyle.WebkitTransform = 'translateY(' + (1 - _percentage) * 100 + '%)';
+      var placementPos = placement === 'left' || placement === 'top' ? value : -value;
+      dom.style.transform = open ? placementName + '(' + placementPos + 'px)' : '';
+    });
+    // 处理 body 滚动
+    if (!windowIsUndefined) {
+      var passiveSupported = false;
+      try {
+        window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
+          get: function get() {
+            passiveSupported = true;
           }
-          if (_this.props.position === 'top') {
-            sidebarStyle.transform = 'translateY(-' + (1 - _percentage) * 100 + '%)';
-            sidebarStyle.WebkitTransform = 'translateY(-' + (1 - _percentage) * 100 + '%)';
-          }
-          // fade overlay to match distance of drag
-          overlayStyle.opacity = _percentage;
-          overlayStyle.visibility = 'visible';
-        }
-        if (contentStyle) {
-          contentStyle[_this.props.position] = _this.state.sidebarHeight + 'px';
-        }
+        }));
+      } catch (err) {
+        console.log(err);
       }
-    };
-
-    _this.state = {
-      // the detected width of the sidebar in pixels
-      sidebarWidth: 0,
-      sidebarHeight: 0,
-      sidebarTop: 0,
-      dragHandleTop: 0,
-
-      // keep track of touching params
-      touchIdentifier: null,
-      touchStartX: null,
-      touchStartY: null,
-      touchCurrentX: null,
-      touchCurrentY: null,
-
-      // if touch is supported by the browser
-      touchSupported: (typeof window === 'undefined' ? 'undefined' : (0, _typeof3['default'])(window)) === 'object' && 'ontouchstart' in window
-    };
-    return _this;
-  }
-
-  (0, _createClass3['default'])(Drawer, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.saveSidebarSize();
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      // filter out the updates when we're touching
-      if (!this.isTouching()) {
-        this.saveSidebarSize();
+      var passive = passiveSupported ? { passive: false } : false;
+      if (open) {
+        document.body.addEventListener('mousewheel', _this3.removeScroll);
+        document.body.addEventListener('touchmove', _this3.removeScroll, passive);
+      } else {
+        document.body.removeEventListener('mousewheel', _this3.removeScroll);
+        document.body.removeEventListener('touchmove', _this3.removeScroll, passive);
       }
     }
+    if (onChange && _this3.isOpenChange) {
+      onChange(open);
+      _this3.isOpenChange = false;
+    }
+  };
 
-    // This logic helps us prevents the user from sliding the sidebar horizontally
-    // while scrolling the sidebar vertically. When a scroll event comes in, we're
-    // cancelling the ongoing gesture if it did not move horizontally much.
+  this.getChildToRender = function () {
+    var _classnames;
 
+    var open = _this3.props.open !== undefined ? _this3.props.open : _this3.state.open;
+    var _props2 = _this3.props,
+        className = _props2.className,
+        prefixCls = _props2.prefixCls,
+        style = _props2.style,
+        placement = _props2.placement,
+        children = _props2.children,
+        handleChild = _props2.handleChild,
+        handleStyle = _props2.handleStyle,
+        showMask = _props2.showMask,
+        maskStyle = _props2.maskStyle;
 
-    // True if the on going gesture X distance is less than the cancel distance
-
-
-    // calculate the sidebarWidth based on current touch info
-
-    // calculate the sidebarHeight based on current touch info
-
-  }, {
-    key: 'render',
-    value: function render() {
-      var _rootCls,
-          _this2 = this;
-
-      var _props = this.props,
-          className = _props.className,
-          style = _props.style,
-          prefixCls = _props.prefixCls,
-          position = _props.position,
-          transitions = _props.transitions,
-          touch = _props.touch,
-          enableDragHandle = _props.enableDragHandle,
-          sidebar = _props.sidebar,
-          children = _props.children,
-          docked = _props.docked,
-          open = _props.open;
-
-
-      var sidebarStyle = (0, _extends3['default'])({}, this.props.sidebarStyle);
-      var contentStyle = (0, _extends3['default'])({}, this.props.contentStyle);
-      var overlayStyle = (0, _extends3['default'])({}, this.props.overlayStyle);
-
-      var rootCls = (_rootCls = {}, (0, _defineProperty3['default'])(_rootCls, className, !!className), (0, _defineProperty3['default'])(_rootCls, prefixCls, true), (0, _defineProperty3['default'])(_rootCls, prefixCls + '-' + position, true), _rootCls);
-
-      var rootProps = { style: style };
-      var isTouching = this.isTouching();
-
-      if (isTouching) {
-        this.renderStyle({ sidebarStyle: sidebarStyle, isTouching: true, overlayStyle: overlayStyle });
-      } else if (docked) {
-        if (this.state.sidebarWidth !== 0) {
-          rootCls[prefixCls + '-docked'] = true;
-          this.renderStyle({ sidebarStyle: sidebarStyle, contentStyle: contentStyle });
+    var wrapperClassname = (0, _classnames3['default'])(prefixCls, (_classnames = {}, (0, _defineProperty3['default'])(_classnames, prefixCls + '-' + placement, true), (0, _defineProperty3['default'])(_classnames, prefixCls + '-open', open), (0, _defineProperty3['default'])(_classnames, className, !!className), _classnames));
+    var value = _this3.contextDom ? _this3.contextDom.getBoundingClientRect()[placement === 'left' || placement === 'right' ? 'width' : 'height'] : 0;
+    var placementName = 'translate' + (placement === 'left' || placement === 'right' ? 'X' : 'Y');
+    // 百分比与像素动画不同步，第一次打用后全用像素动画。
+    var defaultValue = !_this3.contextDom ? '100%' : value + 'px';
+    var placementPos = placement === 'left' || placement === 'top' ? '-' + defaultValue : defaultValue;
+    var transform = open ? '' : placementName + '(' + placementPos + ')';
+    if (_this3.isOpenChange === undefined || _this3.isOpenChange) {
+      _this3.setLevelDomTransform(open, false, placementName, value);
+    }
+    return _react2['default'].createElement(
+      'div',
+      { className: wrapperClassname, style: style },
+      showMask && _react2['default'].createElement('div', {
+        className: prefixCls + '-mask',
+        onClick: _this3.onMaskTouchEnd,
+        style: maskStyle,
+        ref: function ref(c) {
+          _this3.maskDom = c;
         }
-      } else if (open) {
-        rootCls[prefixCls + '-open'] = true;
-        this.renderStyle({ sidebarStyle: sidebarStyle });
-        overlayStyle.opacity = 1;
-        overlayStyle.visibility = 'visible';
-      }
-
-      if (isTouching || !transitions) {
-        sidebarStyle.transition = 'none';
-        sidebarStyle.WebkitTransition = 'none';
-        contentStyle.transition = 'none';
-        overlayStyle.transition = 'none';
-      }
-
-      var dragHandle = null;
-
-      if (this.state.touchSupported && touch) {
-        if (open) {
-          rootProps.onTouchStart = function (ev) {
-            _this2.notTouch = true;
-            _this2.onTouchStart(ev);
-          };
-          rootProps.onTouchMove = this.onTouchMove;
-          rootProps.onTouchEnd = this.onTouchEnd;
-          rootProps.onTouchCancel = this.onTouchEnd;
-          rootProps.onScroll = this.onScroll;
-        } else if (enableDragHandle) {
-          dragHandle = _react2['default'].createElement('div', { className: prefixCls + '-draghandle', style: this.props.dragHandleStyle,
-            onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove,
-            onTouchEnd: this.onTouchEnd, onTouchCancel: this.onTouchEnd,
-            ref: 'dragHandle'
-          });
-        }
-      }
-
-      // const evt = {};
-      // // FastClick use touchstart instead of click
-      // if (this.state.touchSupported) {
-      //   evt.onTouchStart = () => {
-      //     this.notTouch = true;
-      //     this.onOverlayClicked();
-      //   };
-      //   evt.onTouchEnd = () => {
-      //     this.notTouch = false;
-      //     this.setState({
-      //       touchIdentifier: null,
-      //     });
-      //   };
-      // } else {
-      //   evt.onClick = this.onOverlayClicked;
-      // }
-
-      return _react2['default'].createElement(
+      }),
+      _react2['default'].createElement(
         'div',
-        (0, _extends3['default'])({ className: (0, _classnames2['default'])(rootCls) }, rootProps),
+        {
+          className: prefixCls + '-content-wrapper',
+          style: { transform: transform }
+        },
         _react2['default'].createElement(
           'div',
-          { className: prefixCls + '-sidebar', style: sidebarStyle,
-            ref: 'sidebar'
+          {
+            className: prefixCls + '-content',
+            onTouchStart: _this3.onScrollTouchStart,
+            onTouchEnd: _this3.onScrollTouchEnd,
+            ref: function ref(c) {
+              _this3.contextDom = c;
+            }
           },
-          sidebar
+          children
         ),
-        _react2['default'].createElement('div', { className: prefixCls + '-overlay',
-          style: overlayStyle,
-          role: 'presentation',
-          ref: 'overlay',
-          onClick: this.onOverlayClicked
-        }),
-        _react2['default'].createElement(
+        handleChild && _react2['default'].createElement(
           'div',
-          { className: prefixCls + '-content', style: contentStyle,
-            ref: 'content'
+          {
+            className: prefixCls + '-handle',
+            onClick: _this3.onIconTouchEnd,
+            style: handleStyle,
+            ref: function ref(c) {
+              _this3.handleDom = c;
+            }
           },
-          dragHandle,
-          children
+          handleChild
         )
-      );
+      )
+    );
+  };
+
+  this.defaultGetContainer = function () {
+    if (windowIsUndefined) {
+      return null;
     }
-  }]);
-  return Drawer;
-}(_react2['default'].Component);
+    var container = document.createElement('div');
+    _this3.parent.appendChild(container);
+    if (_this3.props.wrapperClassName) {
+      container.className = _this3.props.wrapperClassName;
+    }
+    return container;
+  };
+};
 
-Drawer.propTypes = {
-  prefixCls: _propTypes2['default'].string,
-  className: _propTypes2['default'].string,
-  // main content to render
-  children: _propTypes2['default'].node.isRequired,
-
-  // styles
-  // styles: PropTypes.shape({
-  //   dragHandle: PropTypes.object,
-  // }),
-  style: _propTypes2['default'].object,
-  sidebarStyle: _propTypes2['default'].object,
-  contentStyle: _propTypes2['default'].object,
-  overlayStyle: _propTypes2['default'].object,
-  dragHandleStyle: _propTypes2['default'].object,
-
-  // sidebar content to render
-  sidebar: _propTypes2['default'].node.isRequired,
-
-  // boolean if sidebar should be docked
-  docked: _propTypes2['default'].bool,
-
-  // boolean if sidebar should slide open
-  open: _propTypes2['default'].bool,
-
-  // boolean if transitions should be disabled
-  transitions: _propTypes2['default'].bool,
-
-  // boolean if touch gestures are enabled
-  touch: _propTypes2['default'].bool,
-  enableDragHandle: _propTypes2['default'].bool,
-
-  // where to place the sidebar
-  position: _propTypes2['default'].oneOf(['left', 'right', 'top', 'bottom']),
-
-  // distance we have to drag the sidebar to toggle open state
-  dragToggleDistance: _propTypes2['default'].number,
-
-  // callback called when the overlay is clicked
-  onOpenChange: _propTypes2['default'].func
-};
-Drawer.defaultProps = {
-  prefixCls: 'rc-drawer',
-  sidebarStyle: {},
-  contentStyle: {},
-  overlayStyle: {},
-  dragHandleStyle: {},
-  docked: false,
-  open: false,
-  transitions: true,
-  touch: true,
-  enableDragHandle: true,
-  position: 'left',
-  dragToggleDistance: 30,
-  onOpenChange: function onOpenChange() {}
-};
 exports['default'] = Drawer;
 module.exports = exports['default'];

package.json

 {
   "name": "rc-drawer",
-  "version": "0.4.11",
-  "description": "drawer ui component for react",
+  "version": "1.2.0",
+  "description": "drawer component for react",
   "keywords": [
@@ -9,53 +9,64 @@ "react",
     "react-drawer",
-    "drawer"
+    "drawer",
+    "drawer-menu",
+    "rc-drawer-menu",
+    "react-drawer-menu",
+    "animation",
+    "drawer-motion",
+    "drawer-animation"
   ],
-  "engines": {
-    "node": ">=4.0.0"
+  "homepage": "https://github.com/ant-motion/drawer",
+  "author": "[e-mail]",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ant-motion/drawer.git"
   },
-  "homepage": "https://github.com/react-component/drawer",
-  "author": "",
-  "repository": "react-component/drawer",
-  "bugs": "https://github.com/react-component/drawer/issues",
+  "bugs": {
+    "url": "https://github.com/ant-motion/drawer/issues"
+  },
   "files": [
-    "es",
     "lib",
-    "assets/*.css"
+    "assets/*.css",
+    "dist",
+    "es"
   ],
-  "license": "MIT",
+  "licenses": "MIT",
   "main": "./lib/index",
   "module": "./es/index",
   "config": {
-    "port": 8099
+    "port": 8009,
+    "entry": {
+      "rc-drawer": [
+        "./assets/index.less",
+        "./src/index.js"
+      ]
+    }
   },
   "scripts": {
+    "dist": "rc-tools run dist",
     "build": "rc-tools run build",
-    "dist": "rc-tools run dist",
-    "compile": "rc-tools run compile --babel-runtime",
     "gh-pages": "rc-tools run gh-pages",
     "start": "rc-tools run server",
+    "compile": "rc-tools run compile --babel-runtime",
     "pub": "rc-tools run pub --babel-runtime",
     "lint": "rc-tools run lint",
-    "test": "jest",
-    "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls"
+    "karma": "rc-test run karma",
+    "saucelabs": "rc-test run saucelabs",
+    "test": "rc-test run test",
+    "chrome-test": "rc-test run chrome-test",
+    "coverage": "rc-test run coverage"
   },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*"
-    ],
-    "transform": {
-      "\\.jsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js"
-    }
-  },
   "devDependencies": {
-    "coveralls": "^2.13.1",
-    "enzyme": "^2.6.0",
-    "enzyme-to-json": "^1.4.5",
-    "jest": "^18.0.0",
+    "antd": "^2.13.8",
+    "core-js": "^2.5.1",
+    "expect.js": "0.3.x",
     "pre-commit": "1.x",
+    "precommit-hook": "1.x",
+    "rc-dialog": "~5.2.1",
+    "rc-test": "6.x",
     "rc-tools": "6.x",
-    "react": "15.x",
-    "react-dom": "15.x",
-    "react-test-renderer": "^15.6.1"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
-  "pre-commit": [
+  "precommit": [
     "lint"
@@ -65,5 +76,5 @@ ],
     "babel-runtime": "6.x",
-    "classnames": "^2.2.4",
-    "prop-types": "^15.5.10"
+    "classnames": "^2.2.5",
+    "prop-types": "^15.5.0"
   }
 }

README.md

 # rc-drawer
 ---
 
-React Drawer Component
-
-
 [![NPM version][npm-image]][npm-url]
 [![build status][travis-image]][travis-url]
 [![Test coverage][coveralls-image]][coveralls-url]
-[![gemnasium deps][gemnasium-image]][gemnasium-url]
+[![node version][node-image]][node-url]
 [![npm download][download-image]][download-url]
@@ -19,4 +16,2 @@
 [coveralls-url]: https://coveralls.io/r/react-component/drawer?branch=master
-[gemnasium-image]: http://img.shields.io/gemnasium/react-component/drawer.svg?style=flat-square
-[gemnasium-url]: https://gemnasium.com/react-component/drawer
 [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
@@ -27,80 +22,58 @@ [node-url]: http://nodejs.org/download/
 
+## Example
 
-## Screenshots
+http://react-component.github.io/drawer/examples/
 
-<img src="https://os.alipayobjects.com/rmsportal/gqhazYYGIaUmunx.png" width="288"/>
+## Usage
 
+```js
+import Drawer from 'rc-drawer';
+import React from 'react';
+import ReactDom from 'react-dom';
 
-## Development
-
+ReactDom.render(
+  <Drawer>
+    {menu children}
+  </Drawer>
+, mountNode);
 ```
-npm install
-npm start
-```
 
-## Example
+## Install
 
-http://localhost:8099/examples/
-
-
-online example: http://react-component.github.io/drawer/
-
-
-## install
-
-
 [![rc-drawer](https://nodei.co/npm/rc-drawer.png)](https://npmjs.org/package/rc-drawer)
 
+## Browser Support
 
-## Usage
+|![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true)|
+| --- | --- | --- | --- | --- |
+| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
 
-```js
-var Drawer = require('rc-drawer');
-var React = require('react');
-React.render(<Drawer />, container);
-```
-
 ## API
 
-### props
+| props      | type           | default | description    |
+|------------|----------------|---------|----------------|
+| className       | string | null | - |
+| prefixCls     |  string  | 'drawer' | prefix class |
+| wrapperClassName | string | null | wrapper class name |
+| open        | boolean  | false |  open or close menu  |
+| defaultOpen | boolean  | false | default open menu |
+| handleChild   | boolean / ReactElement | true | true or false or ReactElement |
+| handleStyle   | object | null | handle style |
+| placement  | string   |  `left` | `left` `top` `right` `bottom` |
+| level     | string or array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array |
+| levelTransition | string | `transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level css transition |
+| getContainer    | string | `body` | Return the mount node for Drawer. if is `null` use React.creactElement  |
+| showMask    |  boolean  | true | mask is show |
+| maskStyle | object | null | mask style |
+| onChange  | func | null | change callback(open) |
+| onMaskClick | func | null | mask close click function |
+| onHandleClick | func | nul  | handle icon click function |
 
-| Property name | Description | Type | Default |
-|---------------|-------------|------|---------|
-| className | additional css class of root dom node | String | '' |
-| prefixCls | prefix class | String | 'rc-drawer' |
-| children | The main content | any | n/a |
-| sidebarStyle | Inline styles. | Object | {} |
-| contentStyle | Inline styles. | Object | {} |
-| overlayStyle | Inline styles. | Object | {} |
-| dragHandleStyle | Inline styles. | Object | {} |
-| sidebar | The sidebar content | any | n/a |
-| onOpenChange | Callback called when the sidebar wants to change the open prop. Happens after sliding the sidebar and when the overlay is clicked when the sidebar is open. | Function | n/a |
-| open | If the sidebar should be open | Boolean | false |
-| position | where to place the sidebar | String | 'left', enum{'left', 'right', 'top', 'bottom'} |
-| docked | If the sidebar should be docked in document | Boolean | false |
-| transitions | If transitions should be enabled | Boolean | true |
-| touch | If touch gestures should be enabled | Boolean | true |
-| enableDragHandle | If dragHandle should be enabled | Boolean | true |
-| dragToggleDistance | Distance the sidebar has to be dragged before it will open/close after it is released. | Number | 30 |
+> 1.0 remove `openClassName` `width`, update `iconChild` -> `handleChild` `onIconClick` -> `onHandleClick` `parent` -> `getContainer`, add `handleStyle` `showMask`.
 
-> change from [https://github.com/balloob/react-sidebar](https://github.com/balloob/react-sidebar)
+## Development
 
-
-## Test Case
-
 ```
-npm test
-npm run chrome-test
+npm install
+npm start
 ```
-
-## Coverage
-
-```
-npm run coverage
-```
-
-open coverage/ dir
-
-## License
-
-rc-drawer is released under the MIT license.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

331754

658.45%

Number of package files

18

125%

Lines of code

4113

318.84%

Number of low maintenance alerts

0

-100%

Worsened metrics

Dev dependency count

10

11.11%

Number of lines in readme file

78

-25.71%

Number of low supply chain risk alerts

11

1000%

Number of medium supply chain risk alerts

4

Infinity%

Dependency changes

• Updated

  classnames@^2.2.5

• Updated

  prop-types@^15.5.0