Fix multiple file options showing up (#987) (#988)

* Fix multiple file options showing up (#987)

This change ensures that the file options composite widget is
hidden if and only if none of its components is in focus. This
is achieved by having a variable keep track of the state of
the composite widget (in focus / not in focus).

* Fix #987

Modified fix for #987 according to the requested changes.
Moved isFocused to the components state and created a method
for hadling the function calls executed in onBlur.

* Fix #987 - final touches

Renamed method blurComponent to onBlurComponent. Moved duplicated
code from onFocus callback to a new method called onFocusComponent.
This commit is contained in:
Marton Soos 2019-03-27 20:52:57 +01:00 committed by Cassie Tarakajian
parent 9433d188fc
commit 3bf3fe1452
2 changed files with 52 additions and 4 deletions

View file

@ -24,13 +24,29 @@ export class FileNode extends React.Component {
this.hideFileOptions = this.hideFileOptions.bind(this);
this.showEditFileName = this.showEditFileName.bind(this);
this.hideEditFileName = this.hideEditFileName.bind(this);
this.onBlurComponent = this.onBlurComponent.bind(this);
this.onFocusComponent = this.onFocusComponent.bind(this);
this.state = {
isOptionsOpen: false,
isEditingName: false,
isFocused: false,
};
}
onFocusComponent() {
this.setState({ isFocused: true });
}
onBlurComponent() {
this.setState({ isFocused: false });
setTimeout(() => {
if (!this.state.isFocused) {
this.hideFileOptions();
}
}, 200);
}
handleFileClick(e) {
e.stopPropagation();
if (this.props.name !== 'root' && !this.isDeleting) {
@ -105,6 +121,7 @@ export class FileNode extends React.Component {
'sidebar__file-item--editing': this.state.isEditingName,
'sidebar__file-item--closed': this.props.isFolderClosed
});
return (
<div className={itemClass}>
{(() => { // eslint-disable-line
@ -156,6 +173,8 @@ export class FileNode extends React.Component {
ref={(element) => { this[`fileOptions-${this.props.id}`] = element; }}
tabIndex="0"
onClick={this.toggleFileOptions}
onBlur={this.onBlurComponent}
onFocus={this.onFocusComponent}
>
<InlineSVG src={downArrowUrl} />
</button>
@ -171,6 +190,8 @@ export class FileNode extends React.Component {
this.props.newFile();
setTimeout(() => this.hideFileOptions(), 0);
}}
onBlur={this.onBlurComponent}
onFocus={this.onFocusComponent}
className="sidebar__file-item-option"
>
Add File
@ -189,6 +210,8 @@ export class FileNode extends React.Component {
this.props.newFolder();
setTimeout(() => this.hideFileOptions(), 0);
}}
onBlur={this.onBlurComponent}
onFocus={this.onFocusComponent}
className="sidebar__file-item-option"
>
Add Folder
@ -205,6 +228,8 @@ export class FileNode extends React.Component {
setTimeout(() => this.fileNameInput.focus(), 0);
setTimeout(() => this.hideFileOptions(), 0);
}}
onBlur={this.onBlurComponent}
onFocus={this.onFocusComponent}
className="sidebar__file-item-option"
>
Rename
@ -219,9 +244,8 @@ export class FileNode extends React.Component {
setTimeout(() => this.props.deleteFile(this.props.id, this.props.parentId), 100);
}
}}
onBlur={() => {
setTimeout(this.hideFileOptions, 200);
}}
onBlur={this.onBlurComponent}
onFocus={this.onFocusComponent}
className="sidebar__file-item-option"
>
Delete

View file

@ -12,6 +12,25 @@ class Sidebar extends React.Component {
super(props);
this.resetSelectedFile = this.resetSelectedFile.bind(this);
this.toggleProjectOptions = this.toggleProjectOptions.bind(this);
this.onBlurComponent = this.onBlurComponent.bind(this);
this.onFocusComponent = this.onFocusComponent.bind(this);
this.state = {
isFocused: false,
};
}
onBlurComponent() {
this.setState({ isFocused: false });
setTimeout(() => {
if (!this.state.isFocused) {
this.props.closeProjectOptions();
}
}, 200);
}
onFocusComponent() {
this.setState({ isFocused: true });
}
resetSelectedFile() {
@ -65,6 +84,8 @@ class Sidebar extends React.Component {
tabIndex="0"
ref={(element) => { this.sidebarOptions = element; }}
onClick={this.toggleProjectOptions}
onBlur={this.onBlurComponent}
onFocus={this.onFocusComponent}
>
<InlineSVG src={downArrowUrl} />
</button>
@ -76,6 +97,8 @@ class Sidebar extends React.Component {
this.props.newFolder();
setTimeout(this.props.closeProjectOptions, 0);
}}
onBlur={this.onBlurComponent}
onFocus={this.onFocusComponent}
>
Add folder
</button>
@ -87,7 +110,8 @@ class Sidebar extends React.Component {
this.props.newFile();
setTimeout(this.props.closeProjectOptions, 0);
}}
onBlur={() => { setTimeout(this.props.closeProjectOptions, 200); }}
onBlur={this.onBlurComponent}
onFocus={this.onFocusComponent}
>
Add file
</button>