98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
// Copyright 2025 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
import React, { useMemo } from 'react';
|
|
import { VisuallyHidden } from 'react-aria';
|
|
import { Button } from 'react-aria-components';
|
|
import type { LocalizerType } from '../../types/I18N';
|
|
import {
|
|
type EmojiVariantKey,
|
|
getEmojiParentByKey,
|
|
getEmojiParentKeyByVariantKey,
|
|
getEmojiVariantByKey,
|
|
} from './data/emojis';
|
|
import { FunStaticEmoji } from './FunEmoji';
|
|
|
|
/**
|
|
* Fun Picker Button
|
|
*/
|
|
|
|
export type FunPickerButtonProps = Readonly<{
|
|
i18n: LocalizerType;
|
|
}>;
|
|
|
|
export function FunPickerButton(props: FunPickerButtonProps): JSX.Element {
|
|
const { i18n } = props;
|
|
return (
|
|
<Button className="FunButton">
|
|
<span className="FunButton__Icon FunButton__Icon--FunPicker" />
|
|
<VisuallyHidden>{i18n('icu:FunButton__Label--FunPicker')}</VisuallyHidden>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Emoji Picker Button
|
|
*/
|
|
|
|
export type FunEmojiPickerButtonProps = Readonly<{
|
|
selectedEmoji?: EmojiVariantKey | null;
|
|
i18n: LocalizerType;
|
|
}>;
|
|
|
|
export function FunEmojiPickerButton(
|
|
props: FunEmojiPickerButtonProps
|
|
): JSX.Element {
|
|
const { i18n } = props;
|
|
|
|
const selectedEmojiData = useMemo(() => {
|
|
if (props.selectedEmoji == null) {
|
|
return null;
|
|
}
|
|
|
|
const variantKey = props.selectedEmoji;
|
|
const variant = getEmojiVariantByKey(variantKey);
|
|
const parentKey = getEmojiParentKeyByVariantKey(variantKey);
|
|
const parent = getEmojiParentByKey(parentKey);
|
|
return { variant, parent };
|
|
}, [props.selectedEmoji]);
|
|
|
|
return (
|
|
<Button className="FunButton">
|
|
{selectedEmojiData ? (
|
|
<FunStaticEmoji
|
|
role="img"
|
|
size={20}
|
|
aria-label={selectedEmojiData.parent.englishShortNameDefault}
|
|
emoji={selectedEmojiData.variant}
|
|
/>
|
|
) : (
|
|
<span className="FunButton__Icon FunButton__Icon--EmojiPicker" />
|
|
)}
|
|
<VisuallyHidden>
|
|
{i18n('icu:FunButton__Label--EmojiPicker')}
|
|
</VisuallyHidden>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Sticker Picker Button
|
|
*/
|
|
|
|
export type FunStickerPickerButtonProps = Readonly<{
|
|
i18n: LocalizerType;
|
|
}>;
|
|
|
|
export function FunStickerPickerButton(
|
|
props: FunStickerPickerButtonProps
|
|
): JSX.Element {
|
|
const { i18n } = props;
|
|
return (
|
|
<Button className="FunButton">
|
|
<span className="FunButton__Icon FunButton__Icon--StickerPicker" />
|
|
<VisuallyHidden>
|
|
{i18n('icu:FunButton__Label--StickerPicker')}
|
|
</VisuallyHidden>
|
|
</Button>
|
|
);
|
|
}
|