react-autowhatever - npm Package Compare versions

Comparing version 3.2.3 to 3.3.0

dist/Autowhatever.js

@@ -49,2 +49,12 @@ 'use strict';
   _createClass(Autowhatever, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.ensureFocusedSuggestionIsVisible();
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.ensureFocusedSuggestionIsVisible();
+    }
+  }, {
     key: 'getItemId',
@@ -105,6 +115,8 @@ value: function getItemId(sectionIndex, itemIndex) {
         var itemKey = 'react-autowhatever-' + id + '-' + sectionPrefix + 'item-' + itemIndex;
+        var isFocused = sectionIndex === focusedSectionIndex && itemIndex === focusedItemIndex;
         var itemProps = _extends({
           id: _this2.getItemId(sectionIndex, itemIndex),
+          ref: isFocused ? 'focusedItem' : null,
           role: 'option'
-        }, theme(itemKey, 'item', sectionIndex === focusedSectionIndex && itemIndex === focusedItemIndex && 'itemFocused'), itemPropsObj, {
+        }, theme(itemKey, 'item', isFocused && 'itemFocused'), itemPropsObj, {
           onMouseEnter: onMouseEnterFn,
@@ -152,2 +164,3 @@ onMouseLeave: onMouseLeaveFn,
         _extends({ id: this.getItemsContainerId(),
+          ref: 'itemsContainer',
           role: 'listbox'
@@ -194,2 +207,3 @@ }, theme('react-autowhatever-' + id + '-items-container', 'itemsContainer')),
         _extends({ id: this.getItemsContainerId(),
+          ref: 'itemsContainer',
           role: 'listbox'
@@ -203,2 +217,4 @@ }, theme('react-autowhatever-' + id + '-items-container', 'itemsContainer')),
     value: function onKeyDown(event) {
+      var _this4 = this;
+
       var _props4 = this.props;
@@ -216,26 +232,32 @@ var inputProps = _props4.inputProps;
         case 'ArrowUp':
-          var _props5 = this.props;
-          var multiSection = _props5.multiSection;
-          var items = _props5.items;
-          var getSectionItems = _props5.getSectionItems;
+          {
+            var _ret = function () {
+              var _props5 = _this4.props;
+              var multiSection = _props5.multiSection;
+              var items = _props5.items;
+              var getSectionItems = _props5.getSectionItems;
 
-          var sectionIterator = (0, _sectionIterator2.default)({
-            multiSection: multiSection,
-            data: multiSection ? items.map(function (section) {
-              return getSectionItems(section).length;
-            }) : items.length
-          });
-          var nextPrev = event.key === 'ArrowDown' ? 'next' : 'prev';
+              var sectionIterator = (0, _sectionIterator2.default)({
+                multiSection: multiSection,
+                data: multiSection ? items.map(function (section) {
+                  return getSectionItems(section).length;
+                }) : items.length
+              });
+              var nextPrev = event.key === 'ArrowDown' ? 'next' : 'prev';
 
-          var _sectionIterator$next = sectionIterator[nextPrev]([focusedSectionIndex, focusedItemIndex]);
+              var _sectionIterator$next = sectionIterator[nextPrev]([focusedSectionIndex, focusedItemIndex]);
 
-          var _sectionIterator$next2 = _slicedToArray(_sectionIterator$next, 2);
+              var _sectionIterator$next2 = _slicedToArray(_sectionIterator$next, 2);
 
-          var newFocusedSectionIndex = _sectionIterator$next2[0];
-          var newFocusedItemIndex = _sectionIterator$next2[1];
+              var newFocusedSectionIndex = _sectionIterator$next2[0];
+              var newFocusedItemIndex = _sectionIterator$next2[1];
 
 
-          onKeyDownFn(event, { newFocusedSectionIndex: newFocusedSectionIndex, newFocusedItemIndex: newFocusedItemIndex });
-          break;
+              onKeyDownFn(event, { newFocusedSectionIndex: newFocusedSectionIndex, newFocusedItemIndex: newFocusedItemIndex });
+              return 'break';
+            }();
 
+            if (_ret === 'break') break;
+          }
+
         default:
@@ -246,2 +268,29 @@ onKeyDownFn(event, { focusedSectionIndex: focusedSectionIndex, focusedItemIndex: focusedItemIndex });
   }, {
+    key: 'ensureFocusedSuggestionIsVisible',
+    value: function ensureFocusedSuggestionIsVisible() {
+      if (!this.refs.focusedItem) {
+        return;
+      }
+
+      var _refs = this.refs;
+      var focusedItem = _refs.focusedItem;
+      var itemsContainer = _refs.itemsContainer;
+
+      var itemOffsetRelativeToContainer = focusedItem.offsetParent === itemsContainer ? focusedItem.offsetTop : focusedItem.offsetTop - itemsContainer.offsetTop;
+
+      var scrollTop = itemsContainer.scrollTop; // Top of the visible area
+
+      if (itemOffsetRelativeToContainer < scrollTop) {
+        // Item is off the top of the visible area
+        scrollTop = itemOffsetRelativeToContainer;
+      } else if (itemOffsetRelativeToContainer + focusedItem.offsetHeight > scrollTop + itemsContainer.offsetHeight) {
+        // Item is off the bottom of the visible area
+        scrollTop = itemOffsetRelativeToContainer + focusedItem.offsetHeight - itemsContainer.offsetHeight;
+      }
+
+      if (scrollTop !== itemsContainer.scrollTop) {
+        itemsContainer.scrollTop = scrollTop;
+      }
+    }
+  }, {
     key: 'render',
@@ -248,0 +297,0 @@ value: function render() {

package.json

 {
   "name": "react-autowhatever",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "Accessible rendering layer for Autosuggest and Autocomplete components",
@@ -34,5 +34,5 @@ "main": "dist/Autowhatever.js",
     "autoprefixer": "^6.3.6",
-    "babel-cli": "^6.7.7",
-    "babel-core": "^6.7.7",
-    "babel-eslint": "^6.0.3",
+    "babel-cli": "^6.8.0",
+    "babel-core": "^6.8.0",
+    "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
@@ -42,12 +42,12 @@ "babel-preset-es2015": "^6.6.0",
     "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.7.2",
+    "babel-register": "^6.8.0",
     "chai": "^3.5.0",
     "css-loader": "^0.23.1",
-    "eslint": "^2.8.0",
-    "eslint-plugin-react": "^5.0.1",
+    "eslint": "2.8.0",
+    "eslint-plugin-react": "^5.1.1",
     "extract-text-webpack-plugin": "^1.0.1",
-    "less": "^2.6.1",
+    "less": "^2.7.1",
     "less-loader": "^2.2.3",
     "mocha": "^2.4.5",
-    "postcss-loader": "^0.8.2",
+    "postcss-loader": "^0.9.1",
     "react": "^15.0.1",
@@ -57,3 +57,3 @@ "react-dom": "^15.0.1",
     "react-redux": "^4.4.5",
-    "redux": "^3.5.1",
+    "redux": "^3.5.2",
     "style-loader": "^0.13.1",
@@ -60,0 +60,0 @@ "webpack": "^1.13.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

19506

increased by9.73%

Lines of code

313

increased by15.5%

No dependency changes