diff --git a/.eslintrc b/.eslintrc
index 82ad3a5..112674d 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,13 +2,14 @@
"env": {
"es6": true,
"node": true,
- "browser": true
+ "browser": true,
+ "mocha": true
},
"parser": "babel-eslint",
"plugins": [
"react"
],
- "extends": "plugin:react/recommended",
+ "extends": ["eslint:recommended", "plugin:react/recommended"],
"rules": {
"array-callback-return": 2,
"brace-style": [2, "1tbs"],
@@ -39,6 +40,7 @@
"template-curly-spacing": [2, "never"],
"react/jsx-boolean-value": [2, "always"],
- "react/jsx-space-before-closing": [2, "always"]
+ "react/jsx-space-before-closing": [2, "always"],
+ "react/sort-comp": 2
}
}
diff --git a/demo/src/components/App/App.js b/demo/src/components/App/App.js
index b4f861d..b1cacb7 100644
--- a/demo/src/components/App/App.js
+++ b/demo/src/components/App/App.js
@@ -9,8 +9,8 @@ import Example3 from 'Example3/Example3';
import Example4 from 'Example4/Example4';
import Example5 from 'Example5/Example5';
import Example6 from 'Example6/Example6';
-import Example6s from 'Example6s/Example6s';
import Example7 from 'Example7/Example7';
+import Example8 from 'Example8/Example8';
export default class App extends Component {
render() {
@@ -47,10 +47,10 @@ export default class App extends Component {
-
+
-
+
diff --git a/demo/src/components/App/components/Example7/Example7.js b/demo/src/components/App/components/Example7/Example7.js
index 7845cc9..c0493ef 100644
--- a/demo/src/components/App/components/Example7/Example7.js
+++ b/demo/src/components/App/components/Example7/Example7.js
@@ -10,44 +10,27 @@ const exampleId = '7';
const file = `demo/src/components/App/components/Example${exampleId}/Example${exampleId}.js`;
const items = [{
- title: 'A',
- items: [{
- text: 'Apple'
- }, {
- text: 'Apricot'
- }]
+ text: 'Apple cake'
}, {
- title: 'B',
- items: [{
- text: 'Banana'
- }]
+ text: 'Apple pie'
}, {
- title: 'C',
- items: [{
- text: 'Cherry'
- }]
+ text: 'Banana cake'
+}, {
+ text: 'Banana pie'
+}, {
+ text: 'Cherry cake'
+}, {
+ text: 'Cherry pie'
+}, {
+ text: 'Grapefruit cake'
+}, {
+ text: 'Grapefruit pie'
+}, {
+ text: 'Lemon cake'
+}, {
+ text: 'Lemon pie'
}];
-function shouldRenderSection(section) {
- return section.items.length > 0;
-}
-
-function renderSectionTitle(section) {
- return (
- {section.title}
- );
-}
-
-function getSectionItems(section) {
- return section.items;
-}
-
-function renderItem(item) {
- return (
- {item.text}
- );
-}
-
function mapStateToProps(state) {
return {
value: state[exampleId].value,
@@ -61,22 +44,21 @@ function mapDispatchToProps(dispatch) {
onChange: event => {
dispatch(updateInputValue(exampleId, event.target.value));
},
- onKeyDown: (event, { focusedSectionIndex, focusedItemIndex, newFocusedSectionIndex, newFocusedItemIndex }) => {
- switch (event.key) {
- case 'ArrowDown':
- case 'ArrowUp':
- event.preventDefault();
- dispatch(updateFocusedItem(exampleId, newFocusedSectionIndex, newFocusedItemIndex));
- break;
-
- case 'Enter':
- dispatch(updateInputValue(exampleId, items[focusedSectionIndex].items[focusedItemIndex].text + ' selected'));
- break;
+ onKeyDown: (event, { newFocusedSectionIndex, newFocusedItemIndex }) => {
+ if (typeof newFocusedItemIndex !== 'undefined') {
+ event.preventDefault();
+ dispatch(updateFocusedItem(exampleId, newFocusedSectionIndex, newFocusedItemIndex));
}
}
};
}
+function renderItem(item) {
+ return (
+ {item.text}
+ );
+}
+
class Example extends Component {
static propTypes = {
value: PropTypes.string.isRequired,
@@ -94,11 +76,7 @@ class Example extends Component {
return (
0;
+}
-for (let { text } of items0) {
- for (let w of ['cake', 'pie', 'soup', 'tart']) {
- items.push({ text: `${text} ${w}` });
- }
+function renderSectionTitle(section) {
+ return (
+ {section.title}
+ );
+}
+
+function getSectionItems(section) {
+ return section.items;
+}
+
+function renderItem(item) {
+ return (
+ {item.text}
+ );
}
function mapStateToProps(state) {
@@ -43,21 +61,22 @@ function mapDispatchToProps(dispatch) {
onChange: event => {
dispatch(updateInputValue(exampleId, event.target.value));
},
- onKeyDown: (event, { newFocusedSectionIndex, newFocusedItemIndex }) => {
- if (typeof newFocusedItemIndex !== 'undefined') {
- event.preventDefault();
- dispatch(updateFocusedItem(exampleId, newFocusedSectionIndex, newFocusedItemIndex));
+ onKeyDown: (event, { focusedSectionIndex, focusedItemIndex, newFocusedSectionIndex, newFocusedItemIndex }) => {
+ switch (event.key) {
+ case 'ArrowDown':
+ case 'ArrowUp':
+ event.preventDefault();
+ dispatch(updateFocusedItem(exampleId, newFocusedSectionIndex, newFocusedItemIndex));
+ break;
+
+ case 'Enter':
+ dispatch(updateInputValue(exampleId, items[focusedSectionIndex].items[focusedItemIndex].text + ' selected'));
+ break;
}
}
};
}
-function renderItem(item) {
- return (
- {item.text}
- );
-}
-
class Example extends Component {
static propTypes = {
value: PropTypes.string.isRequired,
@@ -75,7 +94,11 @@ class Example extends Component {
return (
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;
+ }
+ }
+
render() {
const { id, multiSection, focusedSectionIndex, focusedItemIndex } = this.props;
const theme = themeable(this.props.theme);
@@ -240,34 +275,4 @@ export default class Autowhatever extends Component {
);
}
-
- componentDidMount() {
- this.ensureFocusedSuggestionIsVisible();
- }
-
- componentDidUpdate() {
- this.ensureFocusedSuggestionIsVisible();
- }
-
- ensureFocusedSuggestionIsVisible() {
- if (this.refs.focusedItem) {
- const { focusedItem, itemsContainer } = this.refs;
- const itemOffsetRelativeToContainer = (
- focusedItem.offsetParent === itemsContainer
- ? focusedItem.offsetTop
- : focusedItem.offsetTop - itemsContainer.offsetTop);
-
- let { scrollTop } = itemsContainer; // Top of visible area
- if (itemOffsetRelativeToContainer < scrollTop) {
- // Item is off the top of visible area. Scroll so it is topmost item.
- scrollTop = itemOffsetRelativeToContainer;
- } else if (itemOffsetRelativeToContainer + focusedItem.offsetHeight > scrollTop + itemsContainer.offsetHeight) {
- // Item is off bottom of visible area. Scroll so it is at bottom.
- scrollTop = itemOffsetRelativeToContainer + focusedItem.offsetHeight - itemsContainer.offsetHeight;
- }
- if (scrollTop !== itemsContainer.scrollTop) {
- itemsContainer.scrollTop = scrollTop;
- }
- }
- }
}