58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import { t } from "../i18n";
|
|
import { AppState } from "../types";
|
|
import { capitalizeString } from "../utils";
|
|
import { trackEvent } from "../analytics";
|
|
import { useDevice } from "./App";
|
|
import "./LibraryButton.scss";
|
|
import { LibraryIcon } from "./icons";
|
|
|
|
export const LibraryButton: React.FC<{
|
|
appState: AppState;
|
|
setAppState: React.Component<any, AppState>["setState"];
|
|
isMobile?: boolean;
|
|
}> = ({ appState, setAppState, isMobile }) => {
|
|
const device = useDevice();
|
|
const showLabel = !isMobile;
|
|
|
|
// TODO barnabasmolnar/redesign
|
|
// not great, toolbar jumps in a jarring manner
|
|
if (appState.isSidebarDocked && appState.openSidebar === "library") {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<label title={`${capitalizeString(t("toolBar.library"))}`}>
|
|
<input
|
|
className="ToolIcon_type_checkbox"
|
|
type="checkbox"
|
|
name="editor-library"
|
|
onChange={(event) => {
|
|
document
|
|
.querySelector(".layer-ui__wrapper")
|
|
?.classList.remove("animate");
|
|
const isOpen = event.target.checked;
|
|
setAppState({ openSidebar: isOpen ? "library" : null });
|
|
// track only openings
|
|
if (isOpen) {
|
|
trackEvent(
|
|
"library",
|
|
"toggleLibrary (open)",
|
|
`toolbar (${device.isMobile ? "mobile" : "desktop"})`,
|
|
);
|
|
}
|
|
}}
|
|
checked={appState.openSidebar === "library"}
|
|
aria-label={capitalizeString(t("toolBar.library"))}
|
|
aria-keyshortcuts="0"
|
|
/>
|
|
<div className="library-button">
|
|
<div>{LibraryIcon}</div>
|
|
{showLabel && (
|
|
<div className="library-button__label">{t("toolBar.library")}</div>
|
|
)}
|
|
</div>
|
|
</label>
|
|
);
|
|
};
|