mattermost-mobile/app/components/post_draft/quick_actions/quick_actions.tsx

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react';
import {StyleSheet, View} from 'react-native';

import BoRQuickAction from '@components/post_draft/quick_actions/bor_quick_action';
import {Screens} from '@constants';

import AttachmentAction from './attachment_quick_action';
import EmojiAction from './emoji_quick_action';
import InputAction from './input_quick_action';
import PostPriorityAction from './post_priority_action';

import type {AvailableScreens} from '@typings/screens/navigation';

type Props = {
    testID?: string;
    canUploadFiles: boolean;
    fileCount: number;
    isPostPriorityEnabled: boolean;
    isBoREnabled: boolean;
    canShowPostPriority?: boolean;
    canShowSlashCommands?: boolean;
    canShowEmojiPicker?: boolean;
    maxFileCount: number;
    location?: AvailableScreens;

    // Draft Handler
    value: string;
    updateValue: (value: string) => void;
    addFiles: (file: FileInfo[]) => void;
    postPriority: PostPriority;
    updatePostPriority: (postPriority: PostPriority) => void;
    postBoRConfig?: PostBoRConfig;
    updatePostBoRStatus?: (config: PostBoRConfig) => void;
    focus: () => void;
}

export const QUICK_ACTIONS_HEIGHT = 44;

const style = StyleSheet.create({
    quickActionsContainer: {
        display: 'flex',
        flexDirection: 'row',
        height: QUICK_ACTIONS_HEIGHT,
        marginLeft: 8,
    },
});

export default function QuickActions({
    testID,
    canUploadFiles,
    value,
    fileCount,
    isPostPriorityEnabled,
    isBoREnabled,
    canShowSlashCommands = true,
    canShowPostPriority,
    canShowEmojiPicker = true,
    maxFileCount,
    updateValue,
    addFiles,
    postPriority,
    updatePostPriority,
    focus,
    updatePostBoRStatus,
    postBoRConfig,
    location,
}: Props) {
    const atDisabled = value[value.length - 1] === '@';
    const slashDisabled = value.length > 0;
    const showBoRAction = isBoREnabled && updatePostBoRStatus && location === Screens.CHANNEL;

    const atInputActionTestID = `${testID}.at_input_action`;
    const slashInputActionTestID = `${testID}.slash_input_action`;
    const emojiActionTestID = `${testID}.emoji_action`;
    const attachmentActionTestID = `${testID}.attachment_action`;
    const postPriorityActionTestID = `${testID}.post_priority_action`;
    const borPriorityActionTestID = `${testID}.bor_action`;

    const uploadProps = {
        disabled: !canUploadFiles,
        fileCount,
        maxFileCount,
        maxFilesReached: fileCount >= maxFileCount,
        onUploadFiles: addFiles,
    };

    return (
        <View
            testID={testID}
            style={style.quickActionsContainer}
        >
            <AttachmentAction
                testID={attachmentActionTestID}
                {...uploadProps}
            />
            <InputAction
                testID={atInputActionTestID}
                disabled={atDisabled}
                inputType='at'
                updateValue={updateValue}
                focus={focus}
            />
            {canShowSlashCommands && (
                <InputAction
                    testID={slashInputActionTestID}
                    disabled={slashDisabled}
                    inputType='slash'
                    updateValue={updateValue}
                    focus={focus}
                />
            )}
            {canShowEmojiPicker && (
                <EmojiAction
                    testID={emojiActionTestID}
                />
            )}
            {isPostPriorityEnabled && canShowPostPriority && (
                <PostPriorityAction
                    testID={postPriorityActionTestID}
                    postPriority={postPriority}
                    updatePostPriority={updatePostPriority}
                />
            )}
            {showBoRAction &&
                <BoRQuickAction
                    testId={borPriorityActionTestID}
                    postBoRConfig={postBoRConfig}
                    updatePostBoRStatus={updatePostBoRStatus}
                />
            }
        </View>
    );
}