- {
- items.map((section, sectionIndex) => {
- if (!shouldRenderSection(section)) {
- return null;
- }
-
- const keyPrefix = `react-autowhatever-${id}-`;
- const sectionKeyPrefix = `${keyPrefix}section-${sectionIndex}-`;
-
- // `key` is provided by theme()
- /* eslint-disable react/jsx-key */
- return (
-
-
-
-
- );
- /* eslint-enable react/jsx-key */
- })
- }
-
+
);
}
diff --git a/src/ItemsList.js b/src/ItemsList.js
index 355ead5..78d39c4 100644
--- a/src/ItemsList.js
+++ b/src/ItemsList.js
@@ -4,7 +4,6 @@ import compareObjects from './compareObjects';
export default class ItemsList extends Component {
static propTypes = {
- id: PropTypes.string.isRequired,
items: PropTypes.array.isRequired,
itemProps: PropTypes.oneOfType([
PropTypes.object,
@@ -14,6 +13,7 @@ export default class ItemsList extends Component {
renderItemData: PropTypes.object.isRequired,
sectionIndex: PropTypes.number,
focusedItemIndex: PropTypes.number,
+ onFocusedItemChange: PropTypes.func.isRequired,
getItemId: PropTypes.func.isRequired,
theme: PropTypes.func.isRequired,
keyPrefix: PropTypes.string.isRequired
@@ -26,75 +26,27 @@ export default class ItemsList extends Component {
constructor() {
super();
- this.storeItemsContainerReference = this.storeItemsContainerReference.bind(this);
this.storeFocusedItemReference = this.storeFocusedItemReference.bind(this);
}
- componentDidMount() {
- this.ensureFocusedItemIsVisible();
- }
-
shouldComponentUpdate(nextProps) {
return compareObjects(nextProps, this.props, ['itemProps']);
}
- componentDidUpdate() {
- this.ensureFocusedItemIsVisible();
- }
-
- storeItemsContainerReference(itemsContainer) {
- if (itemsContainer !== null) {
- this.itemsContainer = itemsContainer;
- }
- }
-
storeFocusedItemReference(focusedItem) {
- if (focusedItem !== null) {
- this.focusedItem = focusedItem.item;
- }
- }
-
- ensureFocusedItemIsVisible() {
- if (!this.focusedItem) {
- return;
- }
-
- const { focusedItem, itemsContainer } = this;
- const itemOffsetRelativeToContainer =
- focusedItem.offsetParent === itemsContainer
- ? focusedItem.offsetTop
- : focusedItem.offsetTop - itemsContainer.offsetTop;
-
- let { scrollTop } = itemsContainer; // 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;
- }
+ this.props.onFocusedItemChange(focusedItem === null ? null : focusedItem.item);
}
render() {
const {
- id, items, itemProps, renderItem, renderItemData, sectionIndex,
+ items, itemProps, renderItem, renderItemData, sectionIndex,
focusedItemIndex, getItemId, theme, keyPrefix
} = this.props;
const sectionPrefix = (sectionIndex === null ? keyPrefix : `${keyPrefix}section-${sectionIndex}-`);
- const itemsContainerClass = (sectionIndex === null ? 'itemsContainer' : 'sectionItemsContainer');
const isItemPropsFunction = (typeof itemProps === 'function');
return (
-
+
{
items.map((item, itemIndex) => {
const isFocused = (itemIndex === focusedItemIndex);
diff --git a/test/helpers.js b/test/helpers.js
index 0bf08d4..8640c5f 100644
--- a/test/helpers.js
+++ b/test/helpers.js
@@ -16,11 +16,9 @@ export const init = application => {
export const eventMatcher = sinon.match.instanceOf(SyntheticEvent);
-export const getStoredFocusedItemName = () => {
- const { focusedItem } = app.autowhatever.itemsList;
-
- return focusedItem ? focusedItem.constructor.name : null;
-};
+export const getStoredInput = () => app.autowhatever.input;
+export const getStoredItemsContainer = () => app.autowhatever.itemsContainer;
+export const getStoredFocusedItem = () => app.autowhatever.focusedItem;
export const getInputAttribute = attr =>
input.getAttribute(attr);
diff --git a/test/plain-list/Autowhatever.test.js b/test/plain-list/Autowhatever.test.js
index 597c84c..7dccc87 100644
--- a/test/plain-list/Autowhatever.test.js
+++ b/test/plain-list/Autowhatever.test.js
@@ -3,7 +3,9 @@ import TestUtils from 'react-addons-test-utils';
import { expect } from 'chai';
import {
init,
- getStoredFocusedItemName,
+ getStoredInput,
+ getStoredItemsContainer,
+ getStoredFocusedItem,
getInputAttribute,
getItemsContainerAttribute,
getItems,
@@ -34,6 +36,18 @@ describe('Plain List Autowhatever', () => {
it('should call `renderItem` exactly `items.length` times', () => {
expect(renderItem).to.have.callCount(5);
});
+
+ it('should store the input on the instance', () => {
+ expect(getStoredInput().getAttribute('id')).to.equal('my-fancy-input');
+ });
+
+ it('should store the items container on the instance', () => {
+ expect(getStoredItemsContainer().getAttribute('id')).to.equal('react-autowhatever-my-fancy-component');
+ });
+
+ it('should set the stored focused item on the instance to null', () => {
+ expect(getStoredFocusedItem()).to.equal(null);
+ });
});
describe('hovering items', () => {
@@ -68,7 +82,15 @@ describe('Plain List Autowhatever', () => {
it('should store the focused item on the instance', () => {
mouseEnterItem(2);
- expect(getStoredFocusedItemName()).to.equal('HTMLLIElement');
+ expect(getStoredFocusedItem().getAttribute('id'))
+ .to.equal('react-autowhatever-my-fancy-component--item-2');
+
+ mouseLeaveItem(2);
+ expect(getStoredFocusedItem()).to.equal(null);
+
+ mouseEnterItem(3);
+ expect(getStoredFocusedItem().getAttribute('id'))
+ .to.equal('react-autowhatever-my-fancy-component--item-3');
});
});
});
diff --git a/test/plain-list/AutowhateverApp.js b/test/plain-list/AutowhateverApp.js
index cb8859e..bfde38b 100644
--- a/test/plain-list/AutowhateverApp.js
+++ b/test/plain-list/AutowhateverApp.js
@@ -56,6 +56,7 @@ export default class AutowhateverApp extends Component {
render() {
const { value, focusedItemIndex } = this.state;
const inputProps = {
+ id: 'my-fancy-input',
value,
onChange: this.onChange
};