David LangleyandGitHub
e0a94a05ea
* Add focus lock to emoji picker and e2e test. * Remove direct use of FocusLock in favour of the ContextMenu prop. * Apply returnFocus for ContextMenu focusLocks * Remove import
63 lines
2.1 KiB
TypeScript
63 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 OR LicenseRef-Element-Commercial
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import classNames from "classnames";
|
|
import React, { type JSX, useContext } from "react";
|
|
|
|
import { _t } from "../../../languageHandler";
|
|
import ContextMenu, { aboveLeftOf, type 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} focusLock>
|
|
<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}
|
|
</>
|
|
);
|
|
}
|