mirror of
https://github.com/mickael-kerjean/filestash
synced 2025-12-06 16:32:31 +01:00
feature (links): leverage default browser navigation and behavior for links #27,#26
This commit is contained in:
parent
c9c4ee1639
commit
d88c845a06
2 changed files with 33 additions and 30 deletions
|
|
@ -55,34 +55,39 @@ export class FilesPage extends React.Component {
|
||||||
if(this.observers.ls) this.observers.ls.unsubscribe();
|
if(this.observers.ls) this.observers.ls.unsubscribe();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps){
|
||||||
|
let new_path = function(path){
|
||||||
|
if(path === undefined){ path = "/"; }
|
||||||
|
if(/\/$/.test(path) === false){ path = path + "/"; }
|
||||||
|
if(/^\//.test(path) === false){ path = "/"+ path; }
|
||||||
|
return path;
|
||||||
|
}(nextProps.match.params.path);
|
||||||
|
if(new_path !== this.state.path){
|
||||||
|
this.setState({path: new_path, loading: true});
|
||||||
|
this.onRefresh(new_path);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
hideError(){
|
hideError(){
|
||||||
this.setState({error: false});
|
this.setState({error: false});
|
||||||
}
|
}
|
||||||
|
|
||||||
onRefresh(path = this.state.path){
|
onRefresh(path = this.state.path){
|
||||||
|
this.resetHeight();
|
||||||
if(this.observers.ls) this.observers.ls.unsubscribe();
|
if(this.observers.ls) this.observers.ls.unsubscribe();
|
||||||
this.observers.ls = Files.ls(path).subscribe((files) => {
|
this.observers.ls = Files.ls(path).subscribe((files) => {
|
||||||
this.setState({files: files, loading: false})
|
files = files.map((file) => {
|
||||||
|
let path = this.state.path+file.name;
|
||||||
|
file.link = file.type === "file" ? "/view"+path : "/files"+path+"/";
|
||||||
|
return file;
|
||||||
|
});
|
||||||
|
this.setState({files: files, loading: false});
|
||||||
}, (error) => {
|
}, (error) => {
|
||||||
console.log("ERROR", error);
|
|
||||||
this.setState({error: error});
|
this.setState({error: error});
|
||||||
});
|
});
|
||||||
this.setState({error: false});
|
this.setState({error: false});
|
||||||
}
|
}
|
||||||
|
|
||||||
onPathUpdate(path, type = 'directory'){
|
|
||||||
window.timestamp = new Date();
|
|
||||||
if(type === 'file'){
|
|
||||||
this.props.history.push('/view'+path);
|
|
||||||
}else{
|
|
||||||
this.setState({path: path, loading: true});
|
|
||||||
this.onRefresh(path)
|
|
||||||
if(path !== this.state.path){
|
|
||||||
this.props.history.push('/files'+path);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onCreate(path, type, file){
|
onCreate(path, type, file){
|
||||||
if(type === 'file'){
|
if(type === 'file'){
|
||||||
return Files.touch(path, file);
|
return Files.touch(path, file);
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
import { DragSource, DropTarget } from 'react-dnd';
|
import { DragSource, DropTarget } from 'react-dnd';
|
||||||
|
|
||||||
import './thing.scss';
|
import './thing.scss';
|
||||||
import { Card, NgIf, Icon, EventEmitter, Prompt } from '../../components/';
|
import { Card, NgIf, Icon, EventEmitter } from '../../components/';
|
||||||
import { pathBuilder } from '../../helpers/';
|
import { pathBuilder, prompt } from '../../helpers/';
|
||||||
|
|
||||||
const fileSource = {
|
const fileSource = {
|
||||||
beginDrag(props, monitor, component) {
|
beginDrag(props, monitor, component) {
|
||||||
|
|
@ -146,19 +147,16 @@ export class ExistingThing extends React.Component {
|
||||||
|
|
||||||
return connectDragSource(connectDropNativeFile(connectDropFile(
|
return connectDragSource(connectDropNativeFile(connectDropFile(
|
||||||
<div className="component_thing">
|
<div className="component_thing">
|
||||||
<Card className={this.state.hover} onClick={this.onSelect.bind(this)} onMouseEnter={() => this.setState({hover: true})} onMouseLeave={() => this.setState({hover: false})} className={className}>
|
<Link to={this.props.file.link}>
|
||||||
<DateTime show={this.state.hover !== true || this.state.icon === 'loading'} timestamp={this.props.file.time} />
|
<Card className={this.state.hover} onClick={this.onSelect.bind(this)} onMouseEnter={() => this.setState({hover: true})} onMouseLeave={() => this.setState({hover: false})} className={className}>
|
||||||
<Updater filename={this.props.file.name}
|
<Icon name={this.props.file.icon || this.props.file.type} />
|
||||||
icon={this.props.file.icon || this.props.file.type}
|
<Filename filename={this.props.file.name} onRename={this.onRename.bind(this)} is_renaming={this.state.is_renaming} />
|
||||||
can_move={this.props.file.can_move !== false}
|
<FileSize type={this.props.file.type} size={this.props.file.size} />
|
||||||
can_delete={this.props.file.can_delete !== false}
|
<Message message={this.state.message} />
|
||||||
show={this.state.hover === true && this.state.icon !== 'loading' && !('ontouchstart' in window)}
|
<DateTime show={this.state.icon !== 'loading'} timestamp={this.props.file.time} />
|
||||||
onRename={this.onRename.bind(this)}
|
<ActionButton onClickRename={this.onRenameRequest.bind(this)} onClickDelete={this.onDeleteRequest.bind(this)} can_move={this.props.file.can_move !== false} can_delete={this.props.file.can_delete !== false} />
|
||||||
onDelete={this.onDeleteRequest.bind(this)} />
|
</Card>
|
||||||
<FileSize type={this.props.file.type} size={this.props.file.size} />
|
</Link>
|
||||||
<Message message={this.state.message} />
|
|
||||||
</Card>
|
|
||||||
<Prompt appear={this.state.delete_request} error={this.state.delete_error} message={this.state.delete_message} onCancel={this.onDeleteCancel.bind(this)} onSubmit={this.onDeleteConfirm.bind(this)}/>
|
|
||||||
</div>
|
</div>
|
||||||
)));
|
)));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue