a simple keynote software for Markdown files – written in electron
 
 
 

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;