From 02b43201b1b34c8f33a906882d16243c394572fc Mon Sep 17 00:00:00 2001 From: Djeeberjr Date: Sat, 18 Sep 2021 00:05:21 +0200 Subject: [PATCH] added 3dot menu --- package.json | 19 +++--- src/components/FileBrowser.tsx | 4 ++ src/components/MoreMenu.tsx | 51 +++++++++++++++ src/components/MoreMenuEntry.tsx | 18 ++++++ yarn.lock | 105 +++---------------------------- 5 files changed, 93 insertions(+), 104 deletions(-) create mode 100644 src/components/MoreMenu.tsx create mode 100644 src/components/MoreMenuEntry.tsx diff --git a/package.json b/package.json index a98c887..445cd40 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "react-dom": "^17.0.2", "react-icons": "^4.2.0", "react-router-dom": "^5.2.0", + "rooks": "^5.7.1", "tailwindcss": "npm:@tailwindcss/postcss7-compat" }, "scripts": { @@ -45,21 +46,21 @@ "@graphql-codegen/typescript": "^1.23.0", "@graphql-codegen/typescript-operations": "1.18.4", "@graphql-codegen/typescript-react-apollo": "2.3.1", - "@typescript-eslint/eslint-plugin": "^4.28.4", - "@typescript-eslint/parser": "^4.28.4", - "autoprefixer": "^9", - "eslint": "^7.31.0", - "eslint-plugin-react": "^7.24.0", - "postcss": "^7", - "react-scripts": "4.0.3", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@types/react-router-dom": "^5.1.8", - "typescript": "^4.1.2", + "@typescript-eslint/eslint-plugin": "^4.28.4", + "@typescript-eslint/parser": "^4.28.4", + "apollo": "^2.33.4", + "autoprefixer": "^9", + "eslint": "^7.31.0", + "eslint-plugin-react": "^7.24.0", "node-sass": "^6.0.1", - "apollo": "^2.33.4" + "postcss": "^7", + "react-scripts": "4.0.3", + "typescript": "^4.1.2" }, "proxy": "http://localhost:8080" } diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx index cf0e032..07b846c 100644 --- a/src/components/FileBrowser.tsx +++ b/src/components/FileBrowser.tsx @@ -16,6 +16,7 @@ import FileUploadButton from "./FileUploadButton" import { ReactComponent as Spinner } from "./../assets/spinner.svg" import FileBrowserList from "./FileBrowserList" import pathRename from "../functions/pathRename" +import MoreMenu from "./MoreMenu" function uriToPath(pathname:string) { // strip the "/f" from e.g. "/f/dir1/dir2" @@ -139,6 +140,9 @@ const FileBrowser: React.FC = (props) => { onUpload={(files)=>handleDrop(files)} /> +
+ +
diff --git a/src/components/MoreMenu.tsx b/src/components/MoreMenu.tsx new file mode 100644 index 0000000..be2496a --- /dev/null +++ b/src/components/MoreMenu.tsx @@ -0,0 +1,51 @@ +import React from "react" +import { useState } from "react" +import { MdMoreVert } from "react-icons/md" +import { useOutsideClickRef } from "rooks" +import MoreMenuEntry from "./MoreMenuEntry" + +const MoreMenu: React.FC = () => { + const [showMenu,setShowMenu] = useState(false) + + const [outsideRef] = useOutsideClickRef(()=>{ + setShowMenu(false) + }) + + return <> + +
+ { + showMenu && ( +
+ {/* TODO: there has got to be a better way than "w-36" */} +
+
    + + Menu 1 + + + Menu 2 + + { + setShowMenu(false) + }} + > + Logout + +
+
+
+ ) + } +
+ +} + +export default MoreMenu diff --git a/src/components/MoreMenuEntry.tsx b/src/components/MoreMenuEntry.tsx new file mode 100644 index 0000000..3bda124 --- /dev/null +++ b/src/components/MoreMenuEntry.tsx @@ -0,0 +1,18 @@ +import React from "react" + +interface Props { + onclick?: ()=>void +} + +const MoreMenuEntry: React.FC = (props) => { + return ( +
  • + {props.children} +
    • + ) +} + +export default MoreMenuEntry diff --git a/yarn.lock b/yarn.lock index bb1714b..4109349 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1246,7 +1246,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4": version "7.14.8" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz" integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg== @@ -2357,60 +2357,11 @@ dependencies: defer-to-connect "^1.0.1" -"@testing-library/dom@^7.28.1": - version "7.31.2" - resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz" - integrity sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ== - dependencies: - "@babel/code-frame" "^7.10.4" - "@babel/runtime" "^7.12.5" - "@types/aria-query" "^4.2.0" - aria-query "^4.2.2" - chalk "^4.1.0" - dom-accessibility-api "^0.5.6" - lz-string "^1.4.4" - pretty-format "^26.6.2" - -"@testing-library/jest-dom@^5.11.4": - version "5.14.1" - resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz" - integrity sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ== - dependencies: - "@babel/runtime" "^7.9.2" - "@types/testing-library__jest-dom" "^5.9.1" - aria-query "^4.2.2" - chalk "^3.0.0" - css "^3.0.0" - css.escape "^1.5.1" - dom-accessibility-api "^0.5.6" - lodash "^4.17.15" - redent "^3.0.0" - -"@testing-library/react@^11.1.0": - version "11.2.7" - resolved "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz" - integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA== - dependencies: - "@babel/runtime" "^7.12.5" - "@testing-library/dom" "^7.28.1" - -"@testing-library/user-event@^12.1.10": - version "12.8.3" - resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz" - integrity sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ== - dependencies: - "@babel/runtime" "^7.12.5" - "@tootallnate/once@1": version "1.1.2" resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz" integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw== -"@types/aria-query@^4.2.0": - version "4.2.2" - resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz" - integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig== - "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7": version "7.1.15" resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.15.tgz" @@ -2513,7 +2464,7 @@ dependencies: "@types/istanbul-lib-report" "*" -"@types/jest@*", "@types/jest@^26.0.15": +"@types/jest@^26.0.15": version "26.0.24" resolved "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz" integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w== @@ -2656,13 +2607,6 @@ resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz" integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ== -"@types/testing-library__jest-dom@^5.9.1": - version "5.14.1" - resolved "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.1.tgz" - integrity sha512-Gk9vaXfbzc5zCXI9eYE9BI5BNHEp4D3FWjgqBE/ePGYElLAP+KvxBcsdkwfIVvezs605oiyd/VrpiHe3Oeg+Aw== - dependencies: - "@types/jest" "*" - "@types/uglify-js@*": version "3.13.1" resolved "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz" @@ -5341,11 +5285,6 @@ css-what@^5.0.0: resolved "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz" integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg== -css.escape@^1.5.1: - version "1.5.1" - resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz" - integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s= - css@^2.0.0: version "2.2.4" resolved "https://registry.npmjs.org/css/-/css-2.2.4.tgz" @@ -5356,15 +5295,6 @@ css@^2.0.0: source-map-resolve "^0.5.2" urix "^0.1.0" -css@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/css/-/css-3.0.0.tgz" - integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ== - dependencies: - inherits "^2.0.4" - source-map "^0.6.1" - source-map-resolve "^0.6.0" - cssdb@^4.4.0: version "4.4.0" resolved "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz" @@ -5804,11 +5734,6 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -dom-accessibility-api@^0.5.6: - version "0.5.6" - resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz" - integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw== - dom-converter@^0.2.0: version "0.2.0" resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz" @@ -9582,11 +9507,6 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" -lz-string@^1.4.4: - version "1.4.4" - resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz" - integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY= - magic-string@^0.25.0, magic-string@^0.25.7: version "0.25.7" resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz" @@ -12684,6 +12604,14 @@ rollup@^1.31.1: "@types/node" "*" acorn "^7.1.0" +rooks@^5.7.1: + version "5.7.1" + resolved "https://registry.yarnpkg.com/rooks/-/rooks-5.7.1.tgz#a9c91e94e760e21a9df5afc1de4ba07d09a6156d" + integrity sha512-Gztycgm+e+bS0vqLMSGlGe8f7rkXMxjfPj3FucM06/xu1CEFQx1pZ0zMVdWVxDeMXRePaQ2/g1K7ArIlGKyHbQ== + dependencies: + lodash.debounce "^4.0.8" + raf "^3.4.1" + rsvp@^4.8.4: version "4.8.5" resolved "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz" @@ -13172,14 +13100,6 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2: source-map-url "^0.4.0" urix "^0.1.0" -source-map-resolve@^0.6.0: - version "0.6.0" - resolved "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz" - integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w== - dependencies: - atob "^2.1.2" - decode-uri-component "^0.2.0" - source-map-support@^0.5.17, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.19: version "0.5.19" resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz" @@ -14648,11 +14568,6 @@ wbuf@^1.1.0, wbuf@^1.7.3: dependencies: minimalistic-assert "^1.0.0" -web-vitals@^1.0.1: - version "1.1.2" - resolved "https://registry.npmjs.org/web-vitals/-/web-vitals-1.1.2.tgz" - integrity sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig== - webidl-conversions@^5.0.0: version "5.0.0" resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz"