import React from 'react'; import PropTypes from 'prop-types'; import TreeNodeView from './tree-node-view'; import TreeViewContextMenu from './tree-view-contextmenu' const propTypes = { repoPermission: PropTypes.bool, isNodeMenuShow: PropTypes.bool.isRequired, treeData: PropTypes.object.isRequired, currentPath: PropTypes.string.isRequired, onMenuItemClick: PropTypes.func, onNodeClick: PropTypes.func.isRequired, onNodeExpanded: PropTypes.func.isRequired, onNodeCollapse: PropTypes.func.isRequired, }; const PADDING_LEFT = 20; class TreeView extends React.Component { constructor(props) { super(props); this.state = { isItemFreezed: false, isRightMenuShow: false, nodeData: null, fileData: null, mousePosition: {clientX: '', clientY: ''}, }; } componentDidMount() { this.registerHandlers(); } componentWillUnmount() { this.unregisterHandlers(); } onNodeDragStart = (e, node) => { // todo } onFreezedItem = () => { this.setState({isItemFreezed: true}); } onUnFreezedItem = () => { this.setState({isItemFreezed: false}); } contextMenu = (e) => { e.preventDefault(); this.setState({ isRightMenuShow:false, }); setTimeout(() => { this.setState({ isRightMenuShow:true, fileData:this.state.nodeData, mousePosition: {clientX: e.clientX, clientY: e.clientY} }) },40) } unregisterHandlers = () => { let treeView = document.querySelector('.tree-view'); treeView.removeEventListener('contextmenu', this.contextMenu); } registerHandlers = () => { let treeView = document.querySelector('.tree-view'); treeView.addEventListener('contextmenu', this.contextMenu); } onNodeChanged = (node) => { this.setState({ nodeData:node }) } closeRightMenu = () => { this.setState({ isRightMenuShow:false, }) } onMenuItemClick = (operation, node) => { this.props.onMenuItemClick(operation, node) } render() { return (