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