react-autowhatever - npm Package Compare versions

Comparing version 3.3.0 to 4.0.0

dist/Autowhatever.js

@@ -25,2 +25,6 @@ 'use strict';
 
+var _Item = require('./Item');
+
+var _Item2 = _interopRequireDefault(_Item);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,4 +38,2 @@
 
-function noop() {}
-
 var Autowhatever = function (_Component) {
@@ -46,6 +48,8 @@ _inherits(Autowhatever, _Component);
     _this.onKeyDown = _this.onKeyDown.bind(_this);
+    _this.storeInputReference = _this.storeInputReference.bind(_this);
+    _this.storeItemsContainerReference = _this.storeItemsContainerReference.bind(_this);
+    _this.storeFocusedItemReference = _this.storeFocusedItemReference.bind(_this);
     return _this;
-  } // Styles. See: https://github.com/markdalgleish/react-themeable
+  }
 
-
   _createClass(Autowhatever, [{
@@ -62,2 +66,23 @@ key: 'componentDidMount',
   }, {
+    key: 'storeInputReference',
+    value: function storeInputReference(input) {
+      if (input !== null) {
+        this.input = input;
+      }
+    }
+  }, {
+    key: 'storeItemsContainerReference',
+    value: function storeItemsContainerReference(itemsContainer) {
+      if (itemsContainer !== null) {
+        this.itemsContainer = itemsContainer;
+      }
+    }
+  }, {
+    key: 'storeFocusedItemReference',
+    value: function storeFocusedItemReference(focusedItem) {
+      if (focusedItem !== null) {
+        this.focusedItem = focusedItem;
+      }
+    }
+  }, {
     key: 'getItemId',
@@ -93,44 +118,23 @@ value: function getItemId(sectionIndex, itemIndex) {
       var focusedItemIndex = _props.focusedItemIndex;
+      var itemProps = _props.itemProps;
 
-      var isItemPropsFunction = typeof this.props.itemProps === 'function';
+      var isItemPropsFunction = typeof itemProps === 'function';
+      var sectionPrefix = sectionIndex === null ? '' : 'section-' + sectionIndex + '-';
 
       return items.map(function (item, itemIndex) {
-        var itemPropsObj = isItemPropsFunction ? _this2.props.itemProps({ sectionIndex: sectionIndex, itemIndex: itemIndex }) : _this2.props.itemProps;
-        var onMouseEnter = itemPropsObj.onMouseEnter;
-        var onMouseLeave = itemPropsObj.onMouseLeave;
-        var onMouseDown = itemPropsObj.onMouseDown;
-        var onClick = itemPropsObj.onClick;
-
-
-        var onMouseEnterFn = onMouseEnter ? function (event) {
-          return onMouseEnter(event, { sectionIndex: sectionIndex, itemIndex: itemIndex });
-        } : noop;
-        var onMouseLeaveFn = onMouseLeave ? function (event) {
-          return onMouseLeave(event, { sectionIndex: sectionIndex, itemIndex: itemIndex });
-        } : noop;
-        var onMouseDownFn = onMouseDown ? function (event) {
-          return onMouseDown(event, { sectionIndex: sectionIndex, itemIndex: itemIndex });
-        } : noop;
-        var onClickFn = onClick ? function (event) {
-          return onClick(event, { sectionIndex: sectionIndex, itemIndex: itemIndex });
-        } : noop;
-        var sectionPrefix = sectionIndex === null ? '' : 'section-' + sectionIndex + '-';
+        var isFocused = sectionIndex === focusedSectionIndex && itemIndex === focusedItemIndex;
         var itemKey = 'react-autowhatever-' + id + '-' + sectionPrefix + 'item-' + itemIndex;
-        var isFocused = sectionIndex === focusedSectionIndex && itemIndex === focusedItemIndex;
-        var itemProps = _extends({
+        var itemPropsObj = isItemPropsFunction ? itemProps({ sectionIndex: sectionIndex, itemIndex: itemIndex }) : itemProps;
+        var newItemProps = _extends({
           id: _this2.getItemId(sectionIndex, itemIndex),
-          ref: isFocused ? 'focusedItem' : null,
-          role: 'option'
-        }, theme(itemKey, 'item', isFocused && 'itemFocused'), itemPropsObj, {
-          onMouseEnter: onMouseEnterFn,
-          onMouseLeave: onMouseLeaveFn,
-          onMouseDown: onMouseDownFn,
-          onClick: onClickFn
-        });
+          ref: isFocused ? _this2.storeFocusedItemReference : null
+        }, theme(itemKey, 'item', isFocused && 'itemFocused'), itemPropsObj);
 
-        return _react2.default.createElement(
-          'li',
-          itemProps,
-          renderItem(item)
-        );
+        return _react2.default.createElement(_Item2.default, {
+          sectionIndex: sectionIndex,
+          itemIndex: itemIndex,
+          item: item,
+          itemProps: newItemProps,
+          renderItem: renderItem,
+          key: itemKey });
       });
@@ -166,4 +170,5 @@ }
         'div',
-        _extends({ id: this.getItemsContainerId(),
-          ref: 'itemsContainer',
+        _extends({
+          id: this.getItemsContainerId(),
+          ref: this.storeItemsContainerReference,
           role: 'listbox'
@@ -178,2 +183,4 @@ }, theme('react-autowhatever-' + id + '-items-container', 'itemsContainer')),
 
+          // `key` is provided by theme()
+          /* eslint-disable react/jsx-key */
           return _react2.default.createElement(
@@ -193,2 +200,3 @@ 'div',
           );
+          /* eslint-enable react/jsx-key */
         })
@@ -211,4 +219,5 @@ );
         'ul',
-        _extends({ id: this.getItemsContainerId(),
-          ref: 'itemsContainer',
+        _extends({
+          id: this.getItemsContainerId(),
+          ref: this.storeItemsContainerReference,
           role: 'listbox'
@@ -273,9 +282,8 @@ }, theme('react-autowhatever-' + id + '-items-container', 'itemsContainer')),
     value: function ensureFocusedSuggestionIsVisible() {
-      if (!this.refs.focusedItem) {
+      if (!this.focusedItem) {
         return;
       }
 
-      var _refs = this.refs;
-      var focusedItem = _refs.focusedItem;
-      var itemsContainer = _refs.itemsContainer;
+      var focusedItem = this.focusedItem;
+      var itemsContainer = this.itemsContainer;
 
@@ -316,3 +324,2 @@ var itemOffsetRelativeToContainer = focusedItem.offsetParent === itemsContainer ? focusedItem.offsetTop : focusedItem.offsetTop - itemsContainer.offsetTop;
         role: 'combobox',
-        ref: 'input',
         'aria-autocomplete': 'list',
@@ -323,3 +330,4 @@ 'aria-owns': this.getItemsContainerId(),
       }, theme('react-autowhatever-' + id + '-input', 'input'), this.props.inputProps, {
-        onKeyDown: this.props.inputProps.onKeyDown && this.onKeyDown
+        onKeyDown: this.props.inputProps.onKeyDown && this.onKeyDown,
+        ref: this.storeInputReference
       });
@@ -352,3 +360,4 @@
   focusedItemIndex: _react.PropTypes.number, // Focused item index (within a section)
-  theme: _react.PropTypes.object };
+  theme: _react.PropTypes.object // Styles. See: https://github.com/markdalgleish/react-themeable
+};
 Autowhatever.defaultProps = {
@@ -385,2 +394,2 @@ id: '1',
 };
-exports.default = Autowhatever;
+exports.default = Autowhatever;

package.json

 {
   "name": "react-autowhatever",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "Accessible rendering layer for Autosuggest and Autocomplete components",
@@ -14,5 +14,5 @@ "main": "dist/Autowhatever.js",
     "lint": "eslint demo/src src server.js webpack.dev.config.js webpack.gh-pages.config.js",
-    "test": "mocha --compilers js:babel-register --recursive src/**/*.test.js",
+    "test": "mocha test/index.js --compilers js:babel-register",
     "copy-static-files": "cp demo/src/index.html demo/dist/",
-    "dist": "rm -rf dist && mkdir dist && babel src/Autowhatever.js --out-file dist/Autowhatever.js",
+    "dist": "rm -rf dist && mkdir dist && babel src -d dist",
     "demo-dist": "rm -rf demo/dist && mkdir demo/dist && npm run copy-static-files && webpack --config webpack.gh-pages.config.js",
@@ -45,4 +45,4 @@ "prebuild": "npm run lint && npm test",
     "css-loader": "^0.23.1",
-    "eslint": "2.8.0",
-    "eslint-plugin-react": "^5.1.1",
+    "eslint": "^3.0.1",
+    "eslint-plugin-react": "^6.0.0-alpha.1",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -53,4 +53,4 @@ "less": "^2.7.1",
     "postcss-loader": "^0.9.1",
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1",
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1",
     "react-hot-loader": "^1.3.0",
@@ -57,0 +57,0 @@ "react-redux": "^4.4.5",

README.md

@@ -5,12 +5,3 @@ [![Build Status][status-image]][status-url]
 
-**TODO:**
-
-* Write docs
-* Write tests
-
-**Later:**
-
-* Add support for items container with a scrollbar
-
 [status-image]: https://img.shields.io/codeship/6c79f8c0-2565-0133-4af8-72f090cba113/master.svg
 [status-url]: https://codeship.com/projects/96953

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

24792

increased by27.1%

Number of package files

5

increased by25%

Lines of code

424

increased by35.46%

Worsened metrics

Number of lines in readme file

7

decreased by-56.25%

No dependency changes