import React from "react"; import { useState, useEffect } from "react"; // components import Wrapper from "components/sideMenu/Wrapper"; import OptionLayout from "components/option/Layout"; import OptionDropdown from "components/option/Dropdown"; import OptionSlider from "components/option/Slider"; import ControlIconBtnWrapper from "components/option/ControlIconBtnWrapper"; import ControlIconBtn from "components/option/ControlIconBtn"; // types import { BookStyle, BookFontFamily, BookFlow } from "types/book"; import { MenuControl } from "lib/hooks/useMenu"; import { BookOption } from "types/book"; import Setting from "components/Setting/setting"; const Option = ( { control, bookStyle, bookOption, bookFlow, onToggle, emitEvent, onBookStyleChange, onBookOptionChange, }: Props, ref: any ) => { const [fontFamily, setFontFamily] = useState( bookStyle.fontFamily ); const [fontSize, setFontSize] = useState(bookStyle.fontSize); const [lineHeight, setLineHeight] = useState(bookStyle.lineHeight); const [marginHorizontal, setMarginHorizontal] = useState( bookStyle.marginHorizontal ); const [marginVertical, setMarginVertical] = useState( bookStyle.marginVertical ); const [isScrollHorizontal, setIsScrollHorizontal] = useState(true); const [viewType, setViewType] = useState({ active: true, spread: true, }); /** Change font family */ const onSelectFontFamily = (font: BookFontFamily) => setFontFamily(font); /** Change font style and layout */ const onChangeSlider = (type: SliderType, e: any) => { if (!e || !e.target) return; switch (type) { case "FontSize": setFontSize(e.target.value); break; case "LineHeight": setLineHeight(e.target.value); break; case "MarginHorizontal": setMarginHorizontal(e.target.value); break; case "MarginVertical": setMarginVertical(e.target.value); break; default: break; } }; /** * Select view direction * @param type Direction */ const onClickDirection = (type: "Horizontal" | "Vertical") => { if (type === "Horizontal") { setIsScrollHorizontal(true); setViewType({ ...viewType, active: true }); onBookOptionChange({ ...bookOption, flow: "paginated", }); } else { setIsScrollHorizontal(false); setViewType({ ...viewType, active: false }); onBookOptionChange({ ...bookOption, flow: "scrolled-doc", }); } }; /** * Select isSpread * @param isSpread Whether spread view */ const onClickViewType = (isSpread: boolean) => { if (isSpread) { setViewType({ ...viewType, spread: true }); onBookOptionChange({ ...bookOption, spread: "auto", }); } else { setViewType({ ...viewType, spread: false }); onBookOptionChange({ ...bookOption, spread: "none", }); } }; /* Save userdata */ // TODO Fix the infinite re-rendering issue, when inlcude `onBookStyleChange` to dependencies array. /* eslint-disable */ useEffect(() => { const timer = window.setTimeout(() => { onBookStyleChange({ fontFamily, fontSize, lineHeight, marginHorizontal, marginVertical, }); }, 250); return () => window.clearTimeout(timer); }, [fontFamily, fontSize, lineHeight, marginHorizontal, marginVertical]); /* eslint-enable */ /** Re-register close event, when after set */ useEffect(() => emitEvent(), [bookStyle, emitEvent]); return ( <> {control.display && ( )} ); }; interface Props { control: MenuControl; bookStyle: BookStyle; bookOption: BookOption; bookFlow: BookFlow; onToggle: () => void; emitEvent: () => void; onBookStyleChange: (bookStyle: BookStyle) => void; onBookOptionChange: (bookOption: BookOption) => void; } type SliderType = | "FontSize" | "LineHeight" | "MarginHorizontal" | "MarginVertical"; type ViewType = { active: boolean; spread: boolean; }; export default React.forwardRef(Option); {/* onClickDirection("Horizontal")} /> onClickDirection("Vertical")} /> onClickViewType(true)} /> onClickViewType(false)} /> onChangeSlider("FontSize", e)} /> onChangeSlider("LineHeight", e)} /> onChangeSlider("MarginHorizontal", e)} /> onChangeSlider("MarginVertical", e)} /> */}