diff --git a/src/suggestion/suggestion-list-container.js b/src/suggestion/suggestion-list-container.js index e919f2aeb3..c07b027ee4 100644 --- a/src/suggestion/suggestion-list-container.js +++ b/src/suggestion/suggestion-list-container.js @@ -5,81 +5,12 @@ import KeyCode from '../util/keyCode'; class SuggestionListContainer extends React.Component { - - - /* - componentDidUpdate() { - if (this._suggestionList !== null && this.props.highlightedItem > -1) { - this.resetNativeScrollPosition(); - this.scrollHighlightedItemIntoView(); - } - } - */ - - /* - verticalScrollBarStyle() { - return { - background: '#676767', - borderRadius: '4px', - width: '5px' - }; - } - - verticalContainerStyle() { - return { - width: '6px', - background: 'transparent', - opacity: '1' - }; - } - - scrollAreaStyle() { - return {maxHeight: '240px'}; - } - - - resetNativeScrollPosition() { - if (this.state.nativeScrollContainer) { - const nativeScrollContainer = this.state.nativeScrollContainer; - nativeScrollContainer.scrollTop = 0; - this.ignoreScrollEvents = true; - } - } - - scrollHighlightedItemIntoView() { - const selectedItem = this._suggestionList.getSelectedDOM(); - const itemRect = selectedItem.getBoundingClientRect(); - - const scrollContainer = ReactDOM.findDOMNode(this._scrollarea); - const scrollContainerRect = scrollContainer.getBoundingClientRect(); - - if (itemRect.bottom > scrollContainerRect.bottom) { - this.scrollTo(selectedItem.offsetTop + selectedItem.offsetHeight - scrollContainer.offsetHeight); - } else if (itemRect.top < scrollContainerRect.top) { - this.scrollTo(selectedItem.offsetTop); - } - } - - scrollTo(offsetYAxis) { - this._scrollarea.scrollArea.scrollYTo(offsetYAxis); - } - - onScroll(evt) { - if (!this.ignoreScrollEvents) { - // Need reference to the native scroll container (div) to reset the native scroll position - this.setState({ - nativeScrollContainer: evt.target - }); - } - this.ignoreScrollEvents = false; - } - */ - constructor(props) { super(props); this.onKeyDown = this.onKeyDown.bind(this); + this.setHiglightedIndex = this.setHiglightedIndex.bind(this); this.state = { - highlightedIndex: -1 + highlightedIndex: -1, }; } @@ -93,6 +24,9 @@ class SuggestionListContainer extends React.Component { this.props.suggestions.length - 1 : this.state.highlightedIndex - 1; } + setHiglightedIndex(highlightedIndex) { + this.setState({highlightedIndex}) + } onKeyDown(evt) { const {suggestions, onClose, onBlur, onSelect} = this.props; @@ -100,25 +34,17 @@ class SuggestionListContainer extends React.Component { switch (evt.which) { case KeyCode.DOWN: evt.preventDefault(); - this.setState({ - highlightedIndex: this.nextHighlightedIndex() - }); + this.setHiglightedIndex(this.nextHighlightedIndex()); break; case KeyCode.UP: evt.preventDefault(); - this.setState({ - highlightedIndex: this.previousHighlightedIndex() - }); + this.setHiglightedIndex(this.previousHighlightedIndex()); break; case KeyCode.HOME: - this.setState({ - highlightedIndex: 0 - }); + this.setHiglightedIndex(0); break; case KeyCode.END: - this.setState({ - highlightedIndex: suggestions.length - 1 - }); + this.setHiglightedIndex(suggestions.length - 1); break; case KeyCode.ESC: onClose(); diff --git a/src/suggestion/suggestion-list.js b/src/suggestion/suggestion-list.js index a2463835d2..ff41e551b1 100644 --- a/src/suggestion/suggestion-list.js +++ b/src/suggestion/suggestion-list.js @@ -4,33 +4,7 @@ import Suggestion from './suggestion-item'; export default class SuggestionList extends Component { - - //Todo is needed to correctly sett scrollpos? - // getSelectedDOM() { - // return ReactDOM.findDOMNode(this._selectedElement); - // } - - /* - isItemSelected(item) { - if (this.props.selectedSuggestions.length > 0) { - for (let i = 0; i < this.props.selectedSuggestions.length; i++) { - if (this.props.selectedSuggestions[i].id === item.id) { - return true; - } - } - return false; - } - } - */ - - /* - itemClassNames(highlighted) { - return classNames('nfe-account-suggestions__item', {'nfe-account-suggestions__item--highlighted': highlighted}); - } - */ - render() { - const { suggestions, onSelect, @@ -39,28 +13,18 @@ export default class SuggestionList extends Component { renderNoSuggestion, onKeyDown } = this.props; - /* - const refIfIshighlightedItemIndex = index => component => { - if (highlightedItem === index) { - this._selectedElement = component; - if (this._selectedElement) { - this._selectedElement.focus(); - } - } - }; - */ return ( diff --git a/src/suggestion/suggestion-list.test.js b/src/suggestion/suggestion-list.test.js index d494c8b5f0..e4fca9e2b7 100644 --- a/src/suggestion/suggestion-list.test.js +++ b/src/suggestion/suggestion-list.test.js @@ -82,11 +82,6 @@ describe('', () => { assert.equal(wrapper.find('SuggestionList').length, 1); }); - it('should not render if no suggestions', () => { - const wrapper = shallowSuggestionListContainer({...propsSuggestionListContainer(), suggestions: []}); - assert.equal(wrapper.find('SuggestionList').length, 0); - }); - it('should increment highlightedIndex on keyboard.DOWN', () => { const wrapper = shallowSuggestionListContainer(); const spyPreventDefault = sinon.spy();