signal-desktop/ts/state/smart/CompositionTextArea.tsx
2022-11-17 16:45:19 -08:00

50 lines
1.6 KiB
TypeScript

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { useSelector } from 'react-redux';
import type { CompositionTextAreaProps } from '../../components/CompositionTextArea';
import { CompositionTextArea } from '../../components/CompositionTextArea';
import type { LocalizerType } from '../../types/I18N';
import type { StateType } from '../reducer';
import { getIntl } from '../selectors/user';
import { useActions as useEmojiActions } from '../ducks/emojis';
import { useActions as useItemsActions } from '../ducks/items';
import { getPreferredBadgeSelector } from '../selectors/badges';
import { showToast } from '../../util/showToast';
import { ToastMessageBodyTooLong } from '../../components/ToastMessageBodyTooLong';
export type SmartCompositionTextAreaProps = Pick<
CompositionTextAreaProps,
| 'draftText'
| 'placeholder'
| 'onChange'
| 'onScroll'
| 'onSubmit'
| 'theme'
| 'maxLength'
| 'whenToShowRemainingCount'
| 'scrollerRef'
>;
export function SmartCompositionTextArea(
props: SmartCompositionTextAreaProps
): JSX.Element {
const i18n = useSelector<StateType, LocalizerType>(getIntl);
const { onUseEmoji: onPickEmoji } = useEmojiActions();
const { onSetSkinTone } = useItemsActions();
const getPreferredBadge = useSelector(getPreferredBadgeSelector);
return (
<CompositionTextArea
{...props}
i18n={i18n}
onPickEmoji={onPickEmoji}
onSetSkinTone={onSetSkinTone}
getPreferredBadge={getPreferredBadge}
onTextTooLong={() => showToast(ToastMessageBodyTooLong)}
/>
);
}