Merge branch 'FolderContextMenu' into 'master'

FolderContextMenu

See merge request !43

digital-course-file/src/user/Folder.js

@@ -3,11 +3,45 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFolder } from "@fortawesome/free-solid-svg-icons"
 import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
+import { useHistory } from "react-router-dom";
+
+import { useContextMenu, Menu, Item, Separator } from "react-contexify";
+
+import "react-contexify/dist/ReactContexify.css";
 
 export default function Folder ({folder}) {
+    const history = useHistory();
+    const MENU_ID = "#abcd123141asscsc!1223";
+
+    const { show } = useContextMenu({
+        id: MENU_ID,
+      });
+
+      function displayMenu(e) {
+        show(e, { props: { id: Number(e.currentTarget.id) } });
+      }
+    
+      function handleItemClick({ event, props, data, triggerEvent }) {
+
+        switch (event.currentTarget.id) {
+          case "open":
+            history.push(`/folder/${folder.id}`);
+            break;
+
+          case "rename":
+            break;
+
+          case "details":
+            break;
+
+        }
+      }
+    
 
     return (
+        <div>
         <Button 
+            onContextMenu={displayMenu}
             to={`/folder/${folder.id}`} 
             variant="outline-secondary" 
             className="text-truncate w-100" 
@@ -16,6 +50,21 @@ export default function Folder ({folder}) {
             {folder.name}
         </Button>
 
+        <Menu id={MENU_ID}>
+        <Item id="open" onClick={handleItemClick}>
+          Open
+        </Item>
+        <Item id="rename" onClick={handleItemClick}>
+          Rename
+        </Item>
+
+        <Item id="details" onClick={handleItemClick}>
+          Details
+        </Item>
+
+      </Menu>
+
+        </div>
     );
 
 }
\ No newline at end of file

digital-course-file/src/user/Hero.js

@@ -102,79 +102,5 @@ const Hero = ({ handleLogout }) => {
 
   
 }
-class ContextMenu extends React.Component {
-  state = {
-      visible: false,
-  };
 
-  componentDidMount() {
-      document.addEventListener('contextmenu', this._handleContextMenu);
-      document.addEventListener('click', this._handleClick);
-      document.addEventListener('scroll', this._handleScroll);
-  };
-
-  componentWillUnmount() {
-    document.removeEventListener('contextmenu', this._handleContextMenu);
-    document.removeEventListener('click', this._handleClick);
-    document.removeEventListener('scroll', this._handleScroll);
-  }
-  
-  _handleContextMenu = (event) => {
-      event.preventDefault();
-      
-      this.setState({ visible: true });
-      
-      const clickX = event.clientX;
-      const clickY = event.clientY;
-      const screenW = window.innerWidth;
-      const screenH = window.innerHeight;
-      const rootW = this.root.offsetWidth;
-      const rootH = this.root.offsetHeight;
-      
-      const right = (screenW - clickX) > rootW;
-      const left = !right;
-      const top = (screenH - clickY) > rootH;
-      const bottom = !top;
-      
-      if (right) {
-          this.root.style.left = `${clickX + 5}px`;
-      }
-      
-      if (left) {
-          this.root.style.left = `${clickX - rootW - 5}px`;
-      }
-      
-      if (top) {
-          this.root.style.top = `${clickY + 5}px`;
-      }
-      
-      if (bottom) {
-          this.root.style.top = `${clickY - rootH - 5}px`;
-      }
-  };
-
-  _handleClick = (event) => {
-      const { visible } = this.state;
-      const wasOutside = !(event.target.contains === this.root);
-      
-      if (wasOutside && visible) this.setState({ visible: false, });
-  };
-
-  _handleScroll = () => {
-      const { visible } = this.state;
-      
-      if (visible) this.setState({ visible: false, });
-  };
-  
-  render() {
-      const { visible } = this.state;
-      
-      return(visible || null) && 
-          <div ref={ref => {this.root = ref}} className="contextMenu">
-              <div className="contextMenu--option">Delete</div>
-              
-          </div>
-  };
-}
-ReactDOM.render(<ContextMenu/>, document.getElementById('root'));
 export default Hero