This repository has been archived by the owner on Feb 14, 2022. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement auto-complete for hero select (#94)
* Added naive impl of mui-downshift for hero select * Implemented styling for search to match in toolbar * Fixed bug when clearing hero autocomplete * Fixed default selected hero displaying correctly * Moved generic downshift code to standard AutoComplete component * Removed a lost console log * Added noop scrollIntoView to fix AutoComplete scrolling bug * Filter items if there is a default * Fixed broken noop test o.O * Temporary downgrade of nodejs to fix bug in 11.11 See jestjs/jest#8069
- Loading branch information
Showing
10 changed files
with
144 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| language: node_js | ||
| node_js: | ||
| - "node" | ||
| - "11.10.1" | ||
| cache: | ||
| yarn: true | ||
| directories: | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import App from './App'; | ||
|
|
||
| it('renders without crashing', () => {}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import React from 'react'; | ||
| import {Component} from 'react'; | ||
| import MuiDownshift from 'mui-downshift'; | ||
|
|
||
| class AutoComplete extends Component { | ||
| static defaultProps = { | ||
| items: [], | ||
| }; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| const {defaultSelectedItem} = props; | ||
| this.state = { | ||
| filteredItems: defaultSelectedItem | ||
| ? this.filterItems(defaultSelectedItem.label) | ||
| : this.props.items, | ||
| }; | ||
| } | ||
|
|
||
| filterItems = filter => | ||
| this.props.items.filter(item => item.label.toLowerCase().includes(filter.toLowerCase())); | ||
|
|
||
| handleStateChange = changes => { | ||
| if (typeof changes.inputValue === 'string') { | ||
| this.setState({filteredItems: this.filterItems(changes.inputValue)}); | ||
| } | ||
| if (this.input && this.props.blurOnSelect) { | ||
| this.input.blur(); | ||
| } | ||
| }; | ||
|
|
||
| render() { | ||
| const {items, ...props} = this.props; | ||
| const {filteredItems} = this.state; | ||
| return ( | ||
| <MuiDownshift | ||
| scrollIntoView={() => {}} // workaround for bug causing entire page to scroll | ||
| items={filteredItems} | ||
| onStateChange={this.handleStateChange} | ||
| getListItemKey={index => filteredItems[index].value} | ||
| {...props} | ||
| inputRef={node => { | ||
| this.input = node; | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default AutoComplete; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import AutoComplete from './AutoComplete'; | ||
|
|
||
| export default AutoComplete; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import {connect} from 'react-redux'; | ||
| import AutoComplete from '../../../core/components/AutoComplete'; | ||
| import getHeroes from '../../../core/selectors/getHeroes'; | ||
|
|
||
| const mapState = state => ({ | ||
| items: getHeroes(state).map(hero => ({ | ||
| label: hero.name, | ||
| value: hero._id, | ||
| })), | ||
| }); | ||
|
|
||
| export default connect(mapState)(AutoComplete); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,7 +27,6 @@ export default createSelector( | |
| } | ||
| }); | ||
|
|
||
| console.log(completedSets); | ||
| return completedSets; | ||
| } | ||
| ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters