<commit_before>import React, { useEffect, useState, useCallback } from 'react';
import { c } from 'ttag';

import { TableBody, Checkbox, TableRowBusy, useActiveBreakpoint, TableRowSticky, TableCell } from 'react-components';

import ItemRow from './ItemRow';
import useDriveDragMove from '../../hooks/drive/useDriveDragMove';
import { FileBrowserItem } from './interfaces';
import FolderContextMenu from './FolderContextMenu';

interface Props {
    loading?: boolean;
    scrollAreaRef: React.RefObject<HTMLDivElement>;
    shareId: string;
    caption?: string;
    contents: FileBrowserItem[];
    selectedItems: FileBrowserItem[];
    isTrash?: boolean;
    onToggleItemSelected: (item: string) => void;
    onItemClick?: (item: FileBrowserItem) => void;
    onShiftClick: (item: string) => void;
    clearSelections: () => void;
    onToggleAllSelected: () => void;
}

const FileBrowser = ({
    loading,
    caption,
    contents,
    shareId,
    scrollAreaRef,
    selectedItems,
    isTrash = false,
    onToggleItemSelected,
    onToggleAllSelected,
    onItemClick,
    clearSelections,
    onShiftClick,
}: Props) => {
    const [secondaryActionActive, setSecondaryActionActive] = useState(false);
    const [isContextMenuOpen, setIsOpen] = useState(false);
    const [contextMenuPosition, setContextMenuPosition] = useState<{ top: number; left: number }>();
    const { isDesktop } = useActiveBreakpoint();
    const getDragMoveControls = useDriveDragMove(shareId, selectedItems, clearSelections);

    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            const newSecondaryActionIsActive = e.shiftKey || e.metaKey || e.ctrlKey;
            if (newSecondaryActionIsActive !== secondaryActionActive) {
                setSecondaryActionActive(newSecondaryActionIsActive);
            }
        };

        window.addEventListener('keydown', handleKeyDown);
        window.addEventListener('keyup', handleKeyDown);

        return () => {
            window.removeEventListener('keydown', handleKeyDown);
            window.addEventListener('keyup', handleKeyDown);
        };
    }, [secondaryActionActive]);

    const openContextMenu = useCallback(() => {
        setIsOpen(true);
    }, []);

    const closeContextMenu = useCallback(() => {
        setIsOpen(false);
    }, []);

    const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
        e.stopPropagation();
        e.preventDefault();

        clearSelections();

        if (isContextMenuOpen) {
            closeContextMenu();
        }

        setContextMenuPosition({ top: e.clientY, left: e.clientX });
    };

    const allSelected = !!contents.length && contents.length === selectedItems.length;
    const modifiedHeader = isTrash ? c('TableHeader').t`Deleted` : c('TableHeader').t`Modified`;
    const colSpan = 4 + Number(isDesktop) + Number(isTrash);

    return (
        <div
            role="presentation"
            ref={scrollAreaRef}
            className="flex flex-item-fluid scroll-if-needed"
            onClick={() => {
                // Close folder context menu
                if (isContextMenuOpen) {
                    closeContextMenu();
                }
                clearSelections();
            }}
            onContextMenu={handleContextMenu}
        >
            <table className="pm-simple-table pm-simple-table--isHoverable pd-fb-table noborder border-collapse">
                <caption className="sr-only">{caption}</caption>
                <thead>
                    <TableRowSticky scrollAreaRef={scrollAreaRef}>
                        <TableCell type="header" scope="col">
                            <div
                                role="presentation"
                                key="select-all"
                                className="flex"
                                onClick={(e) => e.stopPropagation()}
                            >
                                <Checkbox
                                    className="increase-surface-click"
                                    disabled={!contents.length}
                                    checked={allSelected}
                                    onChange={onToggleAllSelected}
                                />
                            </div>
                        </TableCell>
                        <TableCell type="header" scope="col">
                            <div className="ellipsis">{c('TableHeader').t`Name`}</div>
                        </TableCell>
                        {isTrash && (
                            <TableCell type="header" scope="col" className="w25">{c('TableHeader')
                                .t`Location`}</TableCell>
                        )}
                        <TableCell type="header" scope="col" className={isDesktop ? 'w10' : 'w15'}>{c('TableHeader')
                            .t`Type`}</TableCell>
                        {isDesktop && (<commit_msg>[DRVWEB-549] Context menu disabledre for header.<commit_after>import React, { useEffect, useState, useCallback } from 'react';
import { c } from 'ttag';

import { TableBody, Checkbox, TableRowBusy, useActiveBreakpoint, TableRowSticky, TableCell } from 'react-components';

import ItemRow from './ItemRow';
import useDriveDragMove from '../../hooks/drive/useDriveDragMove';
import { FileBrowserItem } from './interfaces';
import FolderContextMenu from './FolderContextMenu';

interface Props {
    loading?: boolean;
    scrollAreaRef: React.RefObject<HTMLDivElement>;
    shareId: string;
    caption?: string;
    contents: FileBrowserItem[];
    selectedItems: FileBrowserItem[];
    isTrash?: boolean;
    onToggleItemSelected: (item: string) => void;
    onItemClick?: (item: FileBrowserItem) => void;
    onShiftClick: (item: string) => void;
    clearSelections: () => void;
    onToggleAllSelected: () => void;
}

const FileBrowser = ({
    loading,
    caption,
    contents,
    shareId,
    scrollAreaRef,
    selectedItems,
    isTrash = false,
    onToggleItemSelected,
    onToggleAllSelected,
    onItemClick,
    clearSelections,
    onShiftClick,
}: Props) => {
    const [secondaryActionActive, setSecondaryActionActive] = useState(false);
    const [isContextMenuOpen, setIsOpen] = useState(false);
    const [contextMenuPosition, setContextMenuPosition] = useState<{ top: number; left: number }>();
    const { isDesktop } = useActiveBreakpoint();
    const getDragMoveControls = useDriveDragMove(shareId, selectedItems, clearSelections);

    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            const newSecondaryActionIsActive = e.shiftKey || e.metaKey || e.ctrlKey;
            if (newSecondaryActionIsActive !== secondaryActionActive) {
                setSecondaryActionActive(newSecondaryActionIsActive);
            }
        };

        window.addEventListener('keydown', handleKeyDown);
        window.addEventListener('keyup', handleKeyDown);

        return () => {
            window.removeEventListener('keydown', handleKeyDown);
            window.addEventListener('keyup', handleKeyDown);
        };
    }, [secondaryActionActive]);

    const openContextMenu = useCallback(() => {
        setIsOpen(true);
    }, []);

    const closeContextMenu = useCallback(() => {
        setIsOpen(false);
    }, []);

    const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
        e.stopPropagation();
        e.preventDefault();

        clearSelections();

        if (isContextMenuOpen) {
            closeContextMenu();
        }

        setContextMenuPosition({ top: e.clientY, left: e.clientX });
    };

    const allSelected = !!contents.length && contents.length === selectedItems.length;
    const modifiedHeader = isTrash ? c('TableHeader').t`Deleted` : c('TableHeader').t`Modified`;
    const colSpan = 4 + Number(isDesktop) + Number(isTrash);

    return (
        <div
            role="presentation"
            ref={scrollAreaRef}
            className="flex flex-item-fluid scroll-if-needed"
            onClick={() => {
                // Close folder context menu
                if (isContextMenuOpen) {
                    closeContextMenu();
                }
                clearSelections();
            }}
            onContextMenu={handleContextMenu}
        >
            <table className="pm-simple-table pm-simple-table--isHoverable pd-fb-table noborder border-collapse">
                <caption className="sr-only">{caption}</caption>
                <thead onContextMenu={(e) => e.stopPropagation()}>
                    <TableRowSticky scrollAreaRef={scrollAreaRef}>
                        <TableCell type="header" scope="col">
                            <div
                                role="presentation"
                                key="select-all"
                                className="flex"
                                onClick={(e) => e.stopPropagation()}
                            >
                                <Checkbox
                                    className="increase-surface-click"
                                    disabled={!contents.length}
                                    checked={allSelected}
                                    onChange={onToggleAllSelected}
                                />
                            </div>
                        </TableCell>
                        <TableCell type="header" scope="col">
                            <div className="ellipsis">{c('TableHeader').t`Name`}</div>
                        </TableCell>
                        {isTrash && (
                            <TableCell type="header" scope="col" className="w25">{c('TableHeader')
                                .t`Location`}</TableCell>
                        )}
                        <TableCell type="header" scope="col" className={isDesktop ? 'w10' : 'w15'}>{c('TableHeader')
                            .t`Type`}</TableCell>
                        {isDesktop && (
{'fraction_non_alphanumeric': 0.11710631494804156, 'fraction_numerical': 0.0016986410871302957, 'mean_word_length': 1.8778033352501438, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 76, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2652917', 'n_tokens_mistral': 2591, 'n_tokens_neox': 2481, 'n_words': 475}