You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
252 lines
5.9 KiB
252 lines
5.9 KiB
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<BookFontFamily>( |
|
bookStyle.fontFamily |
|
); |
|
const [fontSize, setFontSize] = useState<number>(bookStyle.fontSize); |
|
const [lineHeight, setLineHeight] = useState<number>(bookStyle.lineHeight); |
|
const [marginHorizontal, setMarginHorizontal] = useState<number>( |
|
bookStyle.marginHorizontal |
|
); |
|
const [marginVertical, setMarginVertical] = useState<number>( |
|
bookStyle.marginVertical |
|
); |
|
const [isScrollHorizontal, setIsScrollHorizontal] = useState<boolean>(true); |
|
const [viewType, setViewType] = useState<ViewType>({ |
|
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 && ( |
|
<Wrapper |
|
title="تنظیمات" |
|
show={control.open} |
|
onClose={onToggle} |
|
ref={ref} |
|
> |
|
<OptionLayout> |
|
<Setting/> |
|
</OptionLayout> |
|
|
|
|
|
</Wrapper> |
|
)} |
|
</> |
|
); |
|
}; |
|
|
|
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); |
|
|
|
|
|
|
|
{/* <ControlIconBtnWrapper title="View Direction"> |
|
<ControlIconBtn |
|
type="ScrollHorizontal" |
|
alt="Horizontal View" |
|
active={true} |
|
isSelected={isScrollHorizontal} |
|
onClick={() => onClickDirection("Horizontal")} |
|
/> |
|
<ControlIconBtn |
|
type="ScrollVertical" |
|
alt="Vertical View" |
|
active={true} |
|
isSelected={!isScrollHorizontal} |
|
onClick={() => onClickDirection("Vertical")} |
|
/> |
|
</ControlIconBtnWrapper> |
|
<ControlIconBtnWrapper title="View Spread"> |
|
<ControlIconBtn |
|
type="BookOpen" |
|
alt="Two Page View" |
|
active={viewType.active} |
|
isSelected={viewType.spread} |
|
onClick={() => onClickViewType(true)} |
|
/> |
|
<ControlIconBtn |
|
type="BookClose" |
|
alt="One Page View" |
|
active={viewType.active} |
|
isSelected={!viewType.spread} |
|
onClick={() => onClickViewType(false)} |
|
/> |
|
</ControlIconBtnWrapper> |
|
<OptionDropdown |
|
title="Font" |
|
defaultValue={fontFamily} |
|
valueList={["Nazanin", "Sans"]} |
|
onSelect={onSelectFontFamily} |
|
/> |
|
<OptionSlider |
|
active={true} |
|
title="Size" |
|
minValue={8} |
|
maxValue={36} |
|
defaultValue={fontSize} |
|
step={1} |
|
onChange={(e) => onChangeSlider("FontSize", e)} |
|
/> |
|
<OptionSlider |
|
active={true} |
|
title="Line height" |
|
minValue={1} |
|
maxValue={3} |
|
defaultValue={lineHeight} |
|
step={0.1} |
|
onChange={(e) => onChangeSlider("LineHeight", e)} |
|
/> |
|
<OptionSlider |
|
active={true} |
|
title="Horizontal margin" |
|
minValue={0} |
|
maxValue={100} |
|
defaultValue={marginHorizontal} |
|
step={1} |
|
onChange={(e) => onChangeSlider("MarginHorizontal", e)} |
|
/> |
|
<OptionSlider |
|
active={bookFlow === "paginated"} |
|
title="Vertical margin" |
|
minValue={0} |
|
maxValue={100} |
|
defaultValue={marginVertical} |
|
step={1} |
|
onChange={(e) => onChangeSlider("MarginVertical", e)} |
|
/> */} |