hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Highlight selected item

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-03-05 09:57:29 +03:00
parent 06e747dfa8
commit 3194fa9139
2 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/renderer/components/scroll-spy/scroll-spy.tsx
View File

@ -1,8 +1,8 @@
import React, { useEffect, useRef, useState } from "react";
import { NavigationTree } from "../tree-view";
interface Props extends React.DOMAttributes<any> {
render: (data: NavigationTree[]) => any
interface Props extends React.DOMAttributes<HTMLElement> {
render: (data: NavigationTree[]) => JSX.Element
}
export function ScrollSpy(props: Props) {
@ -20,10 +20,7 @@ export function ScrollSpy(props: Props) {
};
const updateNavigation = () => {
setTree([
...tree,
...getNavigation(sections.current[0].parentElement)
]);
setTree(getNavigation(sections.current[0].parentElement));
};
const getNavigation = (element: Element) => {
@ -33,6 +30,7 @@ export function ScrollSpy(props: Props) {
sections.forEach(section => {
const id = section.getAttribute("id");
const name = section.querySelector(":first-child").textContent;
const selected = id === activeElementId;
if (!name || !id) {
return;
@ -41,6 +39,7 @@ export function ScrollSpy(props: Props) {
children.push({
id,
name,
selected,
children: getNavigation(section)
});
});
@ -70,10 +69,13 @@ export function ScrollSpy(props: Props) {
useEffect(() => {
setSections();
observeSections();
updateNavigation();
// TODO: Attach on dom change event
}, []);
useEffect(() => {
updateNavigation();
}, [activeElementId]);
console.log(activeElementId);
return (

4
src/renderer/components/tree-view/tree-view.tsx
View File

@ -4,10 +4,12 @@ import React from "react";
import { Icon } from "../icon";
import TreeView from "@material-ui/lab/TreeView";
import TreeItem from "@material-ui/lab/TreeItem";
import { cssNames } from "../../utils";
export interface NavigationTree {
id: string;
name: string;
selected?: boolean;
children?: NavigationTree[];
}
@ -18,7 +20,7 @@ interface Props {
export function RecursiveTreeView({ data }: Props) {
const renderTree = (nodes: NavigationTree[]) => {
return nodes.map(node => (
<TreeItem key={node.id} nodeId={node.id} label={node.name}>
<TreeItem key={node.id} nodeId={node.id} label={node.name} className={cssNames({"Mui-selected": node.selected})}>
{Array.isArray(node.children) ? node.children.map((node) => renderTree([node])) : null}
</TreeItem>
));