signal-desktop/ts/state/smart/CompositionTextArea.tsx
Jamie Kyle 27b55e472d
Refactor smart components
Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
2024-03-13 13:44:13 -07:00

53 lines
1.7 KiB
TypeScript

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { memo } from 'react';
import { useSelector } from 'react-redux';
import type { CompositionTextAreaProps } from '../../components/CompositionTextArea';
import { CompositionTextArea } from '../../components/CompositionTextArea';
import { getIntl, getPlatform } from '../selectors/user';
import { useEmojisActions as useEmojiActions } from '../ducks/emojis';
import { useItemsActions } from '../ducks/items';
import { getPreferredBadgeSelector } from '../selectors/badges';
import { useComposerActions } from '../ducks/composer';
import { getTextFormattingEnabled } from '../selectors/items';
export type SmartCompositionTextAreaProps = Pick<
CompositionTextAreaProps,
| 'bodyRanges'
| 'draftText'
| 'placeholder'
| 'onChange'
| 'onScroll'
| 'onSubmit'
| 'theme'
| 'maxLength'
| 'whenToShowRemainingCount'
| 'scrollerRef'
>;
export const SmartCompositionTextArea = memo(function SmartCompositionTextArea(
props: SmartCompositionTextAreaProps
) {
const i18n = useSelector(getIntl);
const platform = useSelector(getPlatform);
const { onUseEmoji: onPickEmoji } = useEmojiActions();
const { onSetSkinTone } = useItemsActions();
const { onTextTooLong } = useComposerActions();
const getPreferredBadge = useSelector(getPreferredBadgeSelector);
const isFormattingEnabled = useSelector(getTextFormattingEnabled);
return (
<CompositionTextArea
{...props}
getPreferredBadge={getPreferredBadge}
i18n={i18n}
isFormattingEnabled={isFormattingEnabled}
onPickEmoji={onPickEmoji}
onSetSkinTone={onSetSkinTone}
onTextTooLong={onTextTooLong}
platform={platform}
/>
);
});