PapaTutuWawa/Lateinicus
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Add autofocus to the search field

Browse Source
This commit is contained in:
Alexander Polynomdivision 2018-10-11 19:46:28 +02:00
parent feeb07c542
commit aba3626b7d
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/pages/vocab.tsx
View File

@ -9,7 +9,6 @@ import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
/* import DialogContentText from "@material-ui/core/DialogContentText"; */
import DialogActions from "@material-ui/core/DialogActions";
import SearchIcon from "@material-ui/icons/Search";
@ -35,8 +34,16 @@ interface IProps {
export default class VocabPage extends React.Component<IProps> {
// Internal counter for dynmic children
private uid = 0;
genUID = () => {
return `VOCABPAGE-${this.uid++}`;
// Mapping Vocab ID -> React Key
private uids: { [id: number]: string } = {};
// @vid: The vocabulary ID of the child
genUID = (vid: number) => {
if (!(vid in this.uids)) {
this.uids[vid] = `VOCABPAGE-${this.uid++}`;
}
return this.uids[vid];
}
componentDidMount() {
@ -79,7 +86,7 @@ export default class VocabPage extends React.Component<IProps> {
[VocabType.ADVERB]: "Adverb",
};
return <Paper key={this.genUID()} style={{ marginBottom: 12, padding: 12 }}>
return <Paper key={this.genUID(voc.id)} style={{ marginBottom: 12, padding: 12 }}>
<Typography gutterBottom variant="headline" component="h2">
{`${voc.latin.grundform} (${vocabTypeToStr[voc.type]})`}
</Typography>
@ -137,7 +144,10 @@ export default class VocabPage extends React.Component<IProps> {
helperText="Suche nach Vokabeln"
onKeyPress={onEnter}
value={this.props.searchTerm}
onChange={(event) => this.props.setSearchTerm(event.target.value)} />
onChange={(event) => this.props.setSearchTerm(event.target.value)}
inputProps={{
autoFocus: "autofocus",
}} />
</DialogContent>
<DialogActions>
<Button onClick={this.applySearchFilter} color="primary">