@noriginmedia/react-spatial-navigation - npm Package Compare versions

Comparing version 2.8.4 to 2.9.0

CHANGELOG.md

@@ -7,2 +7,7 @@ # Changelog
 
+## [2.9.0]
+### Added
+- Added smart focusing by direction (left, right, top, down), if you can't use buttons or focusing by key. Use `navigateByDirection` method for it.
+
+
 ## [2.8.4]
@@ -9,0 +14,0 @@ ### Fixed

dist/App.js

@@ -23,2 +23,6 @@ 'use strict';
 
+var _throttle = require('lodash/throttle');
+
+var _throttle2 = _interopRequireDefault(_throttle);
+
 var _reactNative = require('react-native');
@@ -334,3 +338,4 @@
   program: _propTypes2.default.shape({
-    title: _propTypes2.default.string.isRequired
+    title: _propTypes2.default.string.isRequired,
+    color: _propTypes2.default.string.isRequired
   })
@@ -560,9 +565,48 @@ };
 
-  function Spatial() {
+  function Spatial(props) {
     _classCallCheck(this, Spatial);
 
-    return _possibleConstructorReturn(this, (Spatial.__proto__ || Object.getPrototypeOf(Spatial)).apply(this, arguments));
+    var _this10 = _possibleConstructorReturn(this, (Spatial.__proto__ || Object.getPrototypeOf(Spatial)).call(this, props));
+
+    _this10.onWheel = _this10.onWheel.bind(_this10);
+    _this10.throttledWheelHandler = (0, _throttle2.default)(_this10.throttledWheelHandler.bind(_this10), 500, { trailing: false });
+    return _this10;
   }
 
   _createClass(Spatial, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      window.addEventListener('wheel', this.onWheel, { passive: false });
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('wheel', this.onWheel);
+    }
+  }, {
+    key: 'onWheel',
+    value: function onWheel(event) {
+      event.preventDefault();
+      this.throttledWheelHandler(event);
+    }
+  }, {
+    key: 'throttledWheelHandler',
+    value: function throttledWheelHandler(event) {
+      event.preventDefault();
+      var deltaY = event.deltaY,
+          deltaX = event.deltaX;
+      var navigateByDirection = this.props.navigateByDirection;
+
+
+      if (deltaY > 1) {
+        navigateByDirection('down');
+      } else if (deltaY < 0) {
+        navigateByDirection('up');
+      } else if (deltaX > 1) {
+        navigateByDirection('right');
+      } else if (deltaX < 1) {
+        navigateByDirection('left');
+      }
+    }
+  }, {
     key: 'render',
@@ -586,2 +630,8 @@ value: function render() {
 
+Spatial.propTypes = {
+  navigateByDirection: _propTypes2.default.func.isRequired
+};
+
+var SpatialFocusable = (0, _withFocusable2.default)()(Spatial);
+
 var App = function App() {
@@ -591,3 +641,3 @@ return _react2.default.createElement(
     null,
-    _react2.default.createElement(Spatial, null)
+    _react2.default.createElement(SpatialFocusable, { focusable: false })
   );
@@ -594,0 +644,0 @@ };

dist/spatialNavigation.js

@@ -359,2 +359,3 @@ 'use strict';
     this.setFocus = this.setFocus.bind(this);
+    this.navigateByDirection = this.navigateByDirection.bind(this);
     this.init = this.init.bind(this);
@@ -456,19 +457,18 @@ this.setKeyMap = this.setKeyMap.bind(this);
 
+          event.preventDefault();
+          event.stopPropagation();
+
           if (eventType === KEY_ENTER && _this3.focusKey) {
-            event.preventDefault();
-            event.stopPropagation();
-
             _this3.onEnterPress();
-          } else {
-            event.preventDefault();
-            event.stopPropagation();
 
-            var preventDefaultNavigation = _this3.onArrowPress(eventType) === false;
+            return;
+          }
 
-            if (preventDefaultNavigation) {
-              _this3.log('keyDownEventListener', 'default navigation prevented');
-              _this3.visualDebugger && _this3.visualDebugger.clear();
-            } else {
-              _this3.onKeyEvent(event.keyCode);
-            }
+          var preventDefaultNavigation = _this3.onArrowPress(eventType) === false;
+
+          if (preventDefaultNavigation) {
+            _this3.log('keyDownEventListener', 'default navigation prevented');
+            _this3.visualDebugger && _this3.visualDebugger.clear();
+          } else {
+            _this3.onKeyEvent(event.keyCode);
           }
@@ -543,3 +543,29 @@ };
     }
+
+    /**
+     * Move focus by direction, if you can't use buttons or focusing by key.
+     *
+     * @param {string} direction
+     *
+     * @example
+     * navigateByDirection('right') // The focus is moved to right
+     */
+
   }, {
+    key: 'navigateByDirection',
+    value: function navigateByDirection(direction) {
+      if (this.paused === true) {
+        return;
+      }
+
+      var validDirections = [DIRECTION_DOWN, DIRECTION_UP, DIRECTION_LEFT, DIRECTION_RIGHT];
+
+      if (validDirections.includes(direction)) {
+        this.log('navigateByDirection', 'direction', direction);
+        this.smartNavigate(direction);
+      } else {
+        this.log('navigateByDirection', 'Invalid direction. You passed: `' + direction + '`, but you can use only these: ', validDirections);
+      }
+    }
+  }, {
     key: 'onKeyEvent',
@@ -546,0 +572,0 @@ value: function onKeyEvent(keyCode) {

dist/withFocusable.js

@@ -99,2 +99,4 @@ 'use strict';
 
+      navigateByDirection: _spatialNavigation2.default.navigateByDirection,
+
       /**
@@ -101,0 +103,0 @@ * In Native mode this is the only way to mark component as focused.

package.json

 {
   "name": "@noriginmedia/react-spatial-navigation",
-  "version": "2.8.4",
+  "version": "2.9.0",
   "description": "HOC-based Spatial Navigation (key navigation) solution for React",
@@ -56,3 +56,3 @@ "main": "dist/index.js",
     "eslint": "4.19.1",
-    "eslint-config-norigin": "git+https://github.com/NoriginMedia/eslint-config-norigin.git#v3.7.0",
+    "eslint-config-norigin": "git+https://github.com/NoriginMedia/eslint-config-norigin.git#v3.7.5",
     "parcel-bundler": "^1.11.0",
@@ -59,0 +59,0 @@ "pre-commit": "^1.2.2",

README.md

@@ -349,3 +349,13 @@ # react-spatial-navigation
 ```
+### `navigateByDirection`: function
+Move the focus by direction, if you can't use buttons or focusing by key.
 
+```jsx
+navigateByDirection('left'); // The focus is moved to left
+navigateByDirection('right'); // The focus is moved to right
+navigateByDirection('up'); // The focus is moved to up
+navigateByDirection('down'); // The focus is moved to down
+```
+
+
 ### `stealFocus`: function
@@ -352,0 +362,0 @@ This method works exactly like `setFocus`, but it always sets focus to current component no matter which params you pass in.

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

New author

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

97281

increased by3.07%

Lines of code

1795

increased by3.76%

Number of lines in readme file

421

increased by2.43%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes