82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import "./NoteCreatorButton.css";
|
|
import { useRef, useMemo } from "react";
|
|
import { useLocation } from "react-router-dom";
|
|
import classNames from "classnames";
|
|
|
|
import { isFormElement } from "@/SnortUtils";
|
|
import useKeyboardShortcut from "@/Hooks/useKeyboardShortcut";
|
|
import useLogin from "@/Hooks/useLogin";
|
|
import Icon from "@/Icons/Icon";
|
|
import { useNoteCreator } from "@/State/NoteCreator";
|
|
import { NoteCreator } from "./NoteCreator";
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
export const NoteCreatorButton = ({
|
|
className,
|
|
alwaysShow,
|
|
showText,
|
|
}: {
|
|
className?: string;
|
|
alwaysShow?: boolean;
|
|
showText?: boolean;
|
|
}) => {
|
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
|
const location = useLocation();
|
|
const { readonly } = useLogin(s => ({ readonly: s.readonly }));
|
|
const { show, replyTo, update } = useNoteCreator(v => ({ show: v.show, replyTo: v.replyTo, update: v.update }));
|
|
|
|
useKeyboardShortcut("n", event => {
|
|
// if event happened in a form element, do nothing, otherwise focus on search input
|
|
if (event.target && !isFormElement(event.target as HTMLElement)) {
|
|
event.preventDefault();
|
|
if (buttonRef.current) {
|
|
buttonRef.current.click();
|
|
}
|
|
}
|
|
});
|
|
|
|
const shouldHideNoteCreator = useMemo(() => {
|
|
if (alwaysShow) {
|
|
return false;
|
|
}
|
|
const isReply = replyTo && show;
|
|
const hideOn = [
|
|
"/settings",
|
|
"/messages",
|
|
"/new",
|
|
"/login",
|
|
"/donate",
|
|
"/e",
|
|
"/nevent",
|
|
"/note1",
|
|
"/naddr",
|
|
"/subscribe",
|
|
];
|
|
return (readonly || hideOn.some(a => location.pathname.startsWith(a))) && !isReply;
|
|
}, [location, readonly]);
|
|
|
|
return (
|
|
<>
|
|
{!shouldHideNoteCreator && (
|
|
<button
|
|
ref={buttonRef}
|
|
className={classNames("flex flex-row items-center primary rounded-full", { circle: !showText }, className)}
|
|
onClick={() =>
|
|
update(v => {
|
|
v.replyTo = undefined;
|
|
v.show = true;
|
|
})
|
|
}>
|
|
<Icon name="plus" size={16} />
|
|
{showText && (
|
|
<span className="ml-2 hidden xl:inline">
|
|
<FormattedMessage defaultMessage="New Note" id="2mcwT8" />
|
|
</span>
|
|
)}
|
|
</button>
|
|
)}
|
|
<NoteCreator key="global-note-creator" />
|
|
</>
|
|
);
|
|
};
|