import React from 'react'; import PropTypes from 'prop-types'; import TreeNodeMenu from './tree-node-menu'; import { permission } from '../../utils/constants'; 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, onFreezedItem: PropTypes.func.isRequired, onUnFreezedItem: PropTypes.func.isRequired, onMenuItemClick: PropTypes.func, }; class TreeNodeView extends React.Component { constructor(props) { super(props); this.state = { isHighlight: false, isShowOperationMenu: false }; } onMouseEnter = () => { 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 = () => { 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); } onUnFreezedItem = () => { this.setState({isShowOperationMenu: false}); this.props.onUnFreezedItem(); } onMenuItemClick = (operation, node) => { this.props.onMenuItemClick(operation, node); } getNodeTypeAndIcon = () => { let { node } = this.props; let icon = ''; let type = ''; if (node.object.type === 'dir') { icon = ; type = 'dir'; } else { let index = node.object.name.lastIndexOf('.'); if (index === -1) { icon = ; type = 'file'; } else { let suffix = node.object.name.slice(index).toLowerCase(); if (suffix === '.png' || suffix === '.jpg' || suffix === '.jpeg' || suffix === '.gif' || suffix === '.bmp') { icon = ; type = 'image'; } else if (suffix === '.md' || suffix === '.markdown') { icon = ; type = 'file'; } else { icon = ; type = 'file'; } } } return {icon, type}; } renderChildren = () => { let { node, paddingLeft } = this.props; if (!node.hasChildren()) { return ''; } return (