rc-drawer - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

lib/Drawer.js

@@ -43,5 +43,136 @@ 'use strict';
 
+    _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;
+      }
+      return cancelDistanceOnScroll;
+    };
+
+    _this.isTouching = function () {
+      return _this.state.touchIdentifier !== null;
+    };
+
+    _this.saveSidebarSize = function () {
+      var sidebar = _reactDom2["default"].findDOMNode(_this.refs.sidebar);
+      var width = sidebar.offsetWidth;
+      var height = sidebar.offsetHeight;
+
+      if (width !== _this.state.sidebarWidth) {
+        _this.setState({ sidebarWidth: width });
+      }
+      if (height !== _this.state.sidebarHeight) {
+        _this.setState({ sidebarHeight: height });
+      }
+    };
+
+    _this.touchSidebarWidth = function () {
+      // if the sidebar is open and start point of drag is inside the sidebar
+      // we will only drag the distance they moved their finger
+      // otherwise we will move the sidebar to be below the finger.
+      if (_this.props.position === 'right') {
+        if (_this.props.open && window.innerWidth - _this.state.touchStartX < _this.state.sidebarWidth) {
+          if (_this.state.touchCurrentX > _this.state.touchStartX) {
+            return _this.state.sidebarWidth + _this.state.touchStartX - _this.state.touchCurrentX;
+          }
+          return _this.state.sidebarWidth;
+        }
+        return Math.min(window.innerWidth - _this.state.touchCurrentX, _this.state.sidebarWidth);
+      }
+
+      if (_this.props.position === 'left') {
+        if (_this.props.open && _this.state.touchStartX < _this.state.sidebarWidth) {
+          if (_this.state.touchCurrentX > _this.state.touchStartX) {
+            return _this.state.sidebarWidth;
+          }
+          return _this.state.sidebarWidth - _this.state.touchStartX + _this.state.touchCurrentX;
+        }
+        return Math.min(_this.state.touchCurrentX, _this.state.sidebarWidth);
+      }
+    };
+
+    _this.touchSidebarHeight = function () {
+      // if the sidebar is open and start point of drag is inside the sidebar
+      // we will only drag the distance they moved their finger
+      // otherwise we will move the sidebar to be below the finger.
+      if (_this.props.position === 'bottom') {
+        if (_this.props.open && window.innerHeight - _this.state.touchStartY < _this.state.sidebarHeight) {
+          if (_this.state.touchCurrentY > _this.state.touchStartY) {
+            return _this.state.sidebarHeight + _this.state.touchStartY - _this.state.touchCurrentY;
+          }
+          return _this.state.sidebarHeight;
+        }
+        return Math.min(window.innerHeight - _this.state.touchCurrentY, _this.state.sidebarHeight);
+      }
+
+      if (_this.props.position === 'top') {
+        if (_this.props.open && _this.state.touchStartY < _this.state.sidebarHeight) {
+          if (_this.state.touchCurrentY > _this.state.touchStartY) {
+            return _this.state.sidebarHeight;
+          }
+          return _this.state.sidebarHeight - _this.state.touchStartY + _this.state.touchCurrentY;
+        }
+        return Math.min(_this.state.touchCurrentY, _this.state.sidebarHeight);
+      }
+    };
+
+    _this.renderStyle = function (_ref) {
+      var sidebarStyle = _ref.sidebarStyle;
+      var isTouching = _ref.isTouching;
+      var overlayStyle = _ref.overlayStyle;
+      var contentStyle = _ref.contentStyle;
+
+      if (_this.props.position === 'right' || _this.props.position === 'left') {
+        sidebarStyle.transform = 'translateX(0%)';
+        sidebarStyle.WebkitTransform = 'translateX(0%)';
+        if (isTouching) {
+          var percentage = _this.touchSidebarWidth() / _this.state.sidebarWidth;
+          // slide open to what we dragged
+          if (_this.props.position === 'right') {
+            sidebarStyle.transform = 'translateX(' + (1 - percentage) * 100 + '%)';
+            sidebarStyle.WebkitTransform = 'translateX(' + (1 - percentage) * 100 + '%)';
+          }
+          if (_this.props.position === 'left') {
+            sidebarStyle.transform = 'translateX(-' + (1 - percentage) * 100 + '%)';
+            sidebarStyle.WebkitTransform = 'translateX(-' + (1 - percentage) * 100 + '%)';
+          }
+          // fade overlay to match distance of drag
+          overlayStyle.opacity = percentage;
+          overlayStyle.visibility = 'visible';
+        }
+        if (contentStyle) {
+          contentStyle[_this.props.position] = _this.state.sidebarWidth + 'px';
+        }
+      }
+      if (_this.props.position === 'top' || _this.props.position === 'bottom') {
+        sidebarStyle.transform = 'translateY(0%)';
+        sidebarStyle.WebkitTransform = 'translateY(0%)';
+        if (isTouching) {
+          var _percentage = _this.touchSidebarHeight() / _this.state.sidebarWidth;
+          // slide open to what we dragged
+          if (_this.props.position === 'bottom') {
+            sidebarStyle.transform = 'translateY(' + (1 - _percentage) * 100 + '%)';
+            sidebarStyle.WebkitTransform = 'translateY(' + (1 - _percentage) * 100 + '%)';
+          }
+          if (_this.props.position === 'top') {
+            sidebarStyle.transform = 'translateY(-' + (1 - _percentage) * 100 + '%)';
+            sidebarStyle.WebkitTransform = 'translateY(-' + (1 - _percentage) * 100 + '%)';
+          }
+          // fade overlay to match distance of drag
+          overlayStyle.opacity = _percentage;
+          overlayStyle.visibility = 'visible';
+        }
+        if (contentStyle) {
+          contentStyle[_this.props.position] = _this.state.sidebarHeight + 'px';
+        }
+      }
+    };
+
     _this.state = {
       // the detected width of the sidebar in pixels
       sidebarWidth: 0,
+      sidebarHeight: 0,
 
@@ -59,3 +190,3 @@ // keep track of touching params
 
-    _this.overlayClicked = _this.overlayClicked.bind(_this);
+    _this.onOverlayClicked = _this.onOverlayClicked.bind(_this);
     _this.onTouchStart = _this.onTouchStart.bind(_this);
@@ -71,3 +202,3 @@ _this.onTouchMove = _this.onTouchMove.bind(_this);
     value: function componentDidMount() {
-      this.saveSidebarWidth();
+      this.saveSidebarSize();
     }
@@ -79,6 +210,13 @@ }, {
       if (!this.isTouching()) {
-        this.saveSidebarWidth();
+        this.saveSidebarSize();
       }
     }
   }, {
+    key: 'onOverlayClicked',
+    value: function onOverlayClicked() {
+      if (this.props.open) {
+        this.props.onSetOpen(false);
+      }
+    }
+  }, {
     key: 'onTouchStart',
@@ -125,2 +263,8 @@ value: function onTouchStart(ev) {
 
+        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({
@@ -156,62 +300,7 @@ touchIdentifier: null,
 
-  }, {
-    key: 'inCancelDistanceOnScroll',
-    value: function inCancelDistanceOnScroll() {
-      var cancelDistanceOnScroll = void 0;
 
-      if (this.props.pullRight) {
-        cancelDistanceOnScroll = Math.abs(this.state.touchCurrentX - this.state.touchStartX) < CANCEL_DISTANCE_ON_SCROLL;
-      } else {
-        cancelDistanceOnScroll = Math.abs(this.state.touchStartX - this.state.touchCurrentX) < CANCEL_DISTANCE_ON_SCROLL;
-      }
-      return cancelDistanceOnScroll;
-    }
-  }, {
-    key: 'isTouching',
-    value: function isTouching() {
-      return this.state.touchIdentifier !== null;
-    }
-  }, {
-    key: 'overlayClicked',
-    value: function overlayClicked() {
-      if (this.props.open) {
-        this.props.onSetOpen(false);
-      }
-    }
-  }, {
-    key: 'saveSidebarWidth',
-    value: function saveSidebarWidth() {
-      var width = _reactDom2["default"].findDOMNode(this.refs.sidebar).offsetWidth;
-
-      if (width !== this.state.sidebarWidth) {
-        this.setState({ sidebarWidth: width });
-      }
-    }
-
     // calculate the sidebarWidth based on current touch info
 
-  }, {
-    key: 'touchSidebarWidth',
-    value: function touchSidebarWidth() {
-      // if the sidebar is open and start point of drag is inside the sidebar
-      // we will only drag the distance they moved their finger
-      // otherwise we will move the sidebar to be below the finger.
-      if (this.props.pullRight) {
-        if (this.props.open && window.innerWidth - this.state.touchStartX < this.state.sidebarWidth) {
-          if (this.state.touchCurrentX > this.state.touchStartX) {
-            return this.state.sidebarWidth + this.state.touchStartX - this.state.touchCurrentX;
-          }
-          return this.state.sidebarWidth;
-        }
-        return Math.min(window.innerWidth - this.state.touchCurrentX, this.state.sidebarWidth);
-      }
+    // calculate the sidebarHeight based on current touch info
 
-      if (this.props.open && this.state.touchStartX < this.state.sidebarWidth) {
-        if (this.state.touchCurrentX > this.state.touchStartX) {
-          return this.state.sidebarWidth;
-        }
-        return this.state.sidebarWidth - this.state.touchStartX + this.state.touchCurrentX;
-      }
-      return Math.min(this.state.touchCurrentX, this.state.sidebarWidth);
-    }
   }, {
@@ -230,37 +319,14 @@ key: 'render',
 
-      rootProps.className = props.pullRight ? (0, _classnames2["default"])(props.className, props.prefixCls, props.prefixCls + '-right') : (0, _classnames2["default"])(props.className, props.prefixCls, props.prefixCls + '-left');
+      rootProps.className = (0, _classnames2["default"])(props.className, props.prefixCls, props.prefixCls + '-' + props.position);
 
       if (isTouching) {
-        var percentage = this.touchSidebarWidth() / this.state.sidebarWidth;
-
-        // slide open to what we dragged
-        if (this.props.pullRight) {
-          sidebarStyle.transform = 'translateX(' + (1 - percentage) * 100 + '%)';
-          sidebarStyle.WebkitTransform = 'translateX(' + (1 - percentage) * 100 + '%)';
-        } else {
-          sidebarStyle.transform = 'translateX(-' + (1 - percentage) * 100 + '%)';
-          sidebarStyle.WebkitTransform = 'translateX(-' + (1 - percentage) * 100 + '%)';
-        }
-
-        // fade overlay to match distance of drag
-        overlayStyle.opacity = percentage;
-        overlayStyle.visibility = 'visible';
+        this.renderStyle({ sidebarStyle: sidebarStyle, isTouching: true, overlayStyle: overlayStyle });
       } else if (this.props.docked) {
         // show sidebar
         if (this.state.sidebarWidth !== 0) {
-          sidebarStyle.transform = 'translateX(0%)';
-          sidebarStyle.WebkitTransform = 'translateX(0%)';
+          this.renderStyle({ sidebarStyle: sidebarStyle, contentStyle: contentStyle });
         }
-
-        // make space on the left/right side of the content for the sidebar
-        if (this.props.pullRight) {
-          contentStyle.right = this.state.sidebarWidth + 'px';
-        } else {
-          contentStyle.left = this.state.sidebarWidth + 'px';
-        }
       } else if (this.props.open) {
         // slide open sidebar
-        sidebarStyle.transform = 'translateX(0%)';
-        sidebarStyle.WebkitTransform = 'translateX(0%)';
-
+        this.renderStyle({ sidebarStyle: sidebarStyle });
         // show overlay
@@ -289,5 +355,5 @@ overlayStyle.opacity = 1;
 
-          if (this.props.pullRight) {
+          if (this.props.position === 'right') {
             dragHandleStyle.right = 0;
-          } else {
+          } else if (this.props.position === 'left') {
             dragHandleStyle.left = 0;
@@ -315,4 +381,4 @@ }
         _react2["default"].createElement('div', { className: prefixCls + '-overlay', style: overlayStyle,
-          onClick: this.overlayClicked,
-          onTouchTap: this.overlayClicked,
+          onClick: this.onOverlayClicked,
+          onTouchTap: this.onOverlayClicked,
           ref: 'overlay'
@@ -367,4 +433,4 @@ }),
 
-  // Place the sidebar on the right
-  pullRight: _react2["default"].PropTypes.bool,
+  // where to place the sidebar
+  position: _react2["default"].PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
 
@@ -388,3 +454,3 @@ // distance we have to drag the sidebar to toggle open state
   touchHandleWidth: 20,
-  pullRight: false,
+  position: 'left',
   dragToggleDistance: 30,
@@ -391,0 +457,0 @@ onSetOpen: function onSetOpen() {}

package.json

 {
   "name": "rc-drawer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "drawer ui component for react",
@@ -53,2 +53,2 @@ "keywords": [
   }
-}
+}

README.md

@@ -76,4 +76,5 @@ # rc-drawer
 | 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. |
-| docked | boolean | false | If the sidebar should be always visible |
 | open | boolean | false | If the sidebar should be open |
+| position | string | left, enum{'left', 'right', 'top'} | where to place the sidebar |
+| docked | boolean | false | If the sidebar should be docked in document |
 | transitions | boolean | true | If transitions should be enabled |
@@ -83,3 +84,2 @@ | touch | boolean | true | If touch gestures should be enabled |
 | dragToggleDistance | number | 30 | Distance the sidebar has to be dragged before it will open/close after it is released. |
-| pullRight | boolean | false | Place the sidebar on the right |
 
@@ -86,0 +86,0 @@ > change from [https://github.com/balloob/react-sidebar](https://github.com/balloob/react-sidebar)

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

24478

increased by19.03%

Lines of code

483

increased by19.55%

No dependency changes