import * as React from 'react'; import { Editor } from 'draft-js'; import { EmojiButton, EmojiPickDataType, Props as EmojiButtonProps, } from './emoji/EmojiButton'; import { Props as StickerButtonProps, StickerButton, } from './stickers/StickerButton'; import { CompositionInput, InputApi, Props as CompositionInputProps, } from './CompositionInput'; import { countStickers } from './stickers/lib'; import { LocalizerType } from '../types/Util'; export type OwnProps = { readonly i18n: LocalizerType; readonly compositionApi?: React.MutableRefObject<{ focusInput: () => void; setDisabled: (disabled: boolean) => void; reset: InputApi['reset']; resetEmojiResults: InputApi['resetEmojiResults']; }>; }; export type Props = CompositionInputProps & Pick< EmojiButtonProps, 'onPickEmoji' | 'onSetSkinTone' | 'recentEmojis' | 'skinTone' > & Pick< StickerButtonProps, | 'knownPacks' | 'receivedPacks' | 'installedPacks' | 'blessedPacks' | 'recentStickers' | 'clearInstalledStickerPack' | 'onClickAddPack' | 'onPickSticker' | 'clearShowIntroduction' | 'showPickerHint' | 'clearShowPickerHint' > & OwnProps; // tslint:disable-next-line max-func-body-length export const CompositionArea = ({ i18n, // CompositionInput onDirtyChange, onSubmit, compositionApi, onEditorSizeChange, onEditorStateChange, // EmojiButton onPickEmoji, onSetSkinTone, recentEmojis, skinTone, // StickerButton knownPacks, receivedPacks, installedPacks, blessedPacks, recentStickers, clearInstalledStickerPack, onClickAddPack, onPickSticker, clearShowIntroduction, showPickerHint, clearShowPickerHint, }: Props) => { const [disabled, setDisabled] = React.useState(false); const editorRef = React.useRef(null); const inputApiRef = React.useRef(); const handleForceSend = React.useCallback( () => { if (inputApiRef.current) { inputApiRef.current.submit(); } }, [inputApiRef] ); const focusInput = React.useCallback( () => { if (editorRef.current) { editorRef.current.focus(); } }, [editorRef] ); const withStickers = countStickers({ knownPacks, blessedPacks, installedPacks, receivedPacks, }) > 0; if (compositionApi) { compositionApi.current = { focusInput, setDisabled, reset: () => { if (inputApiRef.current) { inputApiRef.current.reset(); } }, resetEmojiResults: () => { if (inputApiRef.current) { inputApiRef.current.resetEmojiResults(); } }, }; } const insertEmoji = React.useCallback( (e: EmojiPickDataType) => { if (inputApiRef.current) { inputApiRef.current.insertEmoji(e); onPickEmoji(e); } }, [inputApiRef, onPickEmoji] ); return (
{withStickers ? (
) : null}
); };