react-autowhatever - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

demo/src/index.js

@@ -14,8 +14,10 @@ import React, { Component } from 'react';
 
-// Enable Webpack hot module replacement for reducers
-module.hot.accept('reducers/app', () => {
-  const nextRootReducer = require('reducers/app');
+if (module.hot) {
+  // Enable Webpack hot module replacement for reducers
+  module.hot.accept('reducers/app', () => {
+    const nextRootReducer = require('reducers/app');
 
-  store.replaceReducer(nextRootReducer);
-});
+    store.replaceReducer(nextRootReducer);
+  });
+}
 
@@ -22,0 +24,0 @@ class Demo extends Component {

dist/Autowhatever.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -24,2 +26,6 @@
 
+var _sectionIterator = require('section-iterator');
+
+var _sectionIterator2 = _interopRequireDefault(_sectionIterator);
+
 var _reactThemeable = require('react-themeable');
@@ -32,6 +38,61 @@
 
-  function Autowhatever() {
+  _createClass(Autowhatever, null, [{
+    key: 'propTypes',
+    value: {
+      id: _react.PropTypes.string, // Used in aria-* attributes. If multiple Autowhatever's are rendered on a page, they must have unique ids.
+      multiSection: _react.PropTypes.bool, // Indicates whether a multi section layout should be rendered.
+      items: _react.PropTypes.array.isRequired, // Array of items or sections to render.
+      renderItem: _react.PropTypes.func, // This function renders a single item.
+      shouldRenderSection: _react.PropTypes.func, // This function gets a section and returns whether it should be rendered, or not.
+      renderSectionTitle: _react.PropTypes.func, // This function gets a section and renders its title.
+      getSectionItems: _react.PropTypes.func, // This function gets a section and returns its items, which will be passed into `renderItem` for rendering.
+      inputProps: _react.PropTypes.object, // Arbitrary input props
+      itemProps: _react.PropTypes.object, // Arbitrary item props
+      focusedSectionIndex: _react.PropTypes.number, // Section index of the focused item
+      focusedItemIndex: _react.PropTypes.number, // Focused item index (within a section)
+      theme: _react.PropTypes.object // Styles. See: https://github.com/markdalgleish/react-themeable
+    },
+    enumerable: true
+  }, {
+    key: 'defaultProps',
+    value: {
+      id: '1',
+      multiSection: false,
+      shouldRenderSection: function shouldRenderSection() {
+        return true;
+      },
+      renderItem: function renderItem() {
+        throw new Error('`renderItem` must be provided');
+      },
+      renderSectionTitle: function renderSectionTitle() {
+        throw new Error('`renderSectionTitle` must be provided');
+      },
+      getSectionItems: function getSectionItems() {
+        throw new Error('`getSectionItems` must be provided');
+      },
+      inputProps: {},
+      itemProps: {},
+      focusedSectionIndex: null,
+      focusedItemIndex: null,
+      theme: {
+        container: 'react-autowhatever__container',
+        input: 'react-autowhatever__input',
+        'input--open': 'react-autowhatever__input--open',
+        'items-container': 'react-autowhatever__items-container',
+        item: 'react-autowhatever__item',
+        'item--focused': 'react-autowhatever__item--focused',
+        'section-container': 'react-autowhatever__section-container',
+        'section-title': 'react-autowhatever__section-title',
+        'section-items-container': 'react-autowhatever__section-items-container'
+      }
+    },
+    enumerable: true
+  }]);
+
+  function Autowhatever(props) {
     _classCallCheck(this, Autowhatever);
 
-    _get(Object.getPrototypeOf(Autowhatever.prototype), 'constructor', this).apply(this, arguments);
+    _get(Object.getPrototypeOf(Autowhatever.prototype), 'constructor', this).call(this, props);
+
+    this.onKeyDown = this.onKeyDown.bind(this);
   }
@@ -68,9 +129,29 @@
       var focusedItemIndex = _props.focusedItemIndex;
+      var _props$itemProps = this.props.itemProps;
+      var onMouseEnter = _props$itemProps.onMouseEnter;
+      var onMouseLeave = _props$itemProps.onMouseLeave;
+      var onMouseDown = _props$itemProps.onMouseDown;
 
       return items.map(function (item, itemIndex) {
+        var onMouseEnterFn = onMouseEnter ? function (event) {
+          return onMouseEnter(event, { sectionIndex: sectionIndex, itemIndex: itemIndex });
+        } : function () {};
+        var onMouseLeaveFn = onMouseLeave ? function (event) {
+          return onMouseLeave(event, { sectionIndex: sectionIndex, itemIndex: itemIndex });
+        } : function () {};
+        var onMouseDownFn = onMouseDown ? function (event) {
+          return onMouseDown(event, { sectionIndex: sectionIndex, itemIndex: itemIndex });
+        } : function () {};
+        var itemProps = _extends({
+          id: _this.getItemId(sectionIndex, itemIndex),
+          role: 'option'
+        }, _this.props.itemProps, {
+          onMouseEnter: onMouseEnterFn,
+          onMouseLeave: onMouseLeaveFn,
+          onMouseDown: onMouseDownFn
+        }, theme(itemIndex, 'item', sectionIndex === focusedSectionIndex && itemIndex === focusedItemIndex && 'item--focused'));
+
         return _react2['default'].createElement(
           'li',
-          _extends({ id: _this.getItemId(sectionIndex, itemIndex),
-            role: 'option'
-          }, theme(itemIndex, 'item', sectionIndex === focusedSectionIndex && itemIndex === focusedItemIndex && 'item--focused')),
+          itemProps,
           renderItem(item)
@@ -132,11 +213,48 @@ );
   }, {
-    key: 'render',
-    value: function render() {
+    key: 'onKeyDown',
+    value: function onKeyDown(event) {
       var _props4 = this.props;
-      var id = _props4.id;
-      var multiSection = _props4.multiSection;
-      var items = _props4.items;
+      var inputProps = _props4.inputProps;
       var focusedSectionIndex = _props4.focusedSectionIndex;
       var focusedItemIndex = _props4.focusedItemIndex;
+      var onKeyDown = inputProps.onKeyDown;
 
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          var _props5 = this.props,
+              multiSection = _props5.multiSection,
+              items = _props5.items,
+              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$nextPrev = sectionIterator[nextPrev]([focusedSectionIndex, focusedItemIndex]),
+              _sectionIterator$nextPrev2 = _slicedToArray(_sectionIterator$nextPrev, 2),
+              newFocusedSectionIndex = _sectionIterator$nextPrev2[0],
+              newFocusedItemIndex = _sectionIterator$nextPrev2[1];
+
+          onKeyDown(event, { newFocusedSectionIndex: newFocusedSectionIndex, newFocusedItemIndex: newFocusedItemIndex });
+          break;
+
+        default:
+          onKeyDown(event, { focusedSectionIndex: focusedSectionIndex, focusedItemIndex: focusedItemIndex });
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props6 = this.props;
+      var id = _props6.id;
+      var multiSection = _props6.multiSection;
+      var items = _props6.items;
+      var focusedSectionIndex = _props6.focusedSectionIndex;
+      var focusedItemIndex = _props6.focusedItemIndex;
+
       var isOpen = items.length > 0;
@@ -154,3 +272,5 @@ var ariaActivedescendant = this.getItemId(focusedSectionIndex, focusedItemIndex);
         'aria-activedescendant': ariaActivedescendant
-      }, this.props.inputProps, theme('input', 'input', isOpen && 'input--open'));
+      }, this.props.inputProps, {
+        onKeyDown: this.props.inputProps.onKeyDown && this.onKeyDown
+      }, theme('input', 'input', isOpen && 'input--open'));
 
@@ -165,51 +285,2 @@ return _react2['default'].createElement(
     }
-  }], [{
-    key: 'propTypes',
-    value: {
-      id: _react.PropTypes.string, // Used in aria-* attributes. If multiple Autowhatever's are rendered on a page, they must have unique ids.
-      multiSection: _react.PropTypes.bool, // Indicates whether a multi section layout should be rendered.
-      items: _react.PropTypes.array.isRequired, // Array of items or sections to render.
-      renderItem: _react.PropTypes.func, // This function renders a single item.
-      shouldRenderSection: _react.PropTypes.func, // This function gets a section and returns whether it should be rendered, or not.
-      renderSectionTitle: _react.PropTypes.func, // This function gets a section and renders its title.
-      getSectionItems: _react.PropTypes.func, // This function gets a section and returns its items, which will be passed into `renderItem` for rendering.
-      inputProps: _react.PropTypes.object, // Arbitrary input props
-      focusedSectionIndex: _react.PropTypes.number, // Section index of the focused item
-      focusedItemIndex: _react.PropTypes.number, // Focused item index (within a section)
-      theme: _react.PropTypes.object // Styles. See: https://github.com/markdalgleish/react-themeable
-    },
-    enumerable: true
-  }, {
-    key: 'defaultProps',
-    value: {
-      id: '1',
-      multiSection: false,
-      shouldRenderSection: function shouldRenderSection() {
-        return true;
-      },
-      renderItem: function renderItem() {
-        throw new Error('`renderItem` must be provided');
-      },
-      renderSectionTitle: function renderSectionTitle() {
-        throw new Error('`renderSectionTitle` must be provided');
-      },
-      getSectionItems: function getSectionItems() {
-        throw new Error('`getSectionItems` must be provided');
-      },
-      inputProps: {},
-      focusedSectionIndex: null,
-      focusedItemIndex: null,
-      theme: {
-        container: 'react-autowhatever__container',
-        input: 'react-autowhatever__input',
-        'input--open': 'react-autowhatever__input--open',
-        'items-container': 'react-autowhatever__items-container',
-        item: 'react-autowhatever__item',
-        'item--focused': 'react-autowhatever__item--focused',
-        'section-container': 'react-autowhatever__section-container',
-        'section-title': 'react-autowhatever__section-title',
-        'section-items-container': 'react-autowhatever__section-items-container'
-      }
-    },
-    enumerable: true
   }]);
@@ -216,0 +287,0 @@

package.json

 {
   "name": "react-autowhatever",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Accessible rendering layer for Autosuggest and Autocomplete components",
@@ -5,0 +5,0 @@ "main": "dist/Autowhatever.js",

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

51549

increased by7.4%

Lines of code

1277

increased by5.28%

No dependency changes