haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-10 03:11:07 +00:00
Code Issues Releases Wiki Activity

Move file by drag and drop (#3168)

Browse Source
This commit is contained in:
zxj96
2019-03-27 11:25:27 +08:00
committed by Daniel Pan
parent d6470889c9
commit 4a9cfe8a46
19 changed files with 5503 additions and 2272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/tree-view/tree-node-view.js
View File

@@ -19,6 +19,8 @@ const propTypes = {
onMenuItemClick: PropTypes.func,
registerHandlers: PropTypes.func,
unregisterHandlers: PropTypes.func,
onNodeDragMove: PropTypes.func,
onNodeDrop: PropTypes.func,
};
class TreeNodeView extends React.Component {
@@ -27,7 +29,8 @@ class TreeNodeView extends React.Component {
super(props);
this.state = {
isHighlight: false,
isShowOperationMenu: false
isShowOperationMenu: false,
isNodeDropShow: false,
};
}
@@ -68,6 +71,27 @@ class TreeNodeView extends React.Component {
this.props.onNodeDragStart(e, this.props.node);
}
onNodeDragEnter = (e) => {
if (this.props.node.object.type === 'dir') {
this.setState({isNodeDropShow: true});
}
this.props.onNodeDragEnter(e, this.props.node);
}
onNodeDragMove = (e) => {
this.props.onNodeDragMove(e);
}
onNodeDragLeave = (e) => {
this.setState({isNodeDropShow: false});
this.props.onNodeDragLeave(e, this.props.node);
}
onNodeDrop = (e) => {
this.setState({isNodeDropShow: false});
this.props.onNodeDrop(e, this.props.node);
}
onUnFreezedItem = () => {
this.setState({isShowOperationMenu: false});
this.props.onUnFreezedItem();
@@ -134,6 +158,11 @@ class TreeNodeView extends React.Component {
onNodeChanged={this.props.onNodeChanged}
registerHandlers={this.props.registerHandlers}
unregisterHandlers={this.props.unregisterHandlers}
onNodeDragStart={this.props.onNodeDragStart}
onNodeDragMove={this.props.onNodeDragMove}
onNodeDrop={this.props.onNodeDrop}
onNodeDragEnter={this.props.onNodeDragEnter}
onNodeDragLeave={this.props.onNodeDragLeave}
/>
);
})}
@@ -152,8 +181,8 @@ class TreeNodeView extends React.Component {
<div className="tree-node">
<div type={type} title={node.object.name}
onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''}`}>
<div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onClick={this.onNodeClick}>{node.object.name}</div>
className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''} ${this.state.isNodeDropShow ? 'tree-node-drop' : ''}`}>
<div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onClick={this.onNodeClick} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave} onDragOver={this.onNodeDragMove} onDrop={this.onNodeDrop}>{node.object.name}</div>
<div className="left-icon">
{type === 'dir' && (!node.isLoaded || (node.isLoaded && node.hasChildren())) && (
<i