491f0cd08a
* Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2022 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import classNames from "classnames";
|
|
import React, { useContext } from "react";
|
|
|
|
import { _t } from "../../../languageHandler";
|
|
import ContextMenu, { aboveLeftOf, MenuProps, useContextMenu } from "../../structures/ContextMenu";
|
|
import EmojiPicker from "../emojipicker/EmojiPicker";
|
|
import { CollapsibleButton } from "./CollapsibleButton";
|
|
import { OverflowMenuContext } from "./MessageComposerButtons";
|
|
|
|
interface IEmojiButtonProps {
|
|
addEmoji: (unicode: string) => boolean;
|
|
menuPosition?: MenuProps;
|
|
className?: string;
|
|
}
|
|
|
|
export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonProps): JSX.Element {
|
|
const overflowMenuCloser = useContext(OverflowMenuContext);
|
|
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
|
|
|
|
let contextMenu: React.ReactElement | null = null;
|
|
if (menuDisplayed && button.current) {
|
|
const position = menuPosition ?? aboveLeftOf(button.current.getBoundingClientRect());
|
|
const onFinished = (): void => {
|
|
closeMenu();
|
|
overflowMenuCloser?.();
|
|
};
|
|
|
|
contextMenu = (
|
|
<ContextMenu {...position} onFinished={onFinished} managed={false}>
|
|
<EmojiPicker onChoose={addEmoji} onFinished={onFinished} />
|
|
</ContextMenu>
|
|
);
|
|
}
|
|
|
|
const computedClassName = classNames("mx_EmojiButton", className, {
|
|
mx_EmojiButton_highlight: menuDisplayed,
|
|
});
|
|
|
|
// TODO: replace ContextMenuTooltipButton with a unified representation of
|
|
// the header buttons and the right panel buttons
|
|
return (
|
|
<>
|
|
<CollapsibleButton
|
|
className={computedClassName}
|
|
iconClassName="mx_EmojiButton_icon"
|
|
onClick={openMenu}
|
|
title={_t("common|emoji")}
|
|
inputRef={button}
|
|
/>
|
|
|
|
{contextMenu}
|
|
</>
|
|
);
|
|
}
|