useRef / useMemo in Stream.tsx
This commit is contained in:
parent
f2db229dd0
commit
1a7af1be2a
1 changed files with 34 additions and 28 deletions
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect, useMemo, useRef } from "react";
|
||||||
import * as Quran from "lib/Quran";
|
import * as Quran from "lib/Quran";
|
||||||
import { AudioControl } from "components/AudioControl";
|
import { AudioControl } from "components/AudioControl";
|
||||||
import { formatNumber, TFunction } from "lib/i18n";
|
import { formatNumber, TFunction } from "lib/i18n";
|
||||||
|
@ -26,7 +26,9 @@ export function Stream({
|
||||||
const className = classNames("body", "stream");
|
const className = classNames("body", "stream");
|
||||||
const style: React.CSSProperties =
|
const style: React.CSSProperties =
|
||||||
endOfStream || isPaused ? { overflowY: "auto" } : { overflowY: "hidden" };
|
endOfStream || isPaused ? { overflowY: "auto" } : { overflowY: "hidden" };
|
||||||
const ayat = stream.map((ayah: Quran.Ayah) => {
|
const ul = useRef<HTMLUListElement>();
|
||||||
|
const ayat = useMemo<JSX.Element[]>(() => {
|
||||||
|
return stream.map((ayah: Quran.Ayah) => {
|
||||||
return (
|
return (
|
||||||
<li key={ayah.id} className="ayah fade">
|
<li key={ayah.id} className="ayah fade">
|
||||||
<span className="title">
|
<span className="title">
|
||||||
|
@ -48,15 +50,19 @@ export function Stream({
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const ul: HTMLElement = document.querySelector("ul.stream")!;
|
|
||||||
const top = ul.offsetHeight + ul.scrollTop;
|
|
||||||
ul.scrollBy({ behavior: "smooth", top });
|
|
||||||
}, [stream.length]);
|
}, [stream.length]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = ul.current;
|
||||||
|
if (el) {
|
||||||
|
const top = el.scrollHeight + el.scrollTop;
|
||||||
|
el.scrollTo({ behavior: "smooth", top });
|
||||||
|
el.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}
|
||||||
|
}, [ul.current, stream.length]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul lang={locale} className={className} style={style}>
|
<ul lang={locale} className={className} style={style} ref={ul}>
|
||||||
{ayat}
|
{ayat}
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue