rc-drawer - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

lib/Drawer.js

@@ -33,2 +33,14 @@ 'use strict';
 
+function getOffset(ele) {
+  var el = ele;
+  var _x = 0;
+  var _y = 0;
+  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
+    _x += el.offsetLeft - el.scrollLeft;
+    _y += el.offsetTop - el.scrollTop;
+    el = el.offsetParent;
+  }
+  return { top: _y, left: _x };
+}
+
 var CANCEL_DISTANCE_ON_SCROLL = 20;
@@ -44,9 +56,90 @@
 
+    _this.onOverlayClicked = function () {
+      if (_this.props.open) {
+        _this.props.onOpenChange(false);
+      }
+    };
+
+    _this.onTouchStart = function (ev) {
+      // filter out if a user starts swiping with a second finger
+      if (!_this.isTouching()) {
+        var touch = ev.targetTouches[0];
+        _this.setState({
+          touchIdentifier: touch.identifier,
+          touchStartX: touch.clientX,
+          touchStartY: touch.clientY,
+          touchCurrentX: touch.clientX,
+          touchCurrentY: touch.clientY
+        });
+      }
+    };
+
+    _this.onTouchMove = function (ev) {
+      ev.preventDefault();
+      if (_this.isTouching()) {
+        for (var ind = 0; ind < ev.targetTouches.length; ind++) {
+          // we only care about the finger that we are tracking
+          if (ev.targetTouches[ind].identifier === _this.state.touchIdentifier) {
+            _this.setState({
+              touchCurrentX: ev.targetTouches[ind].clientX,
+              touchCurrentY: ev.targetTouches[ind].clientY
+            });
+            break;
+          }
+        }
+      }
+    };
+
+    _this.onTouchEnd = function () {
+      if (_this.isTouching()) {
+        // trigger a change to open if sidebar has been dragged beyond dragToggleDistance
+        var touchWidth = _this.touchSidebarWidth();
+
+        if (_this.props.open && touchWidth < _this.state.sidebarWidth - _this.props.dragToggleDistance || !_this.props.open && touchWidth > _this.props.dragToggleDistance) {
+          _this.props.onOpenChange(!_this.props.open);
+        }
+
+        var touchHeight = _this.touchSidebarHeight();
+
+        if (_this.props.open && touchHeight < _this.state.sidebarHeight - _this.props.dragToggleDistance || !_this.props.open && touchHeight > _this.props.dragToggleDistance) {
+          _this.props.onOpenChange(!_this.props.open);
+        }
+
+        _this.setState({
+          touchIdentifier: null,
+          touchStartX: null,
+          touchStartY: null,
+          touchCurrentX: null,
+          touchCurrentY: null
+        });
+      }
+    };
+
+    _this.onScroll = function () {
+      if (_this.isTouching() && _this.inCancelDistanceOnScroll()) {
+        _this.setState({
+          touchIdentifier: null,
+          touchStartX: null,
+          touchStartY: null,
+          touchCurrentX: null,
+          touchCurrentY: null
+        });
+      }
+    };
+
     _this.inCancelDistanceOnScroll = function () {
       var cancelDistanceOnScroll = void 0;
-
-      if (_this.props.position === 'right') {
-        cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentX - _this.state.touchStartX) < CANCEL_DISTANCE_ON_SCROLL;
-      } else if (_this.props.position === 'left') {
-        cancelDistanceOnScroll = Math.abs(_this.state.touchStartX - _this.state.touchCurrentX) < CANCEL_DISTANCE_ON_SCROLL;
+      switch (_this.props.position) {
+        case 'right':
+          cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentX - _this.state.touchStartX) < CANCEL_DISTANCE_ON_SCROLL;
+          break;
+        case 'bottom':
+          cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentY - _this.state.touchStartY) < CANCEL_DISTANCE_ON_SCROLL;
+          break;
+        case 'top':
+          cancelDistanceOnScroll = Math.abs(_this.state.touchStartY - _this.state.touchCurrentY) < CANCEL_DISTANCE_ON_SCROLL;
+          break;
+        case 'left':
+        default:
+          cancelDistanceOnScroll = Math.abs(_this.state.touchStartX - _this.state.touchCurrentX) < CANCEL_DISTANCE_ON_SCROLL;
       }
@@ -64,2 +157,4 @@ return cancelDistanceOnScroll;
       var height = sidebar.offsetHeight;
+      var sidebarTop = getOffset(_reactDom2["default"].findDOMNode(_this.refs.sidebar)).top;
+      var dragHandleTop = getOffset(_reactDom2["default"].findDOMNode(_this.refs.dragHandle)).top;
 
@@ -72,2 +167,8 @@ if (width !== _this.state.sidebarWidth) {
       }
+      if (sidebarTop !== _this.state.sidebarTop) {
+        _this.setState({ sidebarTop: sidebarTop });
+      }
+      if (dragHandleTop !== _this.state.dragHandleTop) {
+        _this.setState({ dragHandleTop: dragHandleTop });
+      }
     };
@@ -115,3 +216,4 @@
       if (_this.props.position === 'top') {
-        if (_this.props.open && _this.state.touchStartY < _this.state.sidebarHeight) {
+        var touchStartOffsetY = _this.state.touchStartY - _this.state.sidebarTop;
+        if (_this.props.open && touchStartOffsetY < _this.state.sidebarHeight) {
           if (_this.state.touchCurrentY > _this.state.touchStartY) {
@@ -122,3 +224,3 @@ return _this.state.sidebarHeight;
         }
-        return Math.min(_this.state.touchCurrentY, _this.state.sidebarHeight);
+        return Math.min(_this.state.touchCurrentY - _this.state.dragHandleTop, _this.state.sidebarHeight);
       }
@@ -159,3 +261,3 @@ };
         if (isTouching) {
-          var _percentage = _this.touchSidebarHeight() / _this.state.sidebarWidth;
+          var _percentage = _this.touchSidebarHeight() / _this.state.sidebarHeight;
           // slide open to what we dragged
@@ -184,2 +286,4 @@ if (_this.props.position === 'bottom') {
       sidebarHeight: 0,
+      sidebarTop: 0,
+      dragHandleTop: 0,
 
@@ -196,8 +300,2 @@ // keep track of touching params
     };
-
-    _this.onOverlayClicked = _this.onOverlayClicked.bind(_this);
-    _this.onTouchStart = _this.onTouchStart.bind(_this);
-    _this.onTouchMove = _this.onTouchMove.bind(_this);
-    _this.onTouchEnd = _this.onTouchEnd.bind(_this);
-    _this.onScroll = _this.onScroll.bind(_this);
     return _this;
@@ -219,67 +317,3 @@ }
     }
-  }, {
-    key: 'onOverlayClicked',
-    value: function onOverlayClicked() {
-      if (this.props.open) {
-        this.props.onSetOpen(false);
-      }
-    }
-  }, {
-    key: 'onTouchStart',
-    value: function onTouchStart(ev) {
-      // filter out if a user starts swiping with a second finger
-      if (!this.isTouching()) {
-        var touch = ev.targetTouches[0];
-        this.setState({
-          touchIdentifier: touch.identifier,
-          touchStartX: touch.clientX,
-          touchStartY: touch.clientY,
-          touchCurrentX: touch.clientX,
-          touchCurrentY: touch.clientY
-        });
-      }
-    }
-  }, {
-    key: 'onTouchMove',
-    value: function onTouchMove(ev) {
-      if (this.isTouching()) {
-        for (var ind = 0; ind < ev.targetTouches.length; ind++) {
-          // we only care about the finger that we are tracking
-          if (ev.targetTouches[ind].identifier === this.state.touchIdentifier) {
-            this.setState({
-              touchCurrentX: ev.targetTouches[ind].clientX,
-              touchCurrentY: ev.targetTouches[ind].clientY
-            });
-            break;
-          }
-        }
-      }
-    }
-  }, {
-    key: 'onTouchEnd',
-    value: function onTouchEnd() {
-      if (this.isTouching()) {
-        // trigger a change to open if sidebar has been dragged beyond dragToggleDistance
-        var touchWidth = this.touchSidebarWidth();
 
-        if (this.props.open && touchWidth < this.state.sidebarWidth - this.props.dragToggleDistance || !this.props.open && touchWidth > this.props.dragToggleDistance) {
-          this.props.onSetOpen(!this.props.open);
-        }
-
-        var touchHeight = this.touchSidebarHeight();
-
-        if (this.props.open && touchHeight < this.state.sidebarHeight - this.props.dragToggleDistance || !this.props.open && touchHeight > this.props.dragToggleDistance) {
-          this.props.onSetOpen(!this.props.open);
-        }
-
-        this.setState({
-          touchIdentifier: null,
-          touchStartX: null,
-          touchStartY: null,
-          touchCurrentX: null,
-          touchCurrentY: null
-        });
-      }
-    }
-
     // This logic helps us prevents the user from sliding the sidebar horizontally
@@ -289,15 +323,2 @@ // while scrolling the sidebar vertically. When a scroll event comes in, we're
 
-  }, {
-    key: 'onScroll',
-    value: function onScroll() {
-      if (this.isTouching() && this.inCancelDistanceOnScroll()) {
-        this.setState({
-          touchIdentifier: null,
-          touchStartX: null,
-          touchStartY: null,
-          touchCurrentX: null,
-          touchCurrentY: null
-        });
-      }
-    }
 
@@ -357,10 +378,3 @@ // True if the on going gesture X distance is less than the cancel distance
           var dragHandleStyle = _extends({}, props.dragHandleStyle);
-          dragHandleStyle.width = this.props.touchHandleWidth;
 
-          if (this.props.position === 'right') {
-            dragHandleStyle.right = 0;
-          } else if (this.props.position === 'left') {
-            dragHandleStyle.left = 0;
-          }
-
           dragHandle = _react2["default"].createElement('div', { className: prefixCls + '-draghandle', style: dragHandleStyle,
@@ -433,5 +447,2 @@ onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove,
 
-  // max distance from the edge we can start touching
-  touchHandleWidth: _react2["default"].PropTypes.number,
-
   // where to place the sidebar
@@ -444,3 +455,3 @@ position: _react2["default"].PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
   // callback called when the overlay is clicked
-  onSetOpen: _react2["default"].PropTypes.func
+  onOpenChange: _react2["default"].PropTypes.func
 };
@@ -457,8 +468,7 @@ Drawer.defaultProps = {
   touch: true,
-  touchHandleWidth: 20,
   position: 'left',
   dragToggleDistance: 30,
-  onSetOpen: function onSetOpen() {}
+  onOpenChange: function onOpenChange() {}
 };
 exports["default"] = Drawer;
 module.exports = exports['default'];

package.json

 {
   "name": "rc-drawer",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "drawer ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -75,9 +75,8 @@ # rc-drawer
 | sidebar | Anything React can render | n/a | The sidebar content |
-| onSetOpen | function | n/a | Callback called when the sidebar wants to change the open prop. Happens after sliding the sidebar and when the overlay is clicked when the sidebar is open. |
+| onOpenChange | function | n/a | Callback called when the sidebar wants to change the open prop. Happens after sliding the sidebar and when the overlay is clicked when the sidebar is open. |
 | open | boolean | false | If the sidebar should be open |
-| position | string | left, enum{'left', 'right', 'top'} | where to place the sidebar |
+| position | string | left, enum{'left', 'right', 'top', 'bottom'} | where to place the sidebar |
 | docked | boolean | false | If the sidebar should be docked in document |
 | transitions | boolean | true | If transitions should be enabled |
 | touch | boolean | true | If touch gestures should be enabled |
-| touchHandleWidth | number | 20 | Width in pixels you can start dragging from the edge when the sidebar is closed. |
 | dragToggleDistance | number | 30 | Distance the sidebar has to be dragged before it will open/close after it is released. |
@@ -84,0 +83,0 @@

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

Improved metrics

Total package byte prevSize

25592

increased by4.55%

Lines of code

514

increased by6.42%

Worsened metrics

Number of lines in readme file

104

decreased by-0.95%

No dependency changes