react-native-gifted-chat/lib/InputToolbar.js

The most complete chat UI for React Native

import React, { useCallback, useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import { Actions } from './Actions';
import { Color } from './Color';
import { ReplyPreview } from './components/ReplyPreview';
import { Composer } from './Composer';
import { useColorScheme } from './hooks/useColorScheme';
import { Send } from './Send';
import { renderComponentOrElement } from './utils';
export function InputToolbar(props) {
    const { renderActions, onPressActionButton, renderComposer, renderSend, renderAccessory, actions, actionSheetOptionTintColor, icon, wrapperStyle, containerStyle, replyMessage, onClearReply, renderReplyPreview: renderReplyPreviewProp, replyPreviewContainerStyle, replyPreviewTextStyle, } = props;
    const colorScheme = useColorScheme();
    const containerStyles = useMemo(() => [
        styles.container,
        colorScheme === 'dark' && styles.container_dark,
        containerStyle,
    ], [colorScheme, containerStyle]);
    const primaryStyles = useMemo(() => [
        styles.primary,
        props.primaryStyle,
    ], [props.primaryStyle]);
    const actionsFragment = useMemo(() => {
        const actionsProps = {
            onPressActionButton,
            actions,
            actionSheetOptionTintColor,
            icon,
            wrapperStyle,
            containerStyle,
        };
        if (renderActions)
            return renderComponentOrElement(renderActions, actionsProps);
        if (onPressActionButton)
            return <Actions {...actionsProps}/>;
        return null;
    }, [
        renderActions,
        onPressActionButton,
        actions,
        actionSheetOptionTintColor,
        icon,
        wrapperStyle,
        containerStyle,
    ]);
    const composerFragment = useMemo(() => {
        const composerProps = props;
        if (renderComposer)
            return renderComponentOrElement(renderComposer, composerProps);
        return <Composer {...composerProps}/>;
    }, [renderComposer, props]);
    const sendFragment = useMemo(() => {
        if (renderSend)
            return renderComponentOrElement(renderSend, props);
        return <Send {...props}/>;
    }, [renderSend, props]);
    const accessoryFragment = useMemo(() => {
        if (!renderAccessory)
            return null;
        return renderComponentOrElement(renderAccessory, props);
    }, [renderAccessory, props]);
    const handleClearReply = useCallback(() => {
        onClearReply?.();
    }, [onClearReply]);
    const replyPreviewFragment = useMemo(() => {
        if (!replyMessage)
            return null;
        const replyPreviewProps = {
            replyMessage,
            onClearReply: handleClearReply,
            containerStyle: replyPreviewContainerStyle,
            textStyle: replyPreviewTextStyle,
        };
        if (renderReplyPreviewProp)
            return renderComponentOrElement(renderReplyPreviewProp, replyPreviewProps);
        return <ReplyPreview {...replyPreviewProps}/>;
    }, [
        replyMessage,
        handleClearReply,
        renderReplyPreviewProp,
        replyPreviewContainerStyle,
        replyPreviewTextStyle,
    ]);
    return (<View style={containerStyles}>
      {replyPreviewFragment}
      <View style={primaryStyles}>
        {actionsFragment}
        {composerFragment}
        {sendFragment}
      </View>
      {accessoryFragment}
    </View>);
}
const styles = StyleSheet.create({
    container: {
        borderTopWidth: StyleSheet.hairlineWidth,
        borderTopColor: Color.defaultColor,
        backgroundColor: Color.white,
    },
    container_dark: {
        backgroundColor: '#1a1a1a',
        borderTopColor: '#444',
    },
    primary: {
        flexDirection: 'row',
        alignItems: 'flex-end',
    },
});
//# sourceMappingURL=InputToolbar.js.map