rc-drawer - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

es/DrawerChild.js

@@ -21,565 +21,571 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var DrawerChild =
-/** @class */
-function () {
-  var DrawerChild = /*#__PURE__*/function (_React$Component) {
-    _inherits(DrawerChild, _React$Component);
+var DrawerChild = /*#__PURE__*/function (_React$Component) {
+  _inherits(DrawerChild, _React$Component);
 
-    var _super = _createSuper(DrawerChild);
+  var _super = _createSuper(DrawerChild);
 
-    function DrawerChild(props) {
-      var _this;
+  function DrawerChild(props) {
+    var _this;
 
-      _classCallCheck(this, DrawerChild);
+    _classCallCheck(this, DrawerChild);
 
-      _this = _super.call(this, props);
+    _this = _super.call(this, props);
 
-      _this.domFocus = function () {
-        if (_this.dom) {
-          _this.dom.focus();
-        }
-      };
+    _this.domFocus = function () {
+      if (_this.dom) {
+        _this.dom.focus();
+      }
+    };
 
-      _this.removeStartHandler = function (e) {
-        if (e.touches.length > 1) {
-          return;
-        }
+    _this.removeStartHandler = function (e) {
+      if (e.touches.length > 1) {
+        return;
+      }
 
-        _this.startPos = {
-          x: e.touches[0].clientX,
-          y: e.touches[0].clientY
-        };
+      _this.startPos = {
+        x: e.touches[0].clientX,
+        y: e.touches[0].clientY
       };
+    };
 
-      _this.removeMoveHandler = function (e) {
-        if (e.changedTouches.length > 1) {
-          return;
-        }
+    _this.removeMoveHandler = function (e) {
+      if (e.changedTouches.length > 1) {
+        return;
+      }
 
-        var currentTarget = e.currentTarget;
-        var differX = e.changedTouches[0].clientX - _this.startPos.x;
-        var differY = e.changedTouches[0].clientY - _this.startPos.y;
+      var currentTarget = e.currentTarget;
+      var differX = e.changedTouches[0].clientX - _this.startPos.x;
+      var differY = e.changedTouches[0].clientY - _this.startPos.y;
 
-        if ((currentTarget === _this.maskDom || currentTarget === _this.handlerDom || currentTarget === _this.contentDom && getTouchParentScroll(currentTarget, e.target, differX, differY)) && e.cancelable) {
-          e.preventDefault();
-        }
-      };
+      if ((currentTarget === _this.maskDom || currentTarget === _this.handlerDom || currentTarget === _this.contentDom && getTouchParentScroll(currentTarget, e.target, differX, differY)) && e.cancelable) {
+        e.preventDefault();
+      }
+    };
 
-      _this.transitionEnd = function (e) {
-        var dom = e.target;
-        removeEventListener(dom, transitionEnd, _this.transitionEnd);
-        dom.style.transition = '';
-      };
+    _this.transitionEnd = function (e) {
+      var dom = e.target;
+      removeEventListener(dom, transitionEnd, _this.transitionEnd);
+      dom.style.transition = '';
+    };
 
-      _this.onKeyDown = function (e) {
-        if (e.keyCode === KeyCode.ESC) {
-          var onClose = _this.props.onClose;
-          e.stopPropagation();
+    _this.onKeyDown = function (e) {
+      if (e.keyCode === KeyCode.ESC) {
+        var onClose = _this.props.onClose;
+        e.stopPropagation();
 
-          if (onClose) {
-            onClose(e);
-          }
+        if (onClose) {
+          onClose(e);
         }
-      };
+      }
+    };
 
-      _this.onWrapperTransitionEnd = function (e) {
-        var _this$props = _this.props,
-            open = _this$props.open,
-            afterVisibleChange = _this$props.afterVisibleChange;
+    _this.onWrapperTransitionEnd = function (e) {
+      var _this$props = _this.props,
+          open = _this$props.open,
+          afterVisibleChange = _this$props.afterVisibleChange;
 
-        if (e.target === _this.contentWrapper && e.propertyName.match(/transform$/)) {
-          _this.dom.style.transition = '';
+      if (e.target === _this.contentWrapper && e.propertyName.match(/transform$/)) {
+        _this.dom.style.transition = '';
 
-          if (!open && _this.getCurrentDrawerSome()) {
-            document.body.style.overflowX = '';
+        if (!open && _this.getCurrentDrawerSome()) {
+          document.body.style.overflowX = '';
 
-            if (_this.maskDom) {
-              _this.maskDom.style.left = '';
-              _this.maskDom.style.width = '';
-            }
+          if (_this.maskDom) {
+            _this.maskDom.style.left = '';
+            _this.maskDom.style.width = '';
           }
+        }
 
-          if (afterVisibleChange) {
-            afterVisibleChange(!!open);
-          }
+        if (afterVisibleChange) {
+          afterVisibleChange(!!open);
         }
-      };
+      }
+    };
 
-      _this.openLevelTransition = function () {
-        var _this$props2 = _this.props,
-            open = _this$props2.open,
-            width = _this$props2.width,
-            height = _this$props2.height;
+    _this.openLevelTransition = function () {
+      var _this$props2 = _this.props,
+          open = _this$props2.open,
+          width = _this$props2.width,
+          height = _this$props2.height;
 
-        var _this$getHorizontalBo = _this.getHorizontalBoolAndPlacementName(),
-            isHorizontal = _this$getHorizontalBo.isHorizontal,
-            placementName = _this$getHorizontalBo.placementName;
+      var _this$getHorizontalBo = _this.getHorizontalBoolAndPlacementName(),
+          isHorizontal = _this$getHorizontalBo.isHorizontal,
+          placementName = _this$getHorizontalBo.placementName;
 
-        var contentValue = _this.contentDom ? _this.contentDom.getBoundingClientRect()[isHorizontal ? 'width' : 'height'] : 0;
-        var value = (isHorizontal ? width : height) || contentValue;
+      var contentValue = _this.contentDom ? _this.contentDom.getBoundingClientRect()[isHorizontal ? 'width' : 'height'] : 0;
+      var value = (isHorizontal ? width : height) || contentValue;
 
-        _this.setLevelAndScrolling(open, placementName, value);
-      };
+      _this.setLevelAndScrolling(open, placementName, value);
+    };
 
-      _this.setLevelTransform = function (open, placementName, value, right) {
-        var _this$props3 = _this.props,
-            placement = _this$props3.placement,
-            levelMove = _this$props3.levelMove,
-            duration = _this$props3.duration,
-            ease = _this$props3.ease,
-            showMask = _this$props3.showMask; // router 切换时可能会导至页面失去滚动条，所以需要时时获取。
+    _this.setLevelTransform = function (open, placementName, value, right) {
+      var _this$props3 = _this.props,
+          placement = _this$props3.placement,
+          levelMove = _this$props3.levelMove,
+          duration = _this$props3.duration,
+          ease = _this$props3.ease,
+          showMask = _this$props3.showMask; // router 切换时可能会导至页面失去滚动条，所以需要时时获取。
 
-        _this.levelDom.forEach(function (dom) {
-          dom.style.transition = "transform ".concat(duration, " ").concat(ease);
-          addEventListener(dom, transitionEnd, _this.transitionEnd);
-          var levelValue = open ? value : 0;
+      _this.levelDom.forEach(function (dom) {
+        dom.style.transition = "transform ".concat(duration, " ").concat(ease);
+        addEventListener(dom, transitionEnd, _this.transitionEnd);
+        var levelValue = open ? value : 0;
 
-          if (levelMove) {
-            var $levelMove = transformArguments(levelMove, {
-              target: dom,
-              open: open
-            });
-            levelValue = open ? $levelMove[0] : $levelMove[1] || 0;
-          }
+        if (levelMove) {
+          var $levelMove = transformArguments(levelMove, {
+            target: dom,
+            open: open
+          });
+          levelValue = open ? $levelMove[0] : $levelMove[1] || 0;
+        }
 
-          var $value = typeof levelValue === 'number' ? "".concat(levelValue, "px") : levelValue;
-          var placementPos = placement === 'left' || placement === 'top' ? $value : "-".concat($value);
-          placementPos = showMask && placement === 'right' && right ? "calc(".concat(placementPos, " + ").concat(right, "px)") : placementPos;
-          dom.style.transform = levelValue ? "".concat(placementName, "(").concat(placementPos, ")") : '';
-        });
-      };
+        var $value = typeof levelValue === 'number' ? "".concat(levelValue, "px") : levelValue;
+        var placementPos = placement === 'left' || placement === 'top' ? $value : "-".concat($value);
+        placementPos = showMask && placement === 'right' && right ? "calc(".concat(placementPos, " + ").concat(right, "px)") : placementPos;
+        dom.style.transform = levelValue ? "".concat(placementName, "(").concat(placementPos, ")") : '';
+      });
+    };
 
-      _this.setLevelAndScrolling = function (open, placementName, value) {
-        var onChange = _this.props.onChange;
+    _this.setLevelAndScrolling = function (open, placementName, value) {
+      var onChange = _this.props.onChange;
 
-        if (!windowIsUndefined) {
-          var right = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth ? getScrollBarSize(true) : 0;
+      if (!windowIsUndefined) {
+        var right = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth ? getScrollBarSize(true) : 0;
 
-          _this.setLevelTransform(open, placementName, value, right);
+        _this.setLevelTransform(open, placementName, value, right);
 
-          _this.toggleScrollingToDrawerAndBody(right);
-        }
+        _this.toggleScrollingToDrawerAndBody(right);
+      }
 
-        if (onChange) {
-          onChange(open);
-        }
-      };
+      if (onChange) {
+        onChange(open);
+      }
+    };
 
-      _this.toggleScrollingToDrawerAndBody = function (right) {
-        var _this$props4 = _this.props,
-            getOpenCount = _this$props4.getOpenCount,
-            getContainer = _this$props4.getContainer,
-            showMask = _this$props4.showMask,
-            open = _this$props4.open;
-        var container = getContainer && getContainer();
-        var openCount = getOpenCount && getOpenCount(); // 处理 body 滚动
+    _this.toggleScrollingToDrawerAndBody = function (right) {
+      var _this$props4 = _this.props,
+          getOpenCount = _this$props4.getOpenCount,
+          getContainer = _this$props4.getContainer,
+          showMask = _this$props4.showMask,
+          open = _this$props4.open;
+      var container = getContainer && getContainer();
+      var openCount = getOpenCount && getOpenCount(); // 处理 body 滚动
 
-        if (container && container.parentNode === document.body && showMask) {
-          var eventArray = ['touchstart'];
-          var domArray = [document.body, _this.maskDom, _this.handlerDom, _this.contentDom];
+      if (container && container.parentNode === document.body && showMask) {
+        var eventArray = ['touchstart'];
+        var domArray = [document.body, _this.maskDom, _this.handlerDom, _this.contentDom];
 
-          if (open && document.body.style.overflow !== 'hidden') {
-            if (right) {
-              _this.addScrollingEffect(right);
-            }
+        if (open && document.body.style.overflow !== 'hidden') {
+          if (right) {
+            _this.addScrollingEffect(right);
+          }
 
-            if (openCount === 1) {
-              document.body.style.overflow = 'hidden';
-            }
+          if (openCount === 1) {
+            document.body.style.overflow = 'hidden';
+          }
 
-            document.body.style.touchAction = 'none'; // 手机禁滚
+          document.body.style.touchAction = 'none'; // 手机禁滚
 
-            domArray.forEach(function (item, i) {
-              if (!item) {
-                return;
-              }
-
-              addEventListener(item, eventArray[i] || 'touchmove', i ? _this.removeMoveHandler : _this.removeStartHandler, _this.passive);
-            });
-          } else if (_this.getCurrentDrawerSome()) {
-            // 没有弹框的状态下清除 overflow;
-            if (!openCount) {
-              document.body.style.overflow = '';
+          domArray.forEach(function (item, i) {
+            if (!item) {
+              return;
             }
 
-            document.body.style.touchAction = '';
+            addEventListener(item, eventArray[i] || 'touchmove', i ? _this.removeMoveHandler : _this.removeStartHandler, _this.passive);
+          });
+        } else if (_this.getCurrentDrawerSome()) {
+          // 没有弹框的状态下清除 overflow;
+          if (!openCount) {
+            document.body.style.overflow = '';
+          }
 
-            if (right) {
-              _this.remScrollingEffect(right);
-            } // 恢复事件
+          document.body.style.touchAction = '';
 
+          if (right) {
+            _this.remScrollingEffect(right);
+          } // 恢复事件
 
-            domArray.forEach(function (item, i) {
-              if (!item) {
-                return;
-              }
 
-              removeEventListener(item, eventArray[i] || 'touchmove', i ? _this.removeMoveHandler : _this.removeStartHandler, _this.passive);
-            });
-          }
-        }
-      };
+          domArray.forEach(function (item, i) {
+            if (!item) {
+              return;
+            }
 
-      _this.addScrollingEffect = function (right) {
-        var _this$props5 = _this.props,
-            placement = _this$props5.placement,
-            duration = _this$props5.duration,
-            ease = _this$props5.ease,
-            getOpenCount = _this$props5.getOpenCount,
-            switchScrollingEffect = _this$props5.switchScrollingEffect;
-        var openCount = getOpenCount && getOpenCount();
-
-        if (openCount === 1) {
-          switchScrollingEffect();
+            removeEventListener(item, eventArray[i] || 'touchmove', i ? _this.removeMoveHandler : _this.removeStartHandler, _this.passive);
+          });
         }
+      }
+    };
 
-        var widthTransition = "width ".concat(duration, " ").concat(ease);
-        var transformTransition = "transform ".concat(duration, " ").concat(ease);
-        _this.dom.style.transition = 'none';
+    _this.addScrollingEffect = function (right) {
+      var _this$props5 = _this.props,
+          placement = _this$props5.placement,
+          duration = _this$props5.duration,
+          ease = _this$props5.ease,
+          getOpenCount = _this$props5.getOpenCount,
+          switchScrollingEffect = _this$props5.switchScrollingEffect;
+      var openCount = getOpenCount && getOpenCount();
 
-        switch (placement) {
-          case 'right':
-            _this.dom.style.transform = "translateX(-".concat(right, "px)");
-            break;
+      if (openCount === 1) {
+        switchScrollingEffect();
+      }
 
-          case 'top':
-          case 'bottom':
-            _this.dom.style.width = "calc(100% - ".concat(right, "px)");
-            _this.dom.style.transform = 'translateZ(0)';
-            break;
+      var widthTransition = "width ".concat(duration, " ").concat(ease);
+      var transformTransition = "transform ".concat(duration, " ").concat(ease);
+      _this.dom.style.transition = 'none';
 
-          default:
-            break;
-        }
+      switch (placement) {
+        case 'right':
+          _this.dom.style.transform = "translateX(-".concat(right, "px)");
+          break;
 
-        clearTimeout(_this.timeout);
-        _this.timeout = setTimeout(function () {
-          if (_this.dom) {
-            _this.dom.style.transition = "".concat(transformTransition, ",").concat(widthTransition);
-            _this.dom.style.width = '';
-            _this.dom.style.transform = '';
-          }
-        });
-      };
+        case 'top':
+        case 'bottom':
+          _this.dom.style.width = "calc(100% - ".concat(right, "px)");
+          _this.dom.style.transform = 'translateZ(0)';
+          break;
 
-      _this.remScrollingEffect = function (right) {
-        var _this$props6 = _this.props,
-            placement = _this$props6.placement,
-            duration = _this$props6.duration,
-            ease = _this$props6.ease,
-            getOpenCount = _this$props6.getOpenCount,
-            switchScrollingEffect = _this$props6.switchScrollingEffect;
-        var openCount = getOpenCount && getOpenCount();
+        default:
+          break;
+      }
 
-        if (!openCount) {
-          switchScrollingEffect(true);
+      clearTimeout(_this.timeout);
+      _this.timeout = setTimeout(function () {
+        if (_this.dom) {
+          _this.dom.style.transition = "".concat(transformTransition, ",").concat(widthTransition);
+          _this.dom.style.width = '';
+          _this.dom.style.transform = '';
         }
+      });
+    };
 
-        if (transitionStr) {
-          document.body.style.overflowX = 'hidden';
-        }
+    _this.remScrollingEffect = function (right) {
+      var _this$props6 = _this.props,
+          placement = _this$props6.placement,
+          duration = _this$props6.duration,
+          ease = _this$props6.ease,
+          getOpenCount = _this$props6.getOpenCount,
+          switchScrollingEffect = _this$props6.switchScrollingEffect;
+      var openCount = getOpenCount && getOpenCount();
 
-        _this.dom.style.transition = 'none';
-        var heightTransition;
-        var widthTransition = "width ".concat(duration, " ").concat(ease);
-        var transformTransition = "transform ".concat(duration, " ").concat(ease);
+      if (!openCount) {
+        switchScrollingEffect(true);
+      }
 
-        switch (placement) {
-          case 'left':
-            {
-              _this.dom.style.width = '100%';
-              widthTransition = "width 0s ".concat(ease, " ").concat(duration);
-              break;
-            }
+      if (transitionStr) {
+        document.body.style.overflowX = 'hidden';
+      }
 
-          case 'right':
-            {
-              _this.dom.style.transform = "translateX(".concat(right, "px)");
-              _this.dom.style.width = '100%';
-              widthTransition = "width 0s ".concat(ease, " ").concat(duration);
+      _this.dom.style.transition = 'none';
+      var heightTransition;
+      var widthTransition = "width ".concat(duration, " ").concat(ease);
+      var transformTransition = "transform ".concat(duration, " ").concat(ease);
 
-              if (_this.maskDom) {
-                _this.maskDom.style.left = "-".concat(right, "px");
-                _this.maskDom.style.width = "calc(100% + ".concat(right, "px)");
-              }
+      switch (placement) {
+        case 'left':
+          {
+            _this.dom.style.width = '100%';
+            widthTransition = "width 0s ".concat(ease, " ").concat(duration);
+            break;
+          }
 
-              break;
-            }
+        case 'right':
+          {
+            _this.dom.style.transform = "translateX(".concat(right, "px)");
+            _this.dom.style.width = '100%';
+            widthTransition = "width 0s ".concat(ease, " ").concat(duration);
 
-          case 'top':
-          case 'bottom':
-            {
-              _this.dom.style.width = "calc(100% + ".concat(right, "px)");
-              _this.dom.style.height = '100%';
-              _this.dom.style.transform = 'translateZ(0)';
-              heightTransition = "height 0s ".concat(ease, " ").concat(duration);
-              break;
+            if (_this.maskDom) {
+              _this.maskDom.style.left = "-".concat(right, "px");
+              _this.maskDom.style.width = "calc(100% + ".concat(right, "px)");
             }
 
-          default:
             break;
-        }
+          }
 
-        clearTimeout(_this.timeout);
-        _this.timeout = setTimeout(function () {
-          if (_this.dom) {
-            _this.dom.style.transition = "".concat(transformTransition, ",").concat(heightTransition ? "".concat(heightTransition, ",") : '').concat(widthTransition);
-            _this.dom.style.transform = '';
-            _this.dom.style.width = '';
-            _this.dom.style.height = '';
+        case 'top':
+        case 'bottom':
+          {
+            _this.dom.style.width = "calc(100% + ".concat(right, "px)");
+            _this.dom.style.height = '100%';
+            _this.dom.style.transform = 'translateZ(0)';
+            heightTransition = "height 0s ".concat(ease, " ").concat(duration);
+            break;
           }
-        });
-      };
 
-      _this.getCurrentDrawerSome = function () {
-        return !Object.keys(currentDrawer).some(function (key) {
-          return currentDrawer[key];
-        });
-      };
+        default:
+          break;
+      }
 
-      _this.getLevelDom = function (_ref) {
-        var level = _ref.level,
-            getContainer = _ref.getContainer;
-
-        if (windowIsUndefined) {
-          return;
+      clearTimeout(_this.timeout);
+      _this.timeout = setTimeout(function () {
+        if (_this.dom) {
+          _this.dom.style.transition = "".concat(transformTransition, ",").concat(heightTransition ? "".concat(heightTransition, ",") : '').concat(widthTransition);
+          _this.dom.style.transform = '';
+          _this.dom.style.width = '';
+          _this.dom.style.height = '';
         }
+      });
+    };
 
-        var container = getContainer && getContainer();
-        var parent = container ? container.parentNode : null;
-        _this.levelDom = [];
+    _this.getCurrentDrawerSome = function () {
+      return !Object.keys(currentDrawer).some(function (key) {
+        return currentDrawer[key];
+      });
+    };
 
-        if (level === 'all') {
-          var children = parent ? Array.prototype.slice.call(parent.children) : [];
-          children.forEach(function (child) {
-            if (child.nodeName !== 'SCRIPT' && child.nodeName !== 'STYLE' && child.nodeName !== 'LINK' && child !== container) {
-              _this.levelDom.push(child);
-            }
+    _this.getLevelDom = function (_ref) {
+      var level = _ref.level,
+          getContainer = _ref.getContainer;
+
+      if (windowIsUndefined) {
+        return;
+      }
+
+      var container = getContainer && getContainer();
+      var parent = container ? container.parentNode : null;
+      _this.levelDom = [];
+
+      if (level === 'all') {
+        var children = parent ? Array.prototype.slice.call(parent.children) : [];
+        children.forEach(function (child) {
+          if (child.nodeName !== 'SCRIPT' && child.nodeName !== 'STYLE' && child.nodeName !== 'LINK' && child !== container) {
+            _this.levelDom.push(child);
+          }
+        });
+      } else if (level) {
+        dataToArray(level).forEach(function (key) {
+          document.querySelectorAll(key).forEach(function (item) {
+            _this.levelDom.push(item);
           });
-        } else if (level) {
-          dataToArray(level).forEach(function (key) {
-            document.querySelectorAll(key).forEach(function (item) {
-              _this.levelDom.push(item);
-            });
-          });
-        }
-      };
+        });
+      }
+    };
 
-      _this.getHorizontalBoolAndPlacementName = function () {
-        var placement = _this.props.placement;
-        var isHorizontal = placement === 'left' || placement === 'right';
-        var placementName = "translate".concat(isHorizontal ? 'X' : 'Y');
-        return {
-          isHorizontal: isHorizontal,
-          placementName: placementName
-        };
+    _this.getHorizontalBoolAndPlacementName = function () {
+      var placement = _this.props.placement;
+      var isHorizontal = placement === 'left' || placement === 'right';
+      var placementName = "translate".concat(isHorizontal ? 'X' : 'Y');
+      return {
+        isHorizontal: isHorizontal,
+        placementName: placementName
       };
+    };
 
-      _this.state = {
-        _self: _assertThisInitialized(_this)
-      };
-      return _this;
-    }
+    _this.state = {
+      _self: _assertThisInitialized(_this)
+    };
+    return _this;
+  }
 
-    _createClass(DrawerChild, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        var _this2 = this;
+  _createClass(DrawerChild, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
 
-        if (!windowIsUndefined) {
-          var passiveSupported = false;
+      if (!windowIsUndefined) {
+        var passiveSupported = false;
 
-          try {
-            window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
-              get: function get() {
-                passiveSupported = true;
-                return null;
-              }
-            }));
-          } catch (err) {}
+        try {
+          window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
+            get: function get() {
+              passiveSupported = true;
+              return null;
+            }
+          }));
+        } catch (err) {}
 
-          this.passive = passiveSupported ? {
-            passive: false
-          } : false;
-        }
+        this.passive = passiveSupported ? {
+          passive: false
+        } : false;
+      }
 
-        var open = this.props.open;
-        this.drawerId = "drawer_id_".concat(Number((Date.now() + Math.random()).toString().replace('.', Math.round(Math.random() * 9).toString())).toString(16));
-        this.getLevelDom(this.props);
+      var _this$props7 = this.props,
+          open = _this$props7.open,
+          getContainer = _this$props7.getContainer;
+      var container = getContainer && getContainer();
+      this.drawerId = "drawer_id_".concat(Number((Date.now() + Math.random()).toString().replace('.', Math.round(Math.random() * 9).toString())).toString(16));
+      this.getLevelDom(this.props);
 
-        if (open) {
-          currentDrawer[this.drawerId] = open; // 默认打开状态时推出 level;
+      if (open) {
+        if (container && container.parentNode === document.body) {
+          currentDrawer[this.drawerId] = open;
+        } // 默认打开状态时推出 level;
 
-          this.openLevelTransition();
-          this.forceUpdate(function () {
-            _this2.domFocus();
-          });
-        }
-      }
-    }, {
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps) {
-        var open = this.props.open;
 
-        if (open !== prevProps.open) {
-          if (open) {
-            this.domFocus();
-          }
-
-          currentDrawer[this.drawerId] = !!open;
-          this.openLevelTransition();
-        }
+        this.openLevelTransition();
+        this.forceUpdate(function () {
+          _this2.domFocus();
+        });
       }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        var _this$props7 = this.props,
-            getOpenCount = _this$props7.getOpenCount,
-            open = _this$props7.open,
-            switchScrollingEffect = _this$props7.switchScrollingEffect;
-        var openCount = typeof getOpenCount === 'function' && getOpenCount();
-        delete currentDrawer[this.drawerId];
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props8 = this.props,
+          open = _this$props8.open,
+          getContainer = _this$props8.getContainer;
+      var container = getContainer && getContainer();
 
+      if (open !== prevProps.open) {
         if (open) {
-          this.setLevelTransform(false);
-          document.body.style.touchAction = '';
+          this.domFocus();
         }
 
-        if (!openCount) {
-          document.body.style.overflow = '';
-          switchScrollingEffect(true);
+        if (container && container.parentNode === document.body) {
+          currentDrawer[this.drawerId] = !!open;
         }
-      } // tslint:disable-next-line:member-ordering
 
-    }, {
-      key: "render",
-      value: function render() {
-        var _classnames,
-            _this3 = this;
+        this.openLevelTransition();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$props9 = this.props,
+          getOpenCount = _this$props9.getOpenCount,
+          open = _this$props9.open,
+          switchScrollingEffect = _this$props9.switchScrollingEffect;
+      var openCount = typeof getOpenCount === 'function' && getOpenCount();
+      delete currentDrawer[this.drawerId];
 
-        var _this$props8 = this.props,
-            className = _this$props8.className,
-            children = _this$props8.children,
-            style = _this$props8.style,
-            width = _this$props8.width,
-            height = _this$props8.height,
-            defaultOpen = _this$props8.defaultOpen,
-            $open = _this$props8.open,
-            prefixCls = _this$props8.prefixCls,
-            placement = _this$props8.placement,
-            level = _this$props8.level,
-            levelMove = _this$props8.levelMove,
-            ease = _this$props8.ease,
-            duration = _this$props8.duration,
-            getContainer = _this$props8.getContainer,
-            handler = _this$props8.handler,
-            onChange = _this$props8.onChange,
-            afterVisibleChange = _this$props8.afterVisibleChange,
-            showMask = _this$props8.showMask,
-            maskClosable = _this$props8.maskClosable,
-            maskStyle = _this$props8.maskStyle,
-            onClose = _this$props8.onClose,
-            onHandleClick = _this$props8.onHandleClick,
-            keyboard = _this$props8.keyboard,
-            getOpenCount = _this$props8.getOpenCount,
-            switchScrollingEffect = _this$props8.switchScrollingEffect,
-            props = _objectWithoutProperties(_this$props8, ["className", "children", "style", "width", "height", "defaultOpen", "open", "prefixCls", "placement", "level", "levelMove", "ease", "duration", "getContainer", "handler", "onChange", "afterVisibleChange", "showMask", "maskClosable", "maskStyle", "onClose", "onHandleClick", "keyboard", "getOpenCount", "switchScrollingEffect"]); // 首次渲染都将是关闭状态。
+      if (open) {
+        this.setLevelTransform(false);
+        document.body.style.touchAction = '';
+      }
 
+      if (!openCount) {
+        document.body.style.overflow = '';
+        switchScrollingEffect(true);
+      }
+    } // tslint:disable-next-line:member-ordering
 
-        var open = this.dom ? $open : false;
-        var wrapperClassName = classnames(prefixCls, (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-").concat(placement), true), _defineProperty(_classnames, "".concat(prefixCls, "-open"), open), _defineProperty(_classnames, className || '', !!className), _defineProperty(_classnames, 'no-mask', !showMask), _classnames));
+  }, {
+    key: "render",
+    value: function render() {
+      var _classnames,
+          _this3 = this;
 
-        var _this$getHorizontalBo2 = this.getHorizontalBoolAndPlacementName(),
-            placementName = _this$getHorizontalBo2.placementName; // 百分比与像素动画不同步，第一次打用后全用像素动画。
-        // const defaultValue = !this.contentDom || !level ? '100%' : `${value}px`;
+      var _this$props10 = this.props,
+          className = _this$props10.className,
+          children = _this$props10.children,
+          style = _this$props10.style,
+          width = _this$props10.width,
+          height = _this$props10.height,
+          defaultOpen = _this$props10.defaultOpen,
+          $open = _this$props10.open,
+          prefixCls = _this$props10.prefixCls,
+          placement = _this$props10.placement,
+          level = _this$props10.level,
+          levelMove = _this$props10.levelMove,
+          ease = _this$props10.ease,
+          duration = _this$props10.duration,
+          getContainer = _this$props10.getContainer,
+          handler = _this$props10.handler,
+          onChange = _this$props10.onChange,
+          afterVisibleChange = _this$props10.afterVisibleChange,
+          showMask = _this$props10.showMask,
+          maskClosable = _this$props10.maskClosable,
+          maskStyle = _this$props10.maskStyle,
+          onClose = _this$props10.onClose,
+          onHandleClick = _this$props10.onHandleClick,
+          keyboard = _this$props10.keyboard,
+          getOpenCount = _this$props10.getOpenCount,
+          switchScrollingEffect = _this$props10.switchScrollingEffect,
+          props = _objectWithoutProperties(_this$props10, ["className", "children", "style", "width", "height", "defaultOpen", "open", "prefixCls", "placement", "level", "levelMove", "ease", "duration", "getContainer", "handler", "onChange", "afterVisibleChange", "showMask", "maskClosable", "maskStyle", "onClose", "onHandleClick", "keyboard", "getOpenCount", "switchScrollingEffect"]); // 首次渲染都将是关闭状态。
 
 
-        var placementPos = placement === 'left' || placement === 'top' ? '-100%' : '100%';
-        var transform = open ? '' : "".concat(placementName, "(").concat(placementPos, ")");
-        var handlerChildren = handler && React.cloneElement(handler, {
-          onClick: function onClick(e) {
-            if (handler.props.onClick) {
-              handler.props.onClick();
-            }
+      var open = this.dom ? $open : false;
+      var wrapperClassName = classnames(prefixCls, (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-").concat(placement), true), _defineProperty(_classnames, "".concat(prefixCls, "-open"), open), _defineProperty(_classnames, className || '', !!className), _defineProperty(_classnames, 'no-mask', !showMask), _classnames));
 
-            if (onHandleClick) {
-              onHandleClick(e);
-            }
-          },
-          ref: function ref(c) {
-            _this3.handlerDom = c;
-          }
-        });
-        return React.createElement("div", Object.assign({}, props, {
-          tabIndex: -1,
-          className: wrapperClassName,
-          style: style,
-          ref: function ref(c) {
-            _this3.dom = c;
-          },
-          onKeyDown: open && keyboard ? this.onKeyDown : undefined,
-          onTransitionEnd: this.onWrapperTransitionEnd
-        }), showMask && React.createElement("div", {
-          className: "".concat(prefixCls, "-mask"),
-          onClick: maskClosable ? onClose : undefined,
-          style: maskStyle,
-          ref: function ref(c) {
-            _this3.maskDom = c;
-          }
-        }), React.createElement("div", {
-          className: "".concat(prefixCls, "-content-wrapper"),
-          style: {
-            transform: transform,
-            msTransform: transform,
-            width: isNumeric(width) ? "".concat(width, "px") : width,
-            height: isNumeric(height) ? "".concat(height, "px") : height
-          },
-          ref: function ref(c) {
-            _this3.contentWrapper = c;
-          }
-        }, React.createElement("div", {
-          className: "".concat(prefixCls, "-content"),
-          ref: function ref(c) {
-            _this3.contentDom = c;
-          },
-          onTouchStart: open && showMask ? this.removeStartHandler : undefined,
-          onTouchMove: open && showMask ? this.removeMoveHandler : undefined
-        }, children), handlerChildren));
-      }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, _ref2) {
-        var prevProps = _ref2.prevProps,
-            _self = _ref2._self;
-        var nextState = {
-          prevProps: props
-        };
+      var _this$getHorizontalBo2 = this.getHorizontalBoolAndPlacementName(),
+          placementName = _this$getHorizontalBo2.placementName; // 百分比与像素动画不同步，第一次打用后全用像素动画。
+      // const defaultValue = !this.contentDom || !level ? '100%' : `${value}px`;
 
-        if (prevProps !== undefined) {
-          var placement = props.placement,
-              level = props.level;
 
-          if (placement !== prevProps.placement) {
-            // test 的 bug, 有动画过场，删除 dom
-            _self.contentDom = null;
+      var placementPos = placement === 'left' || placement === 'top' ? '-100%' : '100%';
+      var transform = open ? '' : "".concat(placementName, "(").concat(placementPos, ")");
+      var handlerChildren = handler && React.cloneElement(handler, {
+        onClick: function onClick(e) {
+          if (handler.props.onClick) {
+            handler.props.onClick();
           }
 
-          if (level !== prevProps.level) {
-            _self.getLevelDom(props);
+          if (onHandleClick) {
+            onHandleClick(e);
           }
+        },
+        ref: function ref(c) {
+          _this3.handlerDom = c;
         }
+      });
+      return React.createElement("div", Object.assign({}, props, {
+        tabIndex: -1,
+        className: wrapperClassName,
+        style: style,
+        ref: function ref(c) {
+          _this3.dom = c;
+        },
+        onKeyDown: open && keyboard ? this.onKeyDown : undefined,
+        onTransitionEnd: this.onWrapperTransitionEnd
+      }), showMask && React.createElement("div", {
+        className: "".concat(prefixCls, "-mask"),
+        onClick: maskClosable ? onClose : undefined,
+        style: maskStyle,
+        ref: function ref(c) {
+          _this3.maskDom = c;
+        }
+      }), React.createElement("div", {
+        className: "".concat(prefixCls, "-content-wrapper"),
+        style: {
+          transform: transform,
+          msTransform: transform,
+          width: isNumeric(width) ? "".concat(width, "px") : width,
+          height: isNumeric(height) ? "".concat(height, "px") : height
+        },
+        ref: function ref(c) {
+          _this3.contentWrapper = c;
+        }
+      }, React.createElement("div", {
+        className: "".concat(prefixCls, "-content"),
+        ref: function ref(c) {
+          _this3.contentDom = c;
+        },
+        onTouchStart: open && showMask ? this.removeStartHandler : undefined,
+        onTouchMove: open && showMask ? this.removeMoveHandler : undefined
+      }, children), handlerChildren));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, _ref2) {
+      var prevProps = _ref2.prevProps,
+          _self = _ref2._self;
+      var nextState = {
+        prevProps: props
+      };
 
-        return nextState;
+      if (prevProps !== undefined) {
+        var placement = props.placement,
+            level = props.level;
+
+        if (placement !== prevProps.placement) {
+          // test 的 bug, 有动画过场，删除 dom
+          _self.contentDom = null;
+        }
+
+        if (level !== prevProps.level) {
+          _self.getLevelDom(props);
+        }
       }
-    }]);
 
-    return DrawerChild;
-  }(React.Component);
+      return nextState;
+    }
+  }]);
 
-  DrawerChild.defaultProps = {
-    switchScrollingEffect: function switchScrollingEffect() {}
-  };
   return DrawerChild;
-}();
+}(React.Component);
 
+DrawerChild.defaultProps = {
+  switchScrollingEffect: function switchScrollingEffect() {}
+};
 export default DrawerChild;

es/DrawerWrapper.js

@@ -16,164 +16,158 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 
-var DrawerWrapper =
-/** @class */
-function () {
-  var DrawerWrapper = /*#__PURE__*/function (_React$Component) {
-    _inherits(DrawerWrapper, _React$Component);
+var DrawerWrapper = /*#__PURE__*/function (_React$Component) {
+  _inherits(DrawerWrapper, _React$Component);
 
-    var _super = _createSuper(DrawerWrapper);
+  var _super = _createSuper(DrawerWrapper);
 
-    function DrawerWrapper(props) {
-      var _this;
+  function DrawerWrapper(props) {
+    var _this;
 
-      _classCallCheck(this, DrawerWrapper);
+    _classCallCheck(this, DrawerWrapper);
 
-      _this = _super.call(this, props);
+    _this = _super.call(this, props);
 
-      _this.onHandleClick = function (e) {
-        var _this$props = _this.props,
-            onHandleClick = _this$props.onHandleClick,
-            $open = _this$props.open;
+    _this.onHandleClick = function (e) {
+      var _this$props = _this.props,
+          onHandleClick = _this$props.onHandleClick,
+          $open = _this$props.open;
 
-        if (onHandleClick) {
-          onHandleClick(e);
-        }
+      if (onHandleClick) {
+        onHandleClick(e);
+      }
 
-        if (typeof $open === 'undefined') {
-          var _open = _this.state.open;
+      if (typeof $open === 'undefined') {
+        var _open = _this.state.open;
 
-          _this.setState({
-            open: !_open
-          });
-        }
-      };
+        _this.setState({
+          open: !_open
+        });
+      }
+    };
 
-      _this.onClose = function (e) {
-        var _this$props2 = _this.props,
-            onClose = _this$props2.onClose,
-            open = _this$props2.open;
+    _this.onClose = function (e) {
+      var _this$props2 = _this.props,
+          onClose = _this$props2.onClose,
+          open = _this$props2.open;
 
-        if (onClose) {
-          onClose(e);
-        }
+      if (onClose) {
+        onClose(e);
+      }
 
-        if (typeof open === 'undefined') {
-          _this.setState({
-            open: false
-          });
-        }
-      };
+      if (typeof open === 'undefined') {
+        _this.setState({
+          open: false
+        });
+      }
+    };
 
-      var open = typeof props.open !== 'undefined' ? props.open : !!props.defaultOpen;
-      _this.state = {
-        open: open
-      };
+    var open = typeof props.open !== 'undefined' ? props.open : !!props.defaultOpen;
+    _this.state = {
+      open: open
+    };
 
-      if ('onMaskClick' in props) {
-        console.warn('`onMaskClick` are removed, please use `onClose` instead.');
-      }
-
-      return _this;
+    if ('onMaskClick' in props) {
+      console.warn('`onMaskClick` are removed, please use `onClose` instead.');
     }
 
-    _createClass(DrawerWrapper, [{
-      key: "render",
-      // tslint:disable-next-line:member-ordering
-      value: function render() {
-        var _this2 = this;
+    return _this;
+  }
 
-        var _this$props3 = this.props,
-            defaultOpen = _this$props3.defaultOpen,
-            getContainer = _this$props3.getContainer,
-            wrapperClassName = _this$props3.wrapperClassName,
-            forceRender = _this$props3.forceRender,
-            handler = _this$props3.handler,
-            props = _objectWithoutProperties(_this$props3, ["defaultOpen", "getContainer", "wrapperClassName", "forceRender", "handler"]);
+  _createClass(DrawerWrapper, [{
+    key: "render",
+    // tslint:disable-next-line:member-ordering
+    value: function render() {
+      var _this2 = this;
 
-        var open = this.state.open; // 渲染在当前 dom 里；
+      var _this$props3 = this.props,
+          defaultOpen = _this$props3.defaultOpen,
+          getContainer = _this$props3.getContainer,
+          wrapperClassName = _this$props3.wrapperClassName,
+          forceRender = _this$props3.forceRender,
+          handler = _this$props3.handler,
+          props = _objectWithoutProperties(_this$props3, ["defaultOpen", "getContainer", "wrapperClassName", "forceRender", "handler"]);
 
-        if (!getContainer) {
-          return React.createElement("div", {
-            className: wrapperClassName,
-            ref: function ref(c) {
-              _this2.dom = c;
-            }
-          }, React.createElement(Child, Object.assign({}, props, {
-            open: open,
-            handler: handler,
-            getContainer: function getContainer() {
-              return _this2.dom;
-            },
-            onClose: this.onClose,
-            onHandleClick: this.onHandleClick
-          })));
-        } // 如果有 handler 为内置强制渲染；
+      var open = this.state.open; // 渲染在当前 dom 里；
 
+      if (!getContainer) {
+        return React.createElement("div", {
+          className: wrapperClassName,
+          ref: function ref(c) {
+            _this2.dom = c;
+          }
+        }, React.createElement(Child, Object.assign({}, props, {
+          open: open,
+          handler: handler,
+          getContainer: function getContainer() {
+            return _this2.dom;
+          },
+          onClose: this.onClose,
+          onHandleClick: this.onHandleClick
+        })));
+      } // 如果有 handler 为内置强制渲染；
 
-        var $forceRender = !!handler || forceRender;
-        return React.createElement(Portal, {
-          visible: open,
-          forceRender: $forceRender,
-          getContainer: getContainer,
-          wrapperClassName: wrapperClassName
-        }, function (_ref) {
-          var visible = _ref.visible,
-              afterClose = _ref.afterClose,
-              rest = _objectWithoutProperties(_ref, ["visible", "afterClose"]);
 
-          return (// react 15，componentWillUnmount 时 Portal 返回 afterClose, visible.
-            React.createElement(Child, Object.assign({}, props, rest, {
-              open: visible !== undefined ? visible : open,
-              afterVisibleChange: afterClose !== undefined ? afterClose : props.afterVisibleChange,
-              handler: handler,
-              onClose: _this2.onClose,
-              onHandleClick: _this2.onHandleClick
-            }))
-          );
-        });
-      }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, _ref2) {
-        var prevProps = _ref2.prevProps;
-        var newState = {
-          prevProps: props
-        };
+      var $forceRender = !!handler || forceRender;
+      return React.createElement(Portal, {
+        visible: open,
+        forceRender: $forceRender,
+        getContainer: getContainer,
+        wrapperClassName: wrapperClassName
+      }, function (_ref) {
+        var visible = _ref.visible,
+            afterClose = _ref.afterClose,
+            rest = _objectWithoutProperties(_ref, ["visible", "afterClose"]);
 
-        if (typeof prevProps !== 'undefined' && props.open !== prevProps.open) {
-          newState.open = props.open;
-        }
+        return (// react 15，componentWillUnmount 时 Portal 返回 afterClose, visible.
+          React.createElement(Child, Object.assign({}, props, rest, {
+            open: visible !== undefined ? visible : open,
+            afterVisibleChange: afterClose !== undefined ? afterClose : props.afterVisibleChange,
+            handler: handler,
+            onClose: _this2.onClose,
+            onHandleClick: _this2.onHandleClick
+          }))
+        );
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, _ref2) {
+      var prevProps = _ref2.prevProps;
+      var newState = {
+        prevProps: props
+      };
 
-        return newState;
+      if (typeof prevProps !== 'undefined' && props.open !== prevProps.open) {
+        newState.open = props.open;
       }
-    }]);
 
-    return DrawerWrapper;
-  }(React.Component);
+      return newState;
+    }
+  }]);
 
-  DrawerWrapper.defaultProps = {
-    prefixCls: 'drawer',
-    placement: 'left',
-    getContainer: 'body',
-    defaultOpen: false,
-    level: 'all',
-    duration: '.3s',
-    ease: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
-    onChange: function onChange() {},
-    afterVisibleChange: function afterVisibleChange() {},
-    handler: React.createElement("div", {
-      className: "drawer-handle"
-    }, React.createElement("i", {
-      className: "drawer-handle-icon"
-    })),
-    showMask: true,
-    maskClosable: true,
-    maskStyle: {},
-    wrapperClassName: '',
-    className: '',
-    keyboard: true,
-    forceRender: false
-  };
   return DrawerWrapper;
-}();
+}(React.Component);
 
+DrawerWrapper.defaultProps = {
+  prefixCls: 'drawer',
+  placement: 'left',
+  getContainer: 'body',
+  defaultOpen: false,
+  level: 'all',
+  duration: '.3s',
+  ease: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
+  onChange: function onChange() {},
+  afterVisibleChange: function afterVisibleChange() {},
+  handler: React.createElement("div", {
+    className: "drawer-handle"
+  }, React.createElement("i", {
+    className: "drawer-handle-icon"
+  })),
+  showMask: true,
+  maskClosable: true,
+  maskStyle: {},
+  wrapperClassName: '',
+  className: '',
+  keyboard: true,
+  forceRender: false
+};
 export default DrawerWrapper;

lib/DrawerChild.js

@@ -44,563 +44,569 @@ "use strict";
 
-var DrawerChild =
-/** @class */
-function () {
-  var DrawerChild = /*#__PURE__*/function (_React$Component) {
-    (0, _inherits2.default)(DrawerChild, _React$Component);
+var DrawerChild = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(DrawerChild, _React$Component);
 
-    var _super = _createSuper(DrawerChild);
+  var _super = _createSuper(DrawerChild);
 
-    function DrawerChild(props) {
-      var _this;
+  function DrawerChild(props) {
+    var _this;
 
-      (0, _classCallCheck2.default)(this, DrawerChild);
-      _this = _super.call(this, props);
+    (0, _classCallCheck2.default)(this, DrawerChild);
+    _this = _super.call(this, props);
 
-      _this.domFocus = function () {
-        if (_this.dom) {
-          _this.dom.focus();
-        }
-      };
+    _this.domFocus = function () {
+      if (_this.dom) {
+        _this.dom.focus();
+      }
+    };
 
-      _this.removeStartHandler = function (e) {
-        if (e.touches.length > 1) {
-          return;
-        }
+    _this.removeStartHandler = function (e) {
+      if (e.touches.length > 1) {
+        return;
+      }
 
-        _this.startPos = {
-          x: e.touches[0].clientX,
-          y: e.touches[0].clientY
-        };
+      _this.startPos = {
+        x: e.touches[0].clientX,
+        y: e.touches[0].clientY
       };
+    };
 
-      _this.removeMoveHandler = function (e) {
-        if (e.changedTouches.length > 1) {
-          return;
-        }
+    _this.removeMoveHandler = function (e) {
+      if (e.changedTouches.length > 1) {
+        return;
+      }
 
-        var currentTarget = e.currentTarget;
-        var differX = e.changedTouches[0].clientX - _this.startPos.x;
-        var differY = e.changedTouches[0].clientY - _this.startPos.y;
+      var currentTarget = e.currentTarget;
+      var differX = e.changedTouches[0].clientX - _this.startPos.x;
+      var differY = e.changedTouches[0].clientY - _this.startPos.y;
 
-        if ((currentTarget === _this.maskDom || currentTarget === _this.handlerDom || currentTarget === _this.contentDom && (0, _utils.getTouchParentScroll)(currentTarget, e.target, differX, differY)) && e.cancelable) {
-          e.preventDefault();
-        }
-      };
+      if ((currentTarget === _this.maskDom || currentTarget === _this.handlerDom || currentTarget === _this.contentDom && (0, _utils.getTouchParentScroll)(currentTarget, e.target, differX, differY)) && e.cancelable) {
+        e.preventDefault();
+      }
+    };
 
-      _this.transitionEnd = function (e) {
-        var dom = e.target;
-        (0, _utils.removeEventListener)(dom, _utils.transitionEnd, _this.transitionEnd);
-        dom.style.transition = '';
-      };
+    _this.transitionEnd = function (e) {
+      var dom = e.target;
+      (0, _utils.removeEventListener)(dom, _utils.transitionEnd, _this.transitionEnd);
+      dom.style.transition = '';
+    };
 
-      _this.onKeyDown = function (e) {
-        if (e.keyCode === _KeyCode.default.ESC) {
-          var onClose = _this.props.onClose;
-          e.stopPropagation();
+    _this.onKeyDown = function (e) {
+      if (e.keyCode === _KeyCode.default.ESC) {
+        var onClose = _this.props.onClose;
+        e.stopPropagation();
 
-          if (onClose) {
-            onClose(e);
-          }
+        if (onClose) {
+          onClose(e);
         }
-      };
+      }
+    };
 
-      _this.onWrapperTransitionEnd = function (e) {
-        var _this$props = _this.props,
-            open = _this$props.open,
-            afterVisibleChange = _this$props.afterVisibleChange;
+    _this.onWrapperTransitionEnd = function (e) {
+      var _this$props = _this.props,
+          open = _this$props.open,
+          afterVisibleChange = _this$props.afterVisibleChange;
 
-        if (e.target === _this.contentWrapper && e.propertyName.match(/transform$/)) {
-          _this.dom.style.transition = '';
+      if (e.target === _this.contentWrapper && e.propertyName.match(/transform$/)) {
+        _this.dom.style.transition = '';
 
-          if (!open && _this.getCurrentDrawerSome()) {
-            document.body.style.overflowX = '';
+        if (!open && _this.getCurrentDrawerSome()) {
+          document.body.style.overflowX = '';
 
-            if (_this.maskDom) {
-              _this.maskDom.style.left = '';
-              _this.maskDom.style.width = '';
-            }
+          if (_this.maskDom) {
+            _this.maskDom.style.left = '';
+            _this.maskDom.style.width = '';
           }
+        }
 
-          if (afterVisibleChange) {
-            afterVisibleChange(!!open);
-          }
+        if (afterVisibleChange) {
+          afterVisibleChange(!!open);
         }
-      };
+      }
+    };
 
-      _this.openLevelTransition = function () {
-        var _this$props2 = _this.props,
-            open = _this$props2.open,
-            width = _this$props2.width,
-            height = _this$props2.height;
+    _this.openLevelTransition = function () {
+      var _this$props2 = _this.props,
+          open = _this$props2.open,
+          width = _this$props2.width,
+          height = _this$props2.height;
 
-        var _this$getHorizontalBo = _this.getHorizontalBoolAndPlacementName(),
-            isHorizontal = _this$getHorizontalBo.isHorizontal,
-            placementName = _this$getHorizontalBo.placementName;
+      var _this$getHorizontalBo = _this.getHorizontalBoolAndPlacementName(),
+          isHorizontal = _this$getHorizontalBo.isHorizontal,
+          placementName = _this$getHorizontalBo.placementName;
 
-        var contentValue = _this.contentDom ? _this.contentDom.getBoundingClientRect()[isHorizontal ? 'width' : 'height'] : 0;
-        var value = (isHorizontal ? width : height) || contentValue;
+      var contentValue = _this.contentDom ? _this.contentDom.getBoundingClientRect()[isHorizontal ? 'width' : 'height'] : 0;
+      var value = (isHorizontal ? width : height) || contentValue;
 
-        _this.setLevelAndScrolling(open, placementName, value);
-      };
+      _this.setLevelAndScrolling(open, placementName, value);
+    };
 
-      _this.setLevelTransform = function (open, placementName, value, right) {
-        var _this$props3 = _this.props,
-            placement = _this$props3.placement,
-            levelMove = _this$props3.levelMove,
-            duration = _this$props3.duration,
-            ease = _this$props3.ease,
-            showMask = _this$props3.showMask; // router 切换时可能会导至页面失去滚动条，所以需要时时获取。
+    _this.setLevelTransform = function (open, placementName, value, right) {
+      var _this$props3 = _this.props,
+          placement = _this$props3.placement,
+          levelMove = _this$props3.levelMove,
+          duration = _this$props3.duration,
+          ease = _this$props3.ease,
+          showMask = _this$props3.showMask; // router 切换时可能会导至页面失去滚动条，所以需要时时获取。
 
-        _this.levelDom.forEach(function (dom) {
-          dom.style.transition = "transform ".concat(duration, " ").concat(ease);
-          (0, _utils.addEventListener)(dom, _utils.transitionEnd, _this.transitionEnd);
-          var levelValue = open ? value : 0;
+      _this.levelDom.forEach(function (dom) {
+        dom.style.transition = "transform ".concat(duration, " ").concat(ease);
+        (0, _utils.addEventListener)(dom, _utils.transitionEnd, _this.transitionEnd);
+        var levelValue = open ? value : 0;
 
-          if (levelMove) {
-            var $levelMove = (0, _utils.transformArguments)(levelMove, {
-              target: dom,
-              open: open
-            });
-            levelValue = open ? $levelMove[0] : $levelMove[1] || 0;
-          }
+        if (levelMove) {
+          var $levelMove = (0, _utils.transformArguments)(levelMove, {
+            target: dom,
+            open: open
+          });
+          levelValue = open ? $levelMove[0] : $levelMove[1] || 0;
+        }
 
-          var $value = typeof levelValue === 'number' ? "".concat(levelValue, "px") : levelValue;
-          var placementPos = placement === 'left' || placement === 'top' ? $value : "-".concat($value);
-          placementPos = showMask && placement === 'right' && right ? "calc(".concat(placementPos, " + ").concat(right, "px)") : placementPos;
-          dom.style.transform = levelValue ? "".concat(placementName, "(").concat(placementPos, ")") : '';
-        });
-      };
+        var $value = typeof levelValue === 'number' ? "".concat(levelValue, "px") : levelValue;
+        var placementPos = placement === 'left' || placement === 'top' ? $value : "-".concat($value);
+        placementPos = showMask && placement === 'right' && right ? "calc(".concat(placementPos, " + ").concat(right, "px)") : placementPos;
+        dom.style.transform = levelValue ? "".concat(placementName, "(").concat(placementPos, ")") : '';
+      });
+    };
 
-      _this.setLevelAndScrolling = function (open, placementName, value) {
-        var onChange = _this.props.onChange;
+    _this.setLevelAndScrolling = function (open, placementName, value) {
+      var onChange = _this.props.onChange;
 
-        if (!_utils.windowIsUndefined) {
-          var right = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth ? (0, _getScrollBarSize.default)(true) : 0;
+      if (!_utils.windowIsUndefined) {
+        var right = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth ? (0, _getScrollBarSize.default)(true) : 0;
 
-          _this.setLevelTransform(open, placementName, value, right);
+        _this.setLevelTransform(open, placementName, value, right);
 
-          _this.toggleScrollingToDrawerAndBody(right);
-        }
+        _this.toggleScrollingToDrawerAndBody(right);
+      }
 
-        if (onChange) {
-          onChange(open);
-        }
-      };
+      if (onChange) {
+        onChange(open);
+      }
+    };
 
-      _this.toggleScrollingToDrawerAndBody = function (right) {
-        var _this$props4 = _this.props,
-            getOpenCount = _this$props4.getOpenCount,
-            getContainer = _this$props4.getContainer,
-            showMask = _this$props4.showMask,
-            open = _this$props4.open;
-        var container = getContainer && getContainer();
-        var openCount = getOpenCount && getOpenCount(); // 处理 body 滚动
+    _this.toggleScrollingToDrawerAndBody = function (right) {
+      var _this$props4 = _this.props,
+          getOpenCount = _this$props4.getOpenCount,
+          getContainer = _this$props4.getContainer,
+          showMask = _this$props4.showMask,
+          open = _this$props4.open;
+      var container = getContainer && getContainer();
+      var openCount = getOpenCount && getOpenCount(); // 处理 body 滚动
 
-        if (container && container.parentNode === document.body && showMask) {
-          var eventArray = ['touchstart'];
-          var domArray = [document.body, _this.maskDom, _this.handlerDom, _this.contentDom];
+      if (container && container.parentNode === document.body && showMask) {
+        var eventArray = ['touchstart'];
+        var domArray = [document.body, _this.maskDom, _this.handlerDom, _this.contentDom];
 
-          if (open && document.body.style.overflow !== 'hidden') {
-            if (right) {
-              _this.addScrollingEffect(right);
-            }
+        if (open && document.body.style.overflow !== 'hidden') {
+          if (right) {
+            _this.addScrollingEffect(right);
+          }
 
-            if (openCount === 1) {
-              document.body.style.overflow = 'hidden';
-            }
+          if (openCount === 1) {
+            document.body.style.overflow = 'hidden';
+          }
 
-            document.body.style.touchAction = 'none'; // 手机禁滚
+          document.body.style.touchAction = 'none'; // 手机禁滚
 
-            domArray.forEach(function (item, i) {
-              if (!item) {
-                return;
-              }
-
-              (0, _utils.addEventListener)(item, eventArray[i] || 'touchmove', i ? _this.removeMoveHandler : _this.removeStartHandler, _this.passive);
-            });
-          } else if (_this.getCurrentDrawerSome()) {
-            // 没有弹框的状态下清除 overflow;
-            if (!openCount) {
-              document.body.style.overflow = '';
+          domArray.forEach(function (item, i) {
+            if (!item) {
+              return;
             }
 
-            document.body.style.touchAction = '';
+            (0, _utils.addEventListener)(item, eventArray[i] || 'touchmove', i ? _this.removeMoveHandler : _this.removeStartHandler, _this.passive);
+          });
+        } else if (_this.getCurrentDrawerSome()) {
+          // 没有弹框的状态下清除 overflow;
+          if (!openCount) {
+            document.body.style.overflow = '';
+          }
 
-            if (right) {
-              _this.remScrollingEffect(right);
-            } // 恢复事件
+          document.body.style.touchAction = '';
 
+          if (right) {
+            _this.remScrollingEffect(right);
+          } // 恢复事件
 
-            domArray.forEach(function (item, i) {
-              if (!item) {
-                return;
-              }
 
-              (0, _utils.removeEventListener)(item, eventArray[i] || 'touchmove', i ? _this.removeMoveHandler : _this.removeStartHandler, _this.passive);
-            });
-          }
-        }
-      };
+          domArray.forEach(function (item, i) {
+            if (!item) {
+              return;
+            }
 
-      _this.addScrollingEffect = function (right) {
-        var _this$props5 = _this.props,
-            placement = _this$props5.placement,
-            duration = _this$props5.duration,
-            ease = _this$props5.ease,
-            getOpenCount = _this$props5.getOpenCount,
-            switchScrollingEffect = _this$props5.switchScrollingEffect;
-        var openCount = getOpenCount && getOpenCount();
-
-        if (openCount === 1) {
-          switchScrollingEffect();
+            (0, _utils.removeEventListener)(item, eventArray[i] || 'touchmove', i ? _this.removeMoveHandler : _this.removeStartHandler, _this.passive);
+          });
         }
+      }
+    };
 
-        var widthTransition = "width ".concat(duration, " ").concat(ease);
-        var transformTransition = "transform ".concat(duration, " ").concat(ease);
-        _this.dom.style.transition = 'none';
+    _this.addScrollingEffect = function (right) {
+      var _this$props5 = _this.props,
+          placement = _this$props5.placement,
+          duration = _this$props5.duration,
+          ease = _this$props5.ease,
+          getOpenCount = _this$props5.getOpenCount,
+          switchScrollingEffect = _this$props5.switchScrollingEffect;
+      var openCount = getOpenCount && getOpenCount();
 
-        switch (placement) {
-          case 'right':
-            _this.dom.style.transform = "translateX(-".concat(right, "px)");
-            break;
+      if (openCount === 1) {
+        switchScrollingEffect();
+      }
 
-          case 'top':
-          case 'bottom':
-            _this.dom.style.width = "calc(100% - ".concat(right, "px)");
-            _this.dom.style.transform = 'translateZ(0)';
-            break;
+      var widthTransition = "width ".concat(duration, " ").concat(ease);
+      var transformTransition = "transform ".concat(duration, " ").concat(ease);
+      _this.dom.style.transition = 'none';
 
-          default:
-            break;
-        }
+      switch (placement) {
+        case 'right':
+          _this.dom.style.transform = "translateX(-".concat(right, "px)");
+          break;
 
-        clearTimeout(_this.timeout);
-        _this.timeout = setTimeout(function () {
-          if (_this.dom) {
-            _this.dom.style.transition = "".concat(transformTransition, ",").concat(widthTransition);
-            _this.dom.style.width = '';
-            _this.dom.style.transform = '';
-          }
-        });
-      };
+        case 'top':
+        case 'bottom':
+          _this.dom.style.width = "calc(100% - ".concat(right, "px)");
+          _this.dom.style.transform = 'translateZ(0)';
+          break;
 
-      _this.remScrollingEffect = function (right) {
-        var _this$props6 = _this.props,
-            placement = _this$props6.placement,
-            duration = _this$props6.duration,
-            ease = _this$props6.ease,
-            getOpenCount = _this$props6.getOpenCount,
-            switchScrollingEffect = _this$props6.switchScrollingEffect;
-        var openCount = getOpenCount && getOpenCount();
+        default:
+          break;
+      }
 
-        if (!openCount) {
-          switchScrollingEffect(true);
+      clearTimeout(_this.timeout);
+      _this.timeout = setTimeout(function () {
+        if (_this.dom) {
+          _this.dom.style.transition = "".concat(transformTransition, ",").concat(widthTransition);
+          _this.dom.style.width = '';
+          _this.dom.style.transform = '';
         }
+      });
+    };
 
-        if (_utils.transitionStr) {
-          document.body.style.overflowX = 'hidden';
-        }
+    _this.remScrollingEffect = function (right) {
+      var _this$props6 = _this.props,
+          placement = _this$props6.placement,
+          duration = _this$props6.duration,
+          ease = _this$props6.ease,
+          getOpenCount = _this$props6.getOpenCount,
+          switchScrollingEffect = _this$props6.switchScrollingEffect;
+      var openCount = getOpenCount && getOpenCount();
 
-        _this.dom.style.transition = 'none';
-        var heightTransition;
-        var widthTransition = "width ".concat(duration, " ").concat(ease);
-        var transformTransition = "transform ".concat(duration, " ").concat(ease);
+      if (!openCount) {
+        switchScrollingEffect(true);
+      }
 
-        switch (placement) {
-          case 'left':
-            {
-              _this.dom.style.width = '100%';
-              widthTransition = "width 0s ".concat(ease, " ").concat(duration);
-              break;
-            }
+      if (_utils.transitionStr) {
+        document.body.style.overflowX = 'hidden';
+      }
 
-          case 'right':
-            {
-              _this.dom.style.transform = "translateX(".concat(right, "px)");
-              _this.dom.style.width = '100%';
-              widthTransition = "width 0s ".concat(ease, " ").concat(duration);
+      _this.dom.style.transition = 'none';
+      var heightTransition;
+      var widthTransition = "width ".concat(duration, " ").concat(ease);
+      var transformTransition = "transform ".concat(duration, " ").concat(ease);
 
-              if (_this.maskDom) {
-                _this.maskDom.style.left = "-".concat(right, "px");
-                _this.maskDom.style.width = "calc(100% + ".concat(right, "px)");
-              }
+      switch (placement) {
+        case 'left':
+          {
+            _this.dom.style.width = '100%';
+            widthTransition = "width 0s ".concat(ease, " ").concat(duration);
+            break;
+          }
 
-              break;
-            }
+        case 'right':
+          {
+            _this.dom.style.transform = "translateX(".concat(right, "px)");
+            _this.dom.style.width = '100%';
+            widthTransition = "width 0s ".concat(ease, " ").concat(duration);
 
-          case 'top':
-          case 'bottom':
-            {
-              _this.dom.style.width = "calc(100% + ".concat(right, "px)");
-              _this.dom.style.height = '100%';
-              _this.dom.style.transform = 'translateZ(0)';
-              heightTransition = "height 0s ".concat(ease, " ").concat(duration);
-              break;
+            if (_this.maskDom) {
+              _this.maskDom.style.left = "-".concat(right, "px");
+              _this.maskDom.style.width = "calc(100% + ".concat(right, "px)");
             }
 
-          default:
             break;
-        }
+          }
 
-        clearTimeout(_this.timeout);
-        _this.timeout = setTimeout(function () {
-          if (_this.dom) {
-            _this.dom.style.transition = "".concat(transformTransition, ",").concat(heightTransition ? "".concat(heightTransition, ",") : '').concat(widthTransition);
-            _this.dom.style.transform = '';
-            _this.dom.style.width = '';
-            _this.dom.style.height = '';
+        case 'top':
+        case 'bottom':
+          {
+            _this.dom.style.width = "calc(100% + ".concat(right, "px)");
+            _this.dom.style.height = '100%';
+            _this.dom.style.transform = 'translateZ(0)';
+            heightTransition = "height 0s ".concat(ease, " ").concat(duration);
+            break;
           }
-        });
-      };
 
-      _this.getCurrentDrawerSome = function () {
-        return !Object.keys(currentDrawer).some(function (key) {
-          return currentDrawer[key];
-        });
-      };
+        default:
+          break;
+      }
 
-      _this.getLevelDom = function (_ref) {
-        var level = _ref.level,
-            getContainer = _ref.getContainer;
-
-        if (_utils.windowIsUndefined) {
-          return;
+      clearTimeout(_this.timeout);
+      _this.timeout = setTimeout(function () {
+        if (_this.dom) {
+          _this.dom.style.transition = "".concat(transformTransition, ",").concat(heightTransition ? "".concat(heightTransition, ",") : '').concat(widthTransition);
+          _this.dom.style.transform = '';
+          _this.dom.style.width = '';
+          _this.dom.style.height = '';
         }
+      });
+    };
 
-        var container = getContainer && getContainer();
-        var parent = container ? container.parentNode : null;
-        _this.levelDom = [];
+    _this.getCurrentDrawerSome = function () {
+      return !Object.keys(currentDrawer).some(function (key) {
+        return currentDrawer[key];
+      });
+    };
 
-        if (level === 'all') {
-          var children = parent ? Array.prototype.slice.call(parent.children) : [];
-          children.forEach(function (child) {
-            if (child.nodeName !== 'SCRIPT' && child.nodeName !== 'STYLE' && child.nodeName !== 'LINK' && child !== container) {
-              _this.levelDom.push(child);
-            }
+    _this.getLevelDom = function (_ref) {
+      var level = _ref.level,
+          getContainer = _ref.getContainer;
+
+      if (_utils.windowIsUndefined) {
+        return;
+      }
+
+      var container = getContainer && getContainer();
+      var parent = container ? container.parentNode : null;
+      _this.levelDom = [];
+
+      if (level === 'all') {
+        var children = parent ? Array.prototype.slice.call(parent.children) : [];
+        children.forEach(function (child) {
+          if (child.nodeName !== 'SCRIPT' && child.nodeName !== 'STYLE' && child.nodeName !== 'LINK' && child !== container) {
+            _this.levelDom.push(child);
+          }
+        });
+      } else if (level) {
+        (0, _utils.dataToArray)(level).forEach(function (key) {
+          document.querySelectorAll(key).forEach(function (item) {
+            _this.levelDom.push(item);
           });
-        } else if (level) {
-          (0, _utils.dataToArray)(level).forEach(function (key) {
-            document.querySelectorAll(key).forEach(function (item) {
-              _this.levelDom.push(item);
-            });
-          });
-        }
-      };
+        });
+      }
+    };
 
-      _this.getHorizontalBoolAndPlacementName = function () {
-        var placement = _this.props.placement;
-        var isHorizontal = placement === 'left' || placement === 'right';
-        var placementName = "translate".concat(isHorizontal ? 'X' : 'Y');
-        return {
-          isHorizontal: isHorizontal,
-          placementName: placementName
-        };
+    _this.getHorizontalBoolAndPlacementName = function () {
+      var placement = _this.props.placement;
+      var isHorizontal = placement === 'left' || placement === 'right';
+      var placementName = "translate".concat(isHorizontal ? 'X' : 'Y');
+      return {
+        isHorizontal: isHorizontal,
+        placementName: placementName
       };
+    };
 
-      _this.state = {
-        _self: (0, _assertThisInitialized2.default)(_this)
-      };
-      return _this;
-    }
+    _this.state = {
+      _self: (0, _assertThisInitialized2.default)(_this)
+    };
+    return _this;
+  }
 
-    (0, _createClass2.default)(DrawerChild, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        var _this2 = this;
+  (0, _createClass2.default)(DrawerChild, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
 
-        if (!_utils.windowIsUndefined) {
-          var passiveSupported = false;
+      if (!_utils.windowIsUndefined) {
+        var passiveSupported = false;
 
-          try {
-            window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
-              get: function get() {
-                passiveSupported = true;
-                return null;
-              }
-            }));
-          } catch (err) {}
+        try {
+          window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
+            get: function get() {
+              passiveSupported = true;
+              return null;
+            }
+          }));
+        } catch (err) {}
 
-          this.passive = passiveSupported ? {
-            passive: false
-          } : false;
-        }
+        this.passive = passiveSupported ? {
+          passive: false
+        } : false;
+      }
 
-        var open = this.props.open;
-        this.drawerId = "drawer_id_".concat(Number((Date.now() + Math.random()).toString().replace('.', Math.round(Math.random() * 9).toString())).toString(16));
-        this.getLevelDom(this.props);
+      var _this$props7 = this.props,
+          open = _this$props7.open,
+          getContainer = _this$props7.getContainer;
+      var container = getContainer && getContainer();
+      this.drawerId = "drawer_id_".concat(Number((Date.now() + Math.random()).toString().replace('.', Math.round(Math.random() * 9).toString())).toString(16));
+      this.getLevelDom(this.props);
 
-        if (open) {
-          currentDrawer[this.drawerId] = open; // 默认打开状态时推出 level;
+      if (open) {
+        if (container && container.parentNode === document.body) {
+          currentDrawer[this.drawerId] = open;
+        } // 默认打开状态时推出 level;
 
-          this.openLevelTransition();
-          this.forceUpdate(function () {
-            _this2.domFocus();
-          });
-        }
-      }
-    }, {
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps) {
-        var open = this.props.open;
 
-        if (open !== prevProps.open) {
-          if (open) {
-            this.domFocus();
-          }
-
-          currentDrawer[this.drawerId] = !!open;
-          this.openLevelTransition();
-        }
+        this.openLevelTransition();
+        this.forceUpdate(function () {
+          _this2.domFocus();
+        });
       }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        var _this$props7 = this.props,
-            getOpenCount = _this$props7.getOpenCount,
-            open = _this$props7.open,
-            switchScrollingEffect = _this$props7.switchScrollingEffect;
-        var openCount = typeof getOpenCount === 'function' && getOpenCount();
-        delete currentDrawer[this.drawerId];
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props8 = this.props,
+          open = _this$props8.open,
+          getContainer = _this$props8.getContainer;
+      var container = getContainer && getContainer();
 
+      if (open !== prevProps.open) {
         if (open) {
-          this.setLevelTransform(false);
-          document.body.style.touchAction = '';
+          this.domFocus();
         }
 
-        if (!openCount) {
-          document.body.style.overflow = '';
-          switchScrollingEffect(true);
+        if (container && container.parentNode === document.body) {
+          currentDrawer[this.drawerId] = !!open;
         }
-      } // tslint:disable-next-line:member-ordering
 
-    }, {
-      key: "render",
-      value: function render() {
-        var _classnames,
-            _this3 = this;
+        this.openLevelTransition();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$props9 = this.props,
+          getOpenCount = _this$props9.getOpenCount,
+          open = _this$props9.open,
+          switchScrollingEffect = _this$props9.switchScrollingEffect;
+      var openCount = typeof getOpenCount === 'function' && getOpenCount();
+      delete currentDrawer[this.drawerId];
 
-        var _this$props8 = this.props,
-            className = _this$props8.className,
-            children = _this$props8.children,
-            style = _this$props8.style,
-            width = _this$props8.width,
-            height = _this$props8.height,
-            defaultOpen = _this$props8.defaultOpen,
-            $open = _this$props8.open,
-            prefixCls = _this$props8.prefixCls,
-            placement = _this$props8.placement,
-            level = _this$props8.level,
-            levelMove = _this$props8.levelMove,
-            ease = _this$props8.ease,
-            duration = _this$props8.duration,
-            getContainer = _this$props8.getContainer,
-            handler = _this$props8.handler,
-            onChange = _this$props8.onChange,
-            afterVisibleChange = _this$props8.afterVisibleChange,
-            showMask = _this$props8.showMask,
-            maskClosable = _this$props8.maskClosable,
-            maskStyle = _this$props8.maskStyle,
-            onClose = _this$props8.onClose,
-            onHandleClick = _this$props8.onHandleClick,
-            keyboard = _this$props8.keyboard,
-            getOpenCount = _this$props8.getOpenCount,
-            switchScrollingEffect = _this$props8.switchScrollingEffect,
-            props = (0, _objectWithoutProperties2.default)(_this$props8, ["className", "children", "style", "width", "height", "defaultOpen", "open", "prefixCls", "placement", "level", "levelMove", "ease", "duration", "getContainer", "handler", "onChange", "afterVisibleChange", "showMask", "maskClosable", "maskStyle", "onClose", "onHandleClick", "keyboard", "getOpenCount", "switchScrollingEffect"]); // 首次渲染都将是关闭状态。
+      if (open) {
+        this.setLevelTransform(false);
+        document.body.style.touchAction = '';
+      }
 
-        var open = this.dom ? $open : false;
-        var wrapperClassName = (0, _classnames2.default)(prefixCls, (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-").concat(placement), true), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-open"), open), (0, _defineProperty2.default)(_classnames, className || '', !!className), (0, _defineProperty2.default)(_classnames, 'no-mask', !showMask), _classnames));
+      if (!openCount) {
+        document.body.style.overflow = '';
+        switchScrollingEffect(true);
+      }
+    } // tslint:disable-next-line:member-ordering
 
-        var _this$getHorizontalBo2 = this.getHorizontalBoolAndPlacementName(),
-            placementName = _this$getHorizontalBo2.placementName; // 百分比与像素动画不同步，第一次打用后全用像素动画。
-        // const defaultValue = !this.contentDom || !level ? '100%' : `${value}px`;
+  }, {
+    key: "render",
+    value: function render() {
+      var _classnames,
+          _this3 = this;
 
+      var _this$props10 = this.props,
+          className = _this$props10.className,
+          children = _this$props10.children,
+          style = _this$props10.style,
+          width = _this$props10.width,
+          height = _this$props10.height,
+          defaultOpen = _this$props10.defaultOpen,
+          $open = _this$props10.open,
+          prefixCls = _this$props10.prefixCls,
+          placement = _this$props10.placement,
+          level = _this$props10.level,
+          levelMove = _this$props10.levelMove,
+          ease = _this$props10.ease,
+          duration = _this$props10.duration,
+          getContainer = _this$props10.getContainer,
+          handler = _this$props10.handler,
+          onChange = _this$props10.onChange,
+          afterVisibleChange = _this$props10.afterVisibleChange,
+          showMask = _this$props10.showMask,
+          maskClosable = _this$props10.maskClosable,
+          maskStyle = _this$props10.maskStyle,
+          onClose = _this$props10.onClose,
+          onHandleClick = _this$props10.onHandleClick,
+          keyboard = _this$props10.keyboard,
+          getOpenCount = _this$props10.getOpenCount,
+          switchScrollingEffect = _this$props10.switchScrollingEffect,
+          props = (0, _objectWithoutProperties2.default)(_this$props10, ["className", "children", "style", "width", "height", "defaultOpen", "open", "prefixCls", "placement", "level", "levelMove", "ease", "duration", "getContainer", "handler", "onChange", "afterVisibleChange", "showMask", "maskClosable", "maskStyle", "onClose", "onHandleClick", "keyboard", "getOpenCount", "switchScrollingEffect"]); // 首次渲染都将是关闭状态。
 
-        var placementPos = placement === 'left' || placement === 'top' ? '-100%' : '100%';
-        var transform = open ? '' : "".concat(placementName, "(").concat(placementPos, ")");
-        var handlerChildren = handler && React.cloneElement(handler, {
-          onClick: function onClick(e) {
-            if (handler.props.onClick) {
-              handler.props.onClick();
-            }
+      var open = this.dom ? $open : false;
+      var wrapperClassName = (0, _classnames2.default)(prefixCls, (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-").concat(placement), true), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-open"), open), (0, _defineProperty2.default)(_classnames, className || '', !!className), (0, _defineProperty2.default)(_classnames, 'no-mask', !showMask), _classnames));
 
-            if (onHandleClick) {
-              onHandleClick(e);
-            }
-          },
-          ref: function ref(c) {
-            _this3.handlerDom = c;
-          }
-        });
-        return React.createElement("div", Object.assign({}, props, {
-          tabIndex: -1,
-          className: wrapperClassName,
-          style: style,
-          ref: function ref(c) {
-            _this3.dom = c;
-          },
-          onKeyDown: open && keyboard ? this.onKeyDown : undefined,
-          onTransitionEnd: this.onWrapperTransitionEnd
-        }), showMask && React.createElement("div", {
-          className: "".concat(prefixCls, "-mask"),
-          onClick: maskClosable ? onClose : undefined,
-          style: maskStyle,
-          ref: function ref(c) {
-            _this3.maskDom = c;
-          }
-        }), React.createElement("div", {
-          className: "".concat(prefixCls, "-content-wrapper"),
-          style: {
-            transform: transform,
-            msTransform: transform,
-            width: (0, _utils.isNumeric)(width) ? "".concat(width, "px") : width,
-            height: (0, _utils.isNumeric)(height) ? "".concat(height, "px") : height
-          },
-          ref: function ref(c) {
-            _this3.contentWrapper = c;
-          }
-        }, React.createElement("div", {
-          className: "".concat(prefixCls, "-content"),
-          ref: function ref(c) {
-            _this3.contentDom = c;
-          },
-          onTouchStart: open && showMask ? this.removeStartHandler : undefined,
-          onTouchMove: open && showMask ? this.removeMoveHandler : undefined
-        }, children), handlerChildren));
-      }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, _ref2) {
-        var prevProps = _ref2.prevProps,
-            _self = _ref2._self;
-        var nextState = {
-          prevProps: props
-        };
+      var _this$getHorizontalBo2 = this.getHorizontalBoolAndPlacementName(),
+          placementName = _this$getHorizontalBo2.placementName; // 百分比与像素动画不同步，第一次打用后全用像素动画。
+      // const defaultValue = !this.contentDom || !level ? '100%' : `${value}px`;
 
-        if (prevProps !== undefined) {
-          var placement = props.placement,
-              level = props.level;
 
-          if (placement !== prevProps.placement) {
-            // test 的 bug, 有动画过场，删除 dom
-            _self.contentDom = null;
+      var placementPos = placement === 'left' || placement === 'top' ? '-100%' : '100%';
+      var transform = open ? '' : "".concat(placementName, "(").concat(placementPos, ")");
+      var handlerChildren = handler && React.cloneElement(handler, {
+        onClick: function onClick(e) {
+          if (handler.props.onClick) {
+            handler.props.onClick();
           }
 
-          if (level !== prevProps.level) {
-            _self.getLevelDom(props);
+          if (onHandleClick) {
+            onHandleClick(e);
           }
+        },
+        ref: function ref(c) {
+          _this3.handlerDom = c;
         }
+      });
+      return React.createElement("div", Object.assign({}, props, {
+        tabIndex: -1,
+        className: wrapperClassName,
+        style: style,
+        ref: function ref(c) {
+          _this3.dom = c;
+        },
+        onKeyDown: open && keyboard ? this.onKeyDown : undefined,
+        onTransitionEnd: this.onWrapperTransitionEnd
+      }), showMask && React.createElement("div", {
+        className: "".concat(prefixCls, "-mask"),
+        onClick: maskClosable ? onClose : undefined,
+        style: maskStyle,
+        ref: function ref(c) {
+          _this3.maskDom = c;
+        }
+      }), React.createElement("div", {
+        className: "".concat(prefixCls, "-content-wrapper"),
+        style: {
+          transform: transform,
+          msTransform: transform,
+          width: (0, _utils.isNumeric)(width) ? "".concat(width, "px") : width,
+          height: (0, _utils.isNumeric)(height) ? "".concat(height, "px") : height
+        },
+        ref: function ref(c) {
+          _this3.contentWrapper = c;
+        }
+      }, React.createElement("div", {
+        className: "".concat(prefixCls, "-content"),
+        ref: function ref(c) {
+          _this3.contentDom = c;
+        },
+        onTouchStart: open && showMask ? this.removeStartHandler : undefined,
+        onTouchMove: open && showMask ? this.removeMoveHandler : undefined
+      }, children), handlerChildren));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, _ref2) {
+      var prevProps = _ref2.prevProps,
+          _self = _ref2._self;
+      var nextState = {
+        prevProps: props
+      };
 
-        return nextState;
+      if (prevProps !== undefined) {
+        var placement = props.placement,
+            level = props.level;
+
+        if (placement !== prevProps.placement) {
+          // test 的 bug, 有动画过场，删除 dom
+          _self.contentDom = null;
+        }
+
+        if (level !== prevProps.level) {
+          _self.getLevelDom(props);
+        }
       }
-    }]);
-    return DrawerChild;
-  }(React.Component);
 
-  DrawerChild.defaultProps = {
-    switchScrollingEffect: function switchScrollingEffect() {}
-  };
+      return nextState;
+    }
+  }]);
   return DrawerChild;
-}();
+}(React.Component);
 
+DrawerChild.defaultProps = {
+  switchScrollingEffect: function switchScrollingEffect() {}
+};
 var _default = DrawerChild;
 exports.default = _default;

lib/DrawerWrapper.js

@@ -34,161 +34,155 @@ "use strict";
 
-var DrawerWrapper =
-/** @class */
-function () {
-  var DrawerWrapper = /*#__PURE__*/function (_React$Component) {
-    (0, _inherits2.default)(DrawerWrapper, _React$Component);
+var DrawerWrapper = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(DrawerWrapper, _React$Component);
 
-    var _super = _createSuper(DrawerWrapper);
+  var _super = _createSuper(DrawerWrapper);
 
-    function DrawerWrapper(props) {
-      var _this;
+  function DrawerWrapper(props) {
+    var _this;
 
-      (0, _classCallCheck2.default)(this, DrawerWrapper);
-      _this = _super.call(this, props);
+    (0, _classCallCheck2.default)(this, DrawerWrapper);
+    _this = _super.call(this, props);
 
-      _this.onHandleClick = function (e) {
-        var _this$props = _this.props,
-            onHandleClick = _this$props.onHandleClick,
-            $open = _this$props.open;
+    _this.onHandleClick = function (e) {
+      var _this$props = _this.props,
+          onHandleClick = _this$props.onHandleClick,
+          $open = _this$props.open;
 
-        if (onHandleClick) {
-          onHandleClick(e);
-        }
+      if (onHandleClick) {
+        onHandleClick(e);
+      }
 
-        if (typeof $open === 'undefined') {
-          var _open = _this.state.open;
+      if (typeof $open === 'undefined') {
+        var _open = _this.state.open;
 
-          _this.setState({
-            open: !_open
-          });
-        }
-      };
+        _this.setState({
+          open: !_open
+        });
+      }
+    };
 
-      _this.onClose = function (e) {
-        var _this$props2 = _this.props,
-            onClose = _this$props2.onClose,
-            open = _this$props2.open;
+    _this.onClose = function (e) {
+      var _this$props2 = _this.props,
+          onClose = _this$props2.onClose,
+          open = _this$props2.open;
 
-        if (onClose) {
-          onClose(e);
-        }
+      if (onClose) {
+        onClose(e);
+      }
 
-        if (typeof open === 'undefined') {
-          _this.setState({
-            open: false
-          });
-        }
-      };
+      if (typeof open === 'undefined') {
+        _this.setState({
+          open: false
+        });
+      }
+    };
 
-      var open = typeof props.open !== 'undefined' ? props.open : !!props.defaultOpen;
-      _this.state = {
-        open: open
-      };
+    var open = typeof props.open !== 'undefined' ? props.open : !!props.defaultOpen;
+    _this.state = {
+      open: open
+    };
 
-      if ('onMaskClick' in props) {
-        console.warn('`onMaskClick` are removed, please use `onClose` instead.');
-      }
-
-      return _this;
+    if ('onMaskClick' in props) {
+      console.warn('`onMaskClick` are removed, please use `onClose` instead.');
     }
 
-    (0, _createClass2.default)(DrawerWrapper, [{
-      key: "render",
-      // tslint:disable-next-line:member-ordering
-      value: function render() {
-        var _this2 = this;
+    return _this;
+  }
 
-        var _this$props3 = this.props,
-            defaultOpen = _this$props3.defaultOpen,
-            getContainer = _this$props3.getContainer,
-            wrapperClassName = _this$props3.wrapperClassName,
-            forceRender = _this$props3.forceRender,
-            handler = _this$props3.handler,
-            props = (0, _objectWithoutProperties2.default)(_this$props3, ["defaultOpen", "getContainer", "wrapperClassName", "forceRender", "handler"]);
-        var open = this.state.open; // 渲染在当前 dom 里；
+  (0, _createClass2.default)(DrawerWrapper, [{
+    key: "render",
+    // tslint:disable-next-line:member-ordering
+    value: function render() {
+      var _this2 = this;
 
-        if (!getContainer) {
-          return React.createElement("div", {
-            className: wrapperClassName,
-            ref: function ref(c) {
-              _this2.dom = c;
-            }
-          }, React.createElement(_DrawerChild.default, Object.assign({}, props, {
-            open: open,
-            handler: handler,
-            getContainer: function getContainer() {
-              return _this2.dom;
-            },
-            onClose: this.onClose,
-            onHandleClick: this.onHandleClick
-          })));
-        } // 如果有 handler 为内置强制渲染；
+      var _this$props3 = this.props,
+          defaultOpen = _this$props3.defaultOpen,
+          getContainer = _this$props3.getContainer,
+          wrapperClassName = _this$props3.wrapperClassName,
+          forceRender = _this$props3.forceRender,
+          handler = _this$props3.handler,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, ["defaultOpen", "getContainer", "wrapperClassName", "forceRender", "handler"]);
+      var open = this.state.open; // 渲染在当前 dom 里；
 
+      if (!getContainer) {
+        return React.createElement("div", {
+          className: wrapperClassName,
+          ref: function ref(c) {
+            _this2.dom = c;
+          }
+        }, React.createElement(_DrawerChild.default, Object.assign({}, props, {
+          open: open,
+          handler: handler,
+          getContainer: function getContainer() {
+            return _this2.dom;
+          },
+          onClose: this.onClose,
+          onHandleClick: this.onHandleClick
+        })));
+      } // 如果有 handler 为内置强制渲染；
 
-        var $forceRender = !!handler || forceRender;
-        return React.createElement(_PortalWrapper.default, {
-          visible: open,
-          forceRender: $forceRender,
-          getContainer: getContainer,
-          wrapperClassName: wrapperClassName
-        }, function (_ref) {
-          var visible = _ref.visible,
-              afterClose = _ref.afterClose,
-              rest = (0, _objectWithoutProperties2.default)(_ref, ["visible", "afterClose"]);
-          return (// react 15，componentWillUnmount 时 Portal 返回 afterClose, visible.
-            React.createElement(_DrawerChild.default, Object.assign({}, props, rest, {
-              open: visible !== undefined ? visible : open,
-              afterVisibleChange: afterClose !== undefined ? afterClose : props.afterVisibleChange,
-              handler: handler,
-              onClose: _this2.onClose,
-              onHandleClick: _this2.onHandleClick
-            }))
-          );
-        });
-      }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, _ref2) {
-        var prevProps = _ref2.prevProps;
-        var newState = {
-          prevProps: props
-        };
 
-        if (typeof prevProps !== 'undefined' && props.open !== prevProps.open) {
-          newState.open = props.open;
-        }
+      var $forceRender = !!handler || forceRender;
+      return React.createElement(_PortalWrapper.default, {
+        visible: open,
+        forceRender: $forceRender,
+        getContainer: getContainer,
+        wrapperClassName: wrapperClassName
+      }, function (_ref) {
+        var visible = _ref.visible,
+            afterClose = _ref.afterClose,
+            rest = (0, _objectWithoutProperties2.default)(_ref, ["visible", "afterClose"]);
+        return (// react 15，componentWillUnmount 时 Portal 返回 afterClose, visible.
+          React.createElement(_DrawerChild.default, Object.assign({}, props, rest, {
+            open: visible !== undefined ? visible : open,
+            afterVisibleChange: afterClose !== undefined ? afterClose : props.afterVisibleChange,
+            handler: handler,
+            onClose: _this2.onClose,
+            onHandleClick: _this2.onHandleClick
+          }))
+        );
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, _ref2) {
+      var prevProps = _ref2.prevProps;
+      var newState = {
+        prevProps: props
+      };
 
-        return newState;
+      if (typeof prevProps !== 'undefined' && props.open !== prevProps.open) {
+        newState.open = props.open;
       }
-    }]);
-    return DrawerWrapper;
-  }(React.Component);
 
-  DrawerWrapper.defaultProps = {
-    prefixCls: 'drawer',
-    placement: 'left',
-    getContainer: 'body',
-    defaultOpen: false,
-    level: 'all',
-    duration: '.3s',
-    ease: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
-    onChange: function onChange() {},
-    afterVisibleChange: function afterVisibleChange() {},
-    handler: React.createElement("div", {
-      className: "drawer-handle"
-    }, React.createElement("i", {
-      className: "drawer-handle-icon"
-    })),
-    showMask: true,
-    maskClosable: true,
-    maskStyle: {},
-    wrapperClassName: '',
-    className: '',
-    keyboard: true,
-    forceRender: false
-  };
+      return newState;
+    }
+  }]);
   return DrawerWrapper;
-}();
+}(React.Component);
 
+DrawerWrapper.defaultProps = {
+  prefixCls: 'drawer',
+  placement: 'left',
+  getContainer: 'body',
+  defaultOpen: false,
+  level: 'all',
+  duration: '.3s',
+  ease: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
+  onChange: function onChange() {},
+  afterVisibleChange: function afterVisibleChange() {},
+  handler: React.createElement("div", {
+    className: "drawer-handle"
+  }, React.createElement("i", {
+    className: "drawer-handle-icon"
+  })),
+  showMask: true,
+  maskClosable: true,
+  maskStyle: {},
+  wrapperClassName: '',
+  className: '',
+  keyboard: true,
+  forceRender: false
+};
 var _default = DrawerWrapper;
 exports.default = _default;

package.json

 {
   "name": "rc-drawer",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "drawer component for react",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

83594

decreased by-2.03%

No dependency changes