pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

Autofocus search input in VizTypeControl modal onEnter (#2929)

Browse Source
This commit is contained in:
Andrew Pariser 2017-07-28 14:57:24 -07:00 committed by Maxime Beauchemin
parent b58cfbcb91
commit 58a704b84c
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
superset/assets/javascripts/explore/components/controls/VizTypeControl.jsx
View File

@ -25,17 +25,27 @@ export default class VizTypeControl extends React.PureComponent {
}; };
this.toggleModal = this.toggleModal.bind(this); this.toggleModal = this.toggleModal.bind(this);
this.changeSearch = this.changeSearch.bind(this); this.changeSearch = this.changeSearch.bind(this);
this.setSearchRef = this.setSearchRef.bind(this);
this.focusSearch = this.focusSearch.bind(this);
} }
onChange(vizType) { onChange(vizType) {
this.props.onChange(vizType); this.props.onChange(vizType);
this.setState({ showModal: false }); this.setState({ showModal: false });
} }
setSearchRef(searchRef) {
this.searchRef = searchRef;
}
toggleModal() { toggleModal() {
this.setState({ showModal: !this.state.showModal }); this.setState({ showModal: !this.state.showModal });
} }
changeSearch(event) { changeSearch(event) {
this.setState({ filter: event.target.value }); this.setState({ filter: event.target.value });
} }
focusSearch() {
if (this.searchRef) {
this.searchRef.focus();
}
}
renderVizType(vizType) { renderVizType(vizType) {
const vt = vizType; const vt = vizType;
return ( return (
@ -82,7 +92,13 @@ export default class VizTypeControl extends React.PureComponent {
<Label onClick={this.toggleModal} style={{ cursor: 'pointer' }}> <Label onClick={this.toggleModal} style={{ cursor: 'pointer' }}>
{visTypes[this.props.value].label} {visTypes[this.props.value].label}
</Label> </Label>
<Modal show={this.state.showModal} onHide={this.toggleModal} bsSize="lg"> <Modal
show={this.state.showModal}
onHide={this.toggleModal}
onEnter={this.focusSearch}
onExit={this.setSearchRef}
bsSize="lg"
>
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title>Select a visualization type</Modal.Title> <Modal.Title>Select a visualization type</Modal.Title>
</Modal.Header> </Modal.Header>
@ -90,6 +106,7 @@ export default class VizTypeControl extends React.PureComponent {
<div> <div>
<FormControl <FormControl
id="formControlsText" id="formControlsText"
inputRef={(ref) => { this.setSearchRef(ref); }}
type="text" type="text"
bsSize="sm" bsSize="sm"
value={this.state.filter} value={this.state.filter}