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

Convert ScrollSpy to observable component

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-03-12 12:51:08 +03:00
parent 55ccfced93
commit 6fd20bd169
1 changed files with 5 additions and 11 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,3 +1,4 @@
import { observer } from "mobx-react";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { useMutationObserver } from "../../hooks"; import { useMutationObserver } from "../../hooks";
import { NavigationTree } from "../tree-view"; import { NavigationTree } from "../tree-view";
@ -7,13 +8,7 @@ interface Props extends React.DOMAttributes<HTMLElement> {
rootMargin?: string // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer rootMargin?: string // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
} }
ScrollSpy.defaultProps = { export const ScrollSpy = observer(({ render, rootMargin = "0px 0px -85%" }: Props) => {
// Shrinking root area from the bottom
// Allows to fire observer event only if target scrolled up to top of the page)
rootMargin: "0px 0px -85%"
};
export function ScrollSpy(props: Props) {
const parent = useRef<HTMLDivElement>(); const parent = useRef<HTMLDivElement>();
const sections = useRef<NodeListOf<HTMLElement>>(); const sections = useRef<NodeListOf<HTMLElement>>();
const [tree, setTree] = useState<NavigationTree[]>([]); const [tree, setTree] = useState<NavigationTree[]>([]);
@ -70,7 +65,7 @@ export function ScrollSpy(props: Props) {
const observeSections = () => { const observeSections = () => {
const options: IntersectionObserverInit = { const options: IntersectionObserverInit = {
threshold: [0], threshold: [0],
rootMargin: props.rootMargin, rootMargin
}; };
sections.current.forEach((section) => { sections.current.forEach((section) => {
@ -94,8 +89,7 @@ export function ScrollSpy(props: Props) {
return ( return (
<div className="ScrollSpy" ref={parent}> <div className="ScrollSpy" ref={parent}>
{props.render(tree)} {render(tree)}
</div> </div>
); );
} });