66 lines
2.1 KiB
66 lines
2.1 KiB
import React, {useEffect, useState, useCallback, useRef, useContext} from "react";
|
|
|
|
import Slide from "./Slide";
|
|
import SlideContext from "../shared/SlideContext";
|
|
import SettingsContext from "../shared/SettingsContext";
|
|
|
|
const SlidesList = ({deck, meta, font, style}) => {
|
|
const {highlightColor, backgroundColor, color} = useContext(SettingsContext);
|
|
const {slide, setSlide} = useContext(SlideContext);
|
|
const container = useRef();
|
|
const current = useRef();
|
|
const [scale, setScale] = useState(1);
|
|
const [first, setFirst] = useState(true);
|
|
|
|
const sizeChange = useCallback(() => {
|
|
if (!container.current)
|
|
return;
|
|
const firstSlide = document.querySelector(".slides-list .slide");
|
|
if (!firstSlide)
|
|
return;
|
|
|
|
const slideWidth = firstSlide.clientWidth;
|
|
const parentWidth = container.current.clientWidth;
|
|
const targetWidth = parentWidth * 0.9;
|
|
|
|
setScale(targetWidth / slideWidth);
|
|
}, [container]);
|
|
|
|
useEffect(() => {
|
|
if (first) {
|
|
setFirst(false);
|
|
return;
|
|
}
|
|
if (!current.current)
|
|
return;
|
|
current.current.scrollIntoView({inline : "nearest"});
|
|
}, [current, slide, first]);
|
|
|
|
useEffect(() => {
|
|
const resizeListener = () => {
|
|
sizeChange();
|
|
};
|
|
|
|
window.addEventListener("resize", resizeListener);
|
|
|
|
sizeChange();
|
|
|
|
return () => window.removeEventListener("resize", resizeListener);
|
|
}, [sizeChange, deck]);
|
|
|
|
return (
|
|
<aside className="slides-list" ref={container} style={{
|
|
"--color-hightlight" : meta.color_highlight || highlightColor,
|
|
"--color-slideBackground" : meta.color_background || backgroundColor,
|
|
"--color-slideForeground" : meta.color_text || color
|
|
}}>
|
|
{deck.map((currentSlide, index) => (
|
|
<div className="slide-wrap" key={index}>
|
|
<Slide data={currentSlide} className={index === slide ? "active" : ""} style={{transform : `scale(${scale}) translateX(0)`, fontFamily: meta.font || font}} onClick={() => setSlide(index)} ref={index === slide ? current : null} />
|
|
</div>
|
|
))}
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default SlidesList; |