mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-06-21 06:57:30 +02:00
Code Issues Releases Wiki Activity

saveditempane: fix filtering and autofocus

Browse Source
This commit is contained in:
Kushagra Gour
2019-03-18 15:45:48 +05:30
parent 95ff5c5fe2
commit 351905e44d
2 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/SavedItemPane.jsx
View File

@ -9,7 +9,7 @@ import { ItemTile } from './ItemTile';
export default class SavedItemPane extends Component { export default class SavedItemPane extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.items = []; // this.items = [];
} }
static getDerivedStateFromProps({ items = {} }, state) { static getDerivedStateFromProps({ items = {} }, state) {
@ -18,20 +18,28 @@ export default class SavedItemPane extends Component {
return b.updatedOn - a.updatedOn; return b.updatedOn - a.updatedOn;
}); });
return { return {
items: newItems, items: newItems
filteredItems: newItems
}; };
} }
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps, nextState) {
return ( return (
nextProps.items !== this.props.items || nextProps.items !== this.props.items ||
nextProps.isOpen !== this.props.isOpen nextProps.isOpen !== this.props.isOpen ||
nextState.filteredItems !== this.state.filteredItems
); );
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
// Opening
if (this.props.isOpen && !prevProps.isOpen) { if (this.props.isOpen && !prevProps.isOpen) {
window.searchInput.value = ''; window.searchInput.value = '';
window.searchInput.focus();
}
// Closing
if (!this.props.isOpen && prevProps.isOpen) {
this.setState({
filteredItems: undefined
});
} }
} }
onCloseIntent() { onCloseIntent() {
@ -129,11 +137,11 @@ export default class SavedItemPane extends Component {
const text = e.target.value; const text = e.target.value;
if (!text) { if (!text) {
this.setState({ this.setState({
filteredItems: this.items filteredItems: this.state.items
}); });
} else { } else {
this.setState({ this.setState({
filteredItems: this.items.filter( filteredItems: this.state.items.filter(
item => item.title.toLowerCase().indexOf(text) !== -1 item => item.title.toLowerCase().indexOf(text) !== -1
) )
}); });
@ -143,7 +151,7 @@ export default class SavedItemPane extends Component {
render( render(
{ isOpen, exportBtnClickHandler }, { isOpen, exportBtnClickHandler },
{ filteredItems = [], items = [] } { filteredItems = this.state.items, items = [] }
) { ) {
return ( return (
<div <div
@ -181,6 +189,7 @@ export default class SavedItemPane extends Component {
</div> </div>
</div> </div>
<input <input
autocomplete="off"
type="search" type="search"
id="searchInput" id="searchInput"
class="search-input" class="search-input"

5
src/components/app.jsx
View File

@ -450,11 +450,6 @@ export default class App extends Component {
shouldOpen === undefined ? !this.state.isSavedItemPaneOpen : shouldOpen shouldOpen === undefined ? !this.state.isSavedItemPaneOpen : shouldOpen
}); });
if (this.state.isSavedItemPaneOpen) {
window.searchInput.focus();
} else {
window.searchInput.value = '';
}
document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove']( document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove'](
'overlay-visible' 'overlay-visible'
); );