96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import Button from "../../layout/Button";
|
|
import Border from "../../elements/Border";
|
|
|
|
type Props = {
|
|
preview: boolean;
|
|
setPreview: React.Dispatch<React.SetStateAction<boolean>>;
|
|
sideBySide: boolean;
|
|
setSideBySide: React.Dispatch<React.SetStateAction<boolean>>;
|
|
};
|
|
|
|
export default function MarkdownEditorSelectorButtons({
|
|
preview,
|
|
setPreview,
|
|
setSideBySide,
|
|
sideBySide,
|
|
}: Props) {
|
|
const [ready, setReady] = React.useState(false);
|
|
|
|
const defSbsName = "TWUIMarkdownEditorDefaultSideBySide";
|
|
const defPrevName = "TWUIMarkdownEditorDefaultPreview";
|
|
|
|
React.useEffect(() => {
|
|
if (!ready) return;
|
|
|
|
if (sideBySide) {
|
|
localStorage.setItem(defSbsName, "true");
|
|
} else {
|
|
localStorage.removeItem(defSbsName);
|
|
}
|
|
|
|
if (preview) {
|
|
localStorage.setItem(defPrevName, "true");
|
|
} else {
|
|
localStorage.removeItem(defPrevName);
|
|
}
|
|
}, [sideBySide, preview, ready]);
|
|
|
|
React.useEffect(() => {
|
|
if (localStorage.getItem(defPrevName)) {
|
|
setPreview(true);
|
|
}
|
|
if (!localStorage.getItem(defSbsName)) {
|
|
setSideBySide(false);
|
|
}
|
|
|
|
setTimeout(() => {
|
|
setReady(true);
|
|
}, 200);
|
|
}, []);
|
|
|
|
return (
|
|
<Border className="p-1.5">
|
|
<Button
|
|
title="Code"
|
|
size="smaller"
|
|
color={sideBySide ? "gray" : preview ? "gray" : "primary"}
|
|
variant={
|
|
sideBySide ? "outlined" : preview ? "outlined" : "normal"
|
|
}
|
|
onClick={() => {
|
|
setSideBySide(false);
|
|
setPreview(false);
|
|
}}
|
|
>
|
|
Code
|
|
</Button>
|
|
<Button
|
|
title="Preview"
|
|
size="smaller"
|
|
color={sideBySide ? "gray" : preview ? "primary" : "gray"}
|
|
variant={
|
|
sideBySide ? "outlined" : preview ? "normal" : "outlined"
|
|
}
|
|
onClick={() => {
|
|
setSideBySide(false);
|
|
setPreview(true);
|
|
}}
|
|
>
|
|
Preview
|
|
</Button>
|
|
<Button
|
|
title="Side By Side"
|
|
size="smaller"
|
|
color={sideBySide ? "primary" : "gray"}
|
|
variant={sideBySide ? "normal" : "outlined"}
|
|
onClick={() => {
|
|
setSideBySide(true);
|
|
}}
|
|
>
|
|
Side By Side
|
|
</Button>
|
|
</Border>
|
|
);
|
|
}
|