mirror of
https://github.com/haiwen/seahub.git
synced 2025-07-17 16:52:09 +00:00
* Open the edit page when the content is not empty * Use size instead of content * change func name * Replace getMarkdownSize with showColumnMarkdownFile
272 lines
8.0 KiB
JavaScript
272 lines
8.0 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { permission } from '../../utils/constants';
|
|
import TextTranslation from '../../utils/text-translation';
|
|
import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
|
|
|
|
const propTypes = {
|
|
repoPermission: PropTypes.bool,
|
|
node: PropTypes.object.isRequired,
|
|
currentPath: PropTypes.string.isRequired,
|
|
paddingLeft: PropTypes.number.isRequired,
|
|
isNodeMenuShow: PropTypes.bool.isRequired,
|
|
isItemFreezed: PropTypes.bool.isRequired,
|
|
onNodeClick: PropTypes.func.isRequired,
|
|
onNodeExpanded: PropTypes.func.isRequired,
|
|
onNodeCollapse: PropTypes.func.isRequired,
|
|
onNodeDragStart: PropTypes.func.isRequired,
|
|
freezeItem: PropTypes.func.isRequired,
|
|
unfreezeItem: PropTypes.func.isRequired,
|
|
onMenuItemClick: PropTypes.func,
|
|
onNodeDragMove: PropTypes.func,
|
|
onNodeDrop: PropTypes.func,
|
|
handleContextClick: PropTypes.func.isRequired,
|
|
onNodeDragEnter: PropTypes.func.isRequired,
|
|
onNodeDragLeave:PropTypes.func.isRequired,
|
|
};
|
|
|
|
class TreeNodeView extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
isHighlight: false,
|
|
isShowOperationMenu: false,
|
|
isNodeDropShow: false,
|
|
};
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (!nextProps.isItemFreezed) {
|
|
this.setState({
|
|
isShowOperationMenu: false,
|
|
isHighlight: false,
|
|
});
|
|
}
|
|
}
|
|
|
|
onMouseEnter = () => {
|
|
if (!this.props.isItemFreezed) {
|
|
this.setState({
|
|
isShowOperationMenu: true,
|
|
isHighlight: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
onMouseOver = () => {
|
|
if (!this.props.isItemFreezed) {
|
|
this.setState({
|
|
isShowOperationMenu: true,
|
|
isHighlight: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
onMouseLeave = () => {
|
|
if (!this.props.isItemFreezed) {
|
|
this.setState({
|
|
isShowOperationMenu: false,
|
|
isHighlight: false,
|
|
});
|
|
}
|
|
}
|
|
|
|
onNodeClick = () => {
|
|
this.props.onNodeClick(this.props.node);
|
|
}
|
|
|
|
onLoadToggle = (e) => {
|
|
e.stopPropagation();
|
|
let { node } = this.props;
|
|
if (node.isExpanded) {
|
|
this.props.onNodeCollapse(node);
|
|
} else {
|
|
this.props.onNodeExpanded(node);
|
|
}
|
|
}
|
|
|
|
onNodeDragStart = (e) => {
|
|
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) => {
|
|
e.stopPropagation();
|
|
this.setState({isNodeDropShow: false});
|
|
this.props.onNodeDrop(e, this.props.node);
|
|
}
|
|
|
|
unfreezeItem = () => {
|
|
this.setState({isShowOperationMenu: false});
|
|
this.props.unfreezeItem();
|
|
}
|
|
|
|
onMenuItemClick = (operation, event, node) => {
|
|
this.props.onMenuItemClick(operation, node);
|
|
}
|
|
|
|
onItemMouseDown = (event) => {
|
|
event.stopPropagation();
|
|
if (event.button === 2) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
onItemContextMenu = (event) => {
|
|
this.handleContextClick(event);
|
|
}
|
|
|
|
handleContextClick = (event) => {
|
|
this.props.handleContextClick(event, this.props.node);
|
|
this.setState({isShowOperationMenu: false});
|
|
}
|
|
|
|
getNodeTypeAndIcon = () => {
|
|
let { node } = this.props;
|
|
let icon = '';
|
|
let type = '';
|
|
if (node.object.type === 'dir') {
|
|
icon = <i className="far fa-folder"></i>;
|
|
type = 'dir';
|
|
} else {
|
|
let index = node.object.name.lastIndexOf('.');
|
|
if (index === -1) {
|
|
icon = <i className="far fa-file"></i>;
|
|
type = 'file';
|
|
} else {
|
|
let suffix = node.object.name.slice(index).toLowerCase();
|
|
if (suffix === '.png' || suffix === '.jpg' || suffix === '.jpeg' || suffix === '.gif' || suffix === '.bmp') {
|
|
icon = <i className="far fa-image"></i>;
|
|
type = 'image';
|
|
}
|
|
else if (suffix === '.md' || suffix === '.markdown') {
|
|
icon = <i className="far fa-file-alt"></i>;
|
|
type = 'file';
|
|
}
|
|
else {
|
|
icon = <i className="far fa-file"></i>;
|
|
type = 'file';
|
|
}
|
|
}
|
|
}
|
|
return {icon, type};
|
|
}
|
|
|
|
caculateMenuList(node) {
|
|
let { NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE, OPEN_VIA_CLIENT} = TextTranslation;
|
|
|
|
if (node.object.type === 'dir') {
|
|
return [NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE];
|
|
}
|
|
|
|
return [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
|
|
}
|
|
|
|
renderChildren = () => {
|
|
let { node, paddingLeft } = this.props;
|
|
if (!node.hasChildren()) {
|
|
return '';
|
|
}
|
|
return (
|
|
<div className="children" style={{paddingLeft: paddingLeft}}>
|
|
{node.children.map(item => {
|
|
return (
|
|
<TreeNodeView
|
|
key={item.path}
|
|
node={item}
|
|
paddingLeft={paddingLeft}
|
|
repoPermission={this.props.repoPermission}
|
|
currentPath={this.props.currentPath}
|
|
isNodeMenuShow={this.props.isNodeMenuShow}
|
|
isItemFreezed={this.props.isItemFreezed}
|
|
onNodeClick={this.props.onNodeClick}
|
|
onNodeCollapse={this.props.onNodeCollapse}
|
|
onNodeExpanded={this.props.onNodeExpanded}
|
|
freezeItem={this.props.freezeItem}
|
|
onMenuItemClick={this.props.onMenuItemClick}
|
|
unfreezeItem={this.unfreezeItem}
|
|
onNodeDragStart={this.props.onNodeDragStart}
|
|
onNodeDragMove={this.props.onNodeDragMove}
|
|
onNodeDrop={this.props.onNodeDrop}
|
|
onNodeDragEnter={this.props.onNodeDragEnter}
|
|
onNodeDragLeave={this.props.onNodeDragLeave}
|
|
handleContextClick={this.props.handleContextClick}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
let { currentPath, node, isNodeMenuShow } = this.props;
|
|
let { type, icon } = this.getNodeTypeAndIcon();
|
|
let hlClass = this.state.isHighlight ? 'tree-node-inner-hover ' : '';
|
|
if (node.path === currentPath) {
|
|
hlClass = 'tree-node-hight-light';
|
|
}
|
|
return (
|
|
<div className="tree-node">
|
|
<div
|
|
type={type}
|
|
className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''} ${this.state.isNodeDropShow ? 'tree-node-drop' : ''}`}
|
|
title={node.object.name}
|
|
onMouseEnter={this.onMouseEnter}
|
|
onMouseOver={this.onMouseOver}
|
|
onMouseLeave={this.onMouseLeave}
|
|
onMouseDown={this.onItemMouseDown}
|
|
onContextMenu={this.onItemContextMenu}
|
|
onClick={this.onNodeClick}
|
|
>
|
|
<div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} 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
|
|
className={`folder-toggle-icon fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`}
|
|
onMouseDown={e => e.stopPropagation()}
|
|
onClick={this.onLoadToggle}
|
|
></i>
|
|
)}
|
|
<i className="tree-node-icon">{icon}</i>
|
|
</div>
|
|
{isNodeMenuShow && (
|
|
<div className="right-icon">
|
|
{((this.props.repoPermission || permission) && this.state.isShowOperationMenu) && (
|
|
<ItemDropdownMenu
|
|
item={this.props.node}
|
|
toggleClass={'fas fa-ellipsis-v'}
|
|
getMenuList={this.caculateMenuList}
|
|
onMenuItemClick={this.onMenuItemClick}
|
|
freezeItem={this.props.freezeItem}
|
|
unfreezeItem={this.unfreezeItem}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{node.isExpanded && this.renderChildren()}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
TreeNodeView.propTypes = propTypes;
|
|
|
|
export default TreeNodeView;
|