react-autowhatever - npm Package Compare versions

Comparing version 0.2.2 to 1.0.0

demo/src/components/App/App.js

@@ -10,2 +10,5 @@ import styles from './App.less';
 import Example4 from 'Example4/Example4';
+import Example5 from 'Example5/Example5';
+import Example6 from 'Example6/Example6';
+import Example7 from 'Example7/Example7';
 
@@ -40,2 +43,11 @@ export default class App extends Component {
           </div>
+          <div className={styles.exampleContainer}>
+            <Example5 />
+          </div>
+          <div className={styles.exampleContainer}>
+            <Example6 />
+          </div>
+          <div className={styles.exampleContainer}>
+            <Example7 />
+          </div>
         </div>
@@ -42,0 +54,0 @@ <ForkMeOnGitHub user="moroshko" repo="react-autowhatever" />

demo/src/components/App/components/Example0/Example0.js

@@ -5,3 +5,3 @@ import theme from '../theme.less';
 import { connect } from 'react-redux';
-import { updateInputValue } from 'flux/actionCreators/app';
+import { updateInputValue } from 'actions/app';
 import Autowhatever from 'Autowhatever';
@@ -8,0 +8,0 @@ import SourceCodeLink from 'SourceCodeLink/SourceCodeLink';

demo/src/components/App/components/Example1/Example1.js

@@ -5,3 +5,3 @@ import theme from '../theme.less';
 import { connect } from 'react-redux';
-import { updateInputValue } from 'flux/actionCreators/app';
+import { updateInputValue } from 'actions/app';
 import Autowhatever from 'Autowhatever';
@@ -8,0 +8,0 @@ import SourceCodeLink from 'SourceCodeLink/SourceCodeLink';

demo/src/components/App/components/Example2/Example2.js

@@ -5,3 +5,3 @@ import theme from '../theme.less';
 import { connect } from 'react-redux';
-import { updateInputValue } from 'flux/actionCreators/app';
+import { updateInputValue } from 'actions/app';
 import Autowhatever from 'Autowhatever';
@@ -8,0 +8,0 @@ import SourceCodeLink from 'SourceCodeLink/SourceCodeLink';

demo/src/components/App/components/Example3/Example3.js

@@ -5,3 +5,3 @@ import theme from '../theme.less';
 import { connect } from 'react-redux';
-import { updateInputValue } from 'flux/actionCreators/app';
+import { updateInputValue } from 'actions/app';
 import Autowhatever from 'Autowhatever';
@@ -8,0 +8,0 @@ import SourceCodeLink from 'SourceCodeLink/SourceCodeLink';

demo/src/components/App/components/Example4/Example4.js

@@ -5,3 +5,3 @@ import theme from '../theme.less';
 import { connect } from 'react-redux';
-import { updateInputValue } from 'flux/actionCreators/app';
+import { updateInputValue } from 'actions/app';
 import Autowhatever from 'Autowhatever';
@@ -8,0 +8,0 @@ import SourceCodeLink from 'SourceCodeLink/SourceCodeLink';

demo/src/index.js

@@ -5,17 +5,27 @@ import React, { Component } from 'react';
 import { Provider } from 'react-redux';
-import appReducer from 'flux/reducers/app';
+import { devTools } from 'redux-devtools';
+import { DevTools } from 'redux-devtools/lib/react';
+import DiffMonitor from 'redux-devtools-diff-monitor';
+import appReducer from 'reducers/app';
 import App from 'App/App';
 
-class Demo extends Component {
-  constructor() {
-    super();
+//const store = devTools()(createStore)(appReducer);
+const store = createStore(appReducer);
 
-    this.store = createStore(appReducer);
-  }
+// Enable Webpack hot module replacement for reducers
+module.hot.accept('reducers/app', () => {
+  const nextRootReducer = require('reducers/app');
 
+  store.replaceReducer(nextRootReducer);
+});
+
+class Demo extends Component {
   render() {
     return (
-      <Provider store={this.store}>
-        {() => <App />}
-      </Provider>
+      <div>
+        <Provider store={store}>
+          <App />
+        </Provider>
+        {/*<DevTools store={store} monitor={DiffMonitor} />*/}
+      </div>
     );
@@ -22,0 +32,0 @@ }

package.json

 {
   "name": "react-autowhatever",
-  "version": "0.2.2",
+  "version": "1.0.0",
   "description": "Accessible rendering layer for Autosuggest and Autocomplete components",
@@ -24,23 +24,26 @@ "main": "dist/Autowhatever.js",
     "react": "^0.14.0-beta3",
-    "react-themeable": "^1.0.1"
+    "react-themeable": "^1.0.1",
+    "section-iterator": "^1.1.0"
   },
   "devDependencies": {
-    "autoprefixer-loader": "^2.0.0",
-    "babel": "^5.8.21",
-    "babel-eslint": "^4.0.5",
+    "autoprefixer-loader": "^2.1.0",
+    "babel": "^5.8.23",
+    "babel-eslint": "^4.1.1",
     "babel-loader": "^5.3.2",
     "chai": "^3.2.0",
-    "css-loader": "^0.16.0",
-    "eslint": "^1.1.0",
-    "eslint-plugin-react": "^3.2.2",
+    "css-loader": "^0.17.0",
+    "eslint": "^1.3.1",
+    "eslint-plugin-react": "^3.3.1",
     "extract-text-webpack-plugin": "^0.8.2",
     "less": "^2.5.1",
     "less-loader": "^2.2.0",
-    "mocha": "^2.2.5",
+    "mocha": "^2.3.0",
     "react-dom": "^0.14.0-beta3",
-    "react-hot-loader": "^1.2.8",
-    "react-redux": "^0.8.2",
-    "redux": "^1.0.0",
+    "react-hot-loader": "^1.3.0",
+    "react-redux": "^2.1.0",
+    "redux": "^2.0.0",
+    "redux-devtools": "^2.1.0",
+    "redux-devtools-diff-monitor": "^1.0.0",
     "style-loader": "^0.12.3",
-    "webpack": "^1.11.0",
+    "webpack": "^1.12.1",
     "webpack-dev-server": "^1.10.1"
@@ -47,0 +50,0 @@ },

README.md

 [![Build Status][status-image]][status-url]
 
-<a href="http://react-autowhatever.js.org" target="_blank">Live Examples</a>
+<a href="http://react-autowhatever.js.org" target="_blank">Demo</a>
 
 **TODO:**
 
+* Write docs
 * Write tests
-* Write docs
 
 **Later:**
 
-* Add more examples
 * Add support for items container with a scrollbar
@@ -14,0 +13,0 @@

src/Autowhatever.js

 import React, { Component, PropTypes } from 'react';
+import createSectionIterator from 'section-iterator';
 import themeable from 'react-themeable';
@@ -14,2 +15,3 @@
     inputProps: PropTypes.object,          // Arbitrary input props
+    itemProps: PropTypes.object,           // Arbitrary item props
     focusedSectionIndex: PropTypes.number, // Section index of the focused item
@@ -34,2 +36,3 @@ focusedItemIndex: PropTypes.number,    // Focused item index (within a section)
     inputProps: {},
+    itemProps: {},
     focusedSectionIndex: null,
@@ -50,2 +53,8 @@ focusedItemIndex: null,
 
+  constructor(props) {
+    super(props);
+
+    this.onKeyDown = ::this.onKeyDown;
+  }
+
   getItemId(sectionIndex, itemIndex) {
@@ -70,10 +79,28 @@ if (itemIndex === null) {
     const { renderItem, focusedSectionIndex, focusedItemIndex } = this.props;
+    const { onMouseEnter, onMouseLeave, onMouseDown } = this.props.itemProps;
 
     return items.map((item, itemIndex) => {
+      const onMouseEnterFn = onMouseEnter ?
+        event => onMouseEnter(event, { sectionIndex, itemIndex }) :
+        () => {};
+      const onMouseLeaveFn = onMouseLeave ?
+        event => onMouseLeave(event, { sectionIndex, itemIndex }) :
+        () => {};
+      const onMouseDownFn = onMouseDown ?
+        event => onMouseDown(event, { sectionIndex, itemIndex }) :
+        () => {};
+      const itemProps = {
+        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 (
-        <li id={this.getItemId(sectionIndex, itemIndex)}
-            role="option"
-            {...theme(itemIndex, 'item', sectionIndex === focusedSectionIndex &&
-                                         itemIndex === focusedItemIndex &&
-                                         'item--focused')}>
+        <li {...itemProps}>
           {renderItem(item)}
@@ -124,4 +151,31 @@ </li>
 
+  onKeyDown(event) {
+    const { inputProps, focusedSectionIndex, focusedItemIndex } = this.props;
+    const { onKeyDown } = inputProps;
+
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        const { multiSection, items, getSectionItems } = this.props;
+        const sectionIterator = createSectionIterator({
+          multiSection,
+          data: multiSection ?
+            items.map(section => getSectionItems(section).length) :
+            items.length
+        });
+        const nextPrev = (event.key === 'ArrowDown' ? 'next' : 'prev');
+        const [newFocusedSectionIndex, newFocusedItemIndex] =
+          sectionIterator[nextPrev]([focusedSectionIndex, focusedItemIndex]);
+
+        onKeyDown(event, { newFocusedSectionIndex, newFocusedItemIndex });
+        break;
+
+      default:
+        onKeyDown(event, { focusedSectionIndex, focusedItemIndex });
+    }
+  }
+
   render() {
-    const { id, multiSection, items, focusedSectionIndex, focusedItemIndex } = this.props;
+    const { id, multiSection, items,
+            focusedSectionIndex, focusedItemIndex } = this.props;
     const isOpen = (items.length > 0);
@@ -140,2 +194,3 @@ const ariaActivedescendant = this.getItemId(focusedSectionIndex, focusedItemIndex);
       ...this.props.inputProps,
+      onKeyDown: this.props.inputProps.onKeyDown && this.onKeyDown,
       ...theme('input', 'input', isOpen && 'input--open')
@@ -142,0 +197,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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47998

increased by30.35%

Number of package files

34

increased by6.25%

Lines of code

1213

increased by40.23%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

21

increased by10.53%

Number of lines in readme file

16

decreased by-5.88%

Dependency changes

• + Addedsection-iterator@^1.1.0

• + Addedsection-iterator@1.1.0(transitive)