diff --git a/package.json b/package.json
index 3acdff7d24..4bbea8b17d 100644
--- a/package.json
+++ b/package.json
@@ -241,6 +241,7 @@
"devDependencies": {
"@emeraldpay/hashicon-react": "^0.4.0",
"@material-ui/core": "^4.10.1",
+ "@material-ui/lab": "^4.0.0-alpha.57",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0",
@@ -339,7 +340,6 @@
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-select-event": "^5.1.0",
- "react-simple-tree-menu": "^1.1.18",
"react-window": "^1.8.5",
"sass-loader": "^8.0.2",
"sharp": "^0.26.1",
diff --git a/src/renderer/components/scroll-spy/scroll-spy.tsx b/src/renderer/components/scroll-spy/scroll-spy.tsx
index 9fb4684840..67f5261879 100644
--- a/src/renderer/components/scroll-spy/scroll-spy.tsx
+++ b/src/renderer/components/scroll-spy/scroll-spy.tsx
@@ -26,17 +26,17 @@ export function ScrollSpy(props: Props) {
const children: NavigationTree[] = [];
sections.forEach(section => {
- const key = section.getAttribute("id");
- const label = section.querySelector(":first-child").textContent;
+ const id = section.getAttribute("id");
+ const name = section.querySelector(":first-child").textContent;
- if (!label || !key) {
+ if (!name || !id) {
return;
}
children.push({
- key,
- label,
- nodes: getNavigation(section)
+ id,
+ name,
+ children: getNavigation(section)
});
});
diff --git a/src/renderer/components/tree-view/tree-view.tsx b/src/renderer/components/tree-view/tree-view.tsx
index 2e35d0df9a..0e9cf2dd57 100644
--- a/src/renderer/components/tree-view/tree-view.tsx
+++ b/src/renderer/components/tree-view/tree-view.tsx
@@ -1,25 +1,45 @@
import React from "react";
-import TreeMenu from "react-simple-tree-menu";
import { Icon } from "../icon";
+import { makeStyles } from "@material-ui/core/styles";
+import TreeView from "@material-ui/lab/TreeView";
+import TreeItem from "@material-ui/lab/TreeItem";
export interface NavigationTree {
- key: string;
- label: string;
- nodes?: NavigationTree[];
+ id: string;
+ name: string;
+ children?: NavigationTree[];
}
interface Props {
data: NavigationTree[]
}
+const useStyles = makeStyles({
+ root: {
+ height: 110,
+ flexGrow: 1,
+ maxWidth: 400,
+ },
+});
+
export function RecursiveTreeView({ data }: Props) {
+ const classes = useStyles();
+
+ const renderTree = (nodes: NavigationTree[]) => {
+ return nodes.map(node => (
+
+ {Array.isArray(node.children) ? node.children.map((node) => renderTree([node])) : null}
+
+ ));
+ };
+
return (
-
+ }
+ defaultExpandIcon={}
+ >
+ {renderTree(data)}
+
);
}
diff --git a/yarn.lock b/yarn.lock
index e8f814ec67..e0c8816416 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -834,6 +834,17 @@
react-is "^16.8.0"
react-transition-group "^4.4.0"
+"@material-ui/lab@^4.0.0-alpha.57":
+ version "4.0.0-alpha.57"
+ resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz#e8961bcf6449e8a8dabe84f2700daacfcafbf83a"
+ integrity sha512-qo/IuIQOmEKtzmRD2E4Aa6DB4A87kmY6h0uYhjUmrrgmEAgbbw9etXpWPVXuRK6AGIQCjFzV6WO2i21m1R4FCw==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@material-ui/utils" "^4.11.2"
+ clsx "^1.0.4"
+ prop-types "^15.7.2"
+ react-is "^16.8.0 || ^17.0.0"
+
"@material-ui/styles@^4.10.0":
version "4.10.0"
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"
@@ -871,6 +882,15 @@
resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+"@material-ui/utils@^4.11.2":
+ version "4.11.2"
+ resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
+ integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ prop-types "^15.7.2"
+ react-is "^16.8.0 || ^17.0.0"
+
"@material-ui/utils@^4.9.12", "@material-ui/utils@^4.9.6":
version "4.9.12"
resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.9.12.tgz#0d639f1c1ed83fffb2ae10c21d15a938795d9e65"
@@ -3515,11 +3535,6 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
-classnames@^2.2.6:
- version "2.2.6"
- resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
- integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
-
clean-css@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -5591,11 +5606,6 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
-fast-memoize@^2.5.1:
- version "2.5.2"
- resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
- integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
-
fast-safe-stringify@^2.0.4:
version "2.0.7"
resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz#124aa885899261f68aedb42a7c080de9da608743"
@@ -7162,11 +7172,6 @@ is-electron@^2.2.0:
resolved "https://registry.yarnpkg.com/is-electron/-/is-electron-2.2.0.tgz#8943084f09e8b731b3a7a0298a7b5d56f6b7eef0"
integrity sha512-SpMppC2XR3YdxSzczXReBjqs2zGscWQpBIKqwXYBFic0ERaxNVgwLCHwOLZeESfdJQjX0RDvrJ1lBXX2ij+G1Q==
-is-empty@^1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/is-empty/-/is-empty-1.2.0.tgz#de9bb5b278738a05a0b09a57e1fb4d4a341a9f6b"
- integrity sha1-3pu1snhzigWgsJpX4ftNSjQan2s=
-
is-extendable@^0.1.0, is-extendable@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -11216,7 +11221,7 @@ react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-i
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-react-is@^17.0.1:
+"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1:
version "17.0.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
@@ -11287,16 +11292,6 @@ react-select@^3.1.0:
react-input-autosize "^2.2.2"
react-transition-group "^4.3.0"
-react-simple-tree-menu@^1.1.18:
- version "1.1.18"
- resolved "https://registry.yarnpkg.com/react-simple-tree-menu/-/react-simple-tree-menu-1.1.18.tgz#4c35f6c2348da8deac5cd10ab5dd07a5213f74f2"
- integrity sha512-sW33U4TF6J3CuhDXs40r8KXCZsyd9JKLVHRwCx0hxaWaXFD0p7LeeK1gJB+GLNErSGs1F1847E/kkTIyKi9E0w==
- dependencies:
- classnames "^2.2.6"
- fast-memoize "^2.5.1"
- is-empty "^1.2.0"
- tiny-debounce "^0.1.1"
-
react-transition-group@^4.3.0, react-transition-group@^4.4.0:
version "4.4.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
@@ -13233,11 +13228,6 @@ timers-browserify@^2.0.4:
dependencies:
setimmediate "^1.0.4"
-tiny-debounce@^0.1.1:
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/tiny-debounce/-/tiny-debounce-0.1.1.tgz#e7759447ca1d48830d3b302ce94666a0ca537b1d"
- integrity sha1-53WUR8odSIMNOzAs6UZmoMpTex0=
-
tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
version "1.1.0"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"