Skip to content

Commit

Permalink
Move context menu logic into a separate class
Browse files Browse the repository at this point in the history
  • Loading branch information
@juanlao7
juanlao7 committed Jan 20, 2021
1 parent 53a1048 commit 0972801
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 105 deletions.
132 changes: 132 additions & 0 deletions client/apps/remolacha.Files/src/ContextMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import React from 'react';
import { Menu, MenuItem, Divider } from '@material-ui/core';
import { Files } from './Files';

declare var remolacha : any; // TODO: https://github.com/juanlao7/remolacha/issues/1

interface ContextMenuProps {
open : boolean;
x : number;
y : number;
elements : Array<any>;
selected : Map<string, number>;
files : Files;
onClose? : () => void;
}

interface ContextMenuState {
}

export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuState> {
constructor(props : ContextMenuProps) {
super(props);
this.state = {};
}

private onNewFileMenuItemClick() {
this.props.onClose();
}

private onOpenFileMenuItemClick() {
this.props.onClose();
const name = this.props.selected.keys().next().value;
const element = this.props.files.getElementByName(name);

if (element.type == 'd') {
this.props.files.readDirectory(this.props.files.resolvePath(name), true);
}
else {
// TODO: open with text editor.
}
}

private onOpenInNewWindowMenuItemClick() {
this.props.onClose();
const path = this.props.files.resolvePath(this.props.selected.keys().next().value);
remolacha.Environment.getInstance().openApp('remolacha.Files', new Map([['cwd', path]]));
}

private onOpenTerminalMenuItemClick() {
this.props.onClose();
remolacha.Environment.getInstance().openApp('remolacha.Terminal', new Map([['cwd', this.props.files.getCurrentPath()]]));
}

render() {
return (
<Menu
anchorReference="anchorPosition"
anchorPosition={(this.props.x != null) ? {
left: this.props.x,
top: this.props.y
} : undefined}
keepMounted
open={this.props.open && this.props.x != null}
onClose={() => this.props.onClose && this.props.onClose()}
>
{this.props.selected.size == 0 &&
<MenuItem onClick={() => this.onNewFileMenuItemClick()}>
New file
</MenuItem>}

{this.props.selected.size == 0 &&
<MenuItem>
New directory
</MenuItem>}

{this.props.selected.size == 1 &&
<MenuItem onClick={() => this.onOpenFileMenuItemClick()}>
Open
</MenuItem>}

{(this.props.selected.size == 1 && this.props.files.getElementByName(this.props.selected.keys().next().value).type == 'd') &&
<MenuItem onClick={() => this.onOpenInNewWindowMenuItemClick()}>
Open in new window
</MenuItem>}

{this.props.selected.size > 1 &&
<MenuItem>
Open all selected
</MenuItem>}

{(this.props.selected.size > 0 || true) &&
<Divider className="remolacha_dividerWithMargin" />}

{this.props.selected.size > 0 &&
<MenuItem>
Cut
</MenuItem>}

{this.props.selected.size > 0 &&
<MenuItem>
Copy
</MenuItem>}

{(this.props.selected.size == 0 && true) &&
<MenuItem>
Paste
</MenuItem>}

{this.props.selected.size > 0 &&
<Divider className="remolacha_dividerWithMargin" />}

{this.props.selected.size > 0 &&
<MenuItem>
Delete
</MenuItem>}

{this.props.selected.size == 1 &&
<MenuItem>
Rename
</MenuItem>}

{this.props.selected.size == 0 &&
<Divider className="remolacha_dividerWithMargin" />}

{this.props.selected.size == 0 &&
<MenuItem onClick={() => this.onOpenTerminalMenuItemClick()}>
Open Terminal here
</MenuItem>}
</Menu>
);
}
}
122 changes: 17 additions & 105 deletions client/apps/remolacha.Files/src/Files.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { ThemeProvider, AppBar, Toolbar, IconButton, Icon, InputBase, Typography
import prettyBytes from 'pretty-bytes';
import { DateTime } from 'luxon';
import { TypeTools } from 'remolacha-commons';
import { ContextMenu } from './ContextMenu';

declare var remolacha : any; // TODO: https://github.com/juanlao7/remolacha/issues/1

Expand Down Expand Up @@ -102,7 +103,7 @@ export class Files extends React.Component<FilesProps, FilesState> {
private connection : any;
private dataTable : any;

constructor(props: FilesProps) {
constructor(props : FilesProps) {
super(props);
this.connection = null;
this.dataTable = null;
Expand Down Expand Up @@ -135,7 +136,11 @@ export class Files extends React.Component<FilesProps, FilesState> {
return [absolutePath.split(separator), separator];
}

private resolvePath(relativePath : string) {
getCurrentPath() : string {
return this.state.currentPath;
}

resolvePath(relativePath : string) {
const [parts, separator] = this.splitPath(this.state.currentPath);

if (parts[parts.length - 1].length == 0) {
Expand All @@ -149,7 +154,7 @@ export class Files extends React.Component<FilesProps, FilesState> {
return parts.join(separator);
}

private readDirectory(directoryPath : string, deleteNextPaths : boolean, input : HTMLInputElement = null) {
readDirectory(directoryPath : string, deleteNextPaths : boolean, input : HTMLInputElement = null) {
if (this.connection != null) {
this.connection.close();
}
Expand Down Expand Up @@ -254,7 +259,7 @@ export class Files extends React.Component<FilesProps, FilesState> {
});
}

private getElementByName(name : string) : any {
getElementByName(name : string) : any {
// TODO: store elements in a Map for reducing the complexity of this method from linear to constant.

for (const element of this.state.elements) {
Expand Down Expand Up @@ -385,34 +390,6 @@ export class Files extends React.Component<FilesProps, FilesState> {
this.closeContextMenu();
}

private onNewFileMenuItemClick() {
this.closeContextMenu();
}

private onOpenFileMenuItemClick() {
this.closeContextMenu();
const name = this.state.selected.keys().next().value;
const element = this.getElementByName(name);

if (element.type == 'd') {
this.readDirectory(this.resolvePath(name), true);
}
else {
// TODO: open with text editor.
}
}

private onOpenInNewWindowMenuItemClick() {
this.closeContextMenu();
const path = this.resolvePath(this.state.selected.keys().next().value);
remolacha.Environment.getInstance().openApp('remolacha.Files', new Map([['cwd', path]]));
}

private onOpenTerminalMenuItemClick() {
this.closeContextMenu();
remolacha.Environment.getInstance().openApp('remolacha.Terminal', new Map([['cwd', this.state.currentPath]]));
}

componentDidMount() {
const path : string = this.props.params.get('cwd');
this.readDirectory((TypeTools.isString(path)) ? path : null, false);
Expand Down Expand Up @@ -539,80 +516,15 @@ export class Files extends React.Component<FilesProps, FilesState> {
ref={(x : any) => this.dataTable = x}
/>

<Menu
anchorReference="anchorPosition"
anchorPosition={(this.state.contextMenuMouseX != null) ? {
left: this.state.contextMenuMouseX,
top: this.state.contextMenuMouseY
} : undefined}
keepMounted
open={this.state.currentPathIsValid && this.state.contextMenuMouseX != null}
<ContextMenu
open={this.state.currentPathIsValid}
x={this.state.contextMenuMouseX}
y={this.state.contextMenuMouseY}
elements={this.state.elements}
selected={this.state.selected}
files={this}
onClose={() => this.onContextMenuClose()}
>
{this.state.selected.size == 0 &&
<MenuItem onClick={() => this.onNewFileMenuItemClick()}>
New file
</MenuItem>}

{this.state.selected.size == 0 &&
<MenuItem>
New directory
</MenuItem>}

{this.state.selected.size == 1 &&
<MenuItem onClick={() => this.onOpenFileMenuItemClick()}>
Open
</MenuItem>}

{(this.state.selected.size == 1 && this.getElementByName(this.state.selected.keys().next().value).type == 'd') &&
<MenuItem onClick={() => this.onOpenInNewWindowMenuItemClick()}>
Open in new window
</MenuItem>}

{this.state.selected.size > 1 &&
<MenuItem>
Open all selected
</MenuItem>}

{(this.state.selected.size > 0 || true) &&
<Divider className="remolacha_dividerWithMargin" />}

{this.state.selected.size > 0 &&
<MenuItem>
Cut
</MenuItem>}

{this.state.selected.size > 0 &&
<MenuItem>
Copy
</MenuItem>}

{(this.state.selected.size == 0 && true) &&
<MenuItem>
Paste
</MenuItem>}

{this.state.selected.size > 0 &&
<Divider className="remolacha_dividerWithMargin" />}

{this.state.selected.size > 0 &&
<MenuItem>
Delete
</MenuItem>}

{this.state.selected.size == 1 &&
<MenuItem>
Rename
</MenuItem>}

{this.state.selected.size == 0 &&
<Divider className="remolacha_dividerWithMargin" />}

{this.state.selected.size == 0 &&
<MenuItem onClick={() => this.onOpenTerminalMenuItemClick()}>
Open Terminal here
</MenuItem>}
</Menu>
/>
</div>

<AppBar className="remolacha_app_Files_statusBar" position="static">
Expand Down

0 comments on commit 0972801

Please sign in to comment.