* 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:
parent
9433d188fc
commit
3bf3fe1452
2 changed files with 52 additions and 4 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue