go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/gitiles/components/commit_table/commit_table_head.tsx (about)

     1  // Copyright 2023 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  import { ChevronRight, ExpandMore } from '@mui/icons-material';
    16  import { IconButton, TableCell, TableHead, TableRow } from '@mui/material';
    17  import { ReactNode } from 'react';
    18  import { useHotkeys } from 'react-hotkeys-hook';
    19  
    20  import { useDefaultExpandedState } from './context';
    21  
    22  export interface CommitTableHeadProps {
    23    readonly toggleExpandHotkey?: string;
    24    readonly children: ReactNode;
    25  }
    26  
    27  export function CommitTableHead({
    28    toggleExpandHotkey,
    29    children,
    30  }: CommitTableHeadProps) {
    31    const [defaultExpanded, setDefaultExpanded] = useDefaultExpandedState();
    32    useHotkeys(
    33      toggleExpandHotkey ? [toggleExpandHotkey] : [],
    34      () => setDefaultExpanded((expanded) => !expanded),
    35      [setDefaultExpanded],
    36    );
    37  
    38    return (
    39      <TableHead
    40        sx={{
    41          position: 'sticky',
    42          top: 0,
    43          backgroundColor: 'white',
    44          zIndex: 2,
    45        }}
    46      >
    47        <TableRow
    48          sx={{
    49            '& > th': {
    50              whiteSpace: 'nowrap',
    51            },
    52          }}
    53        >
    54          <TableCell width="1px">
    55            <IconButton
    56              aria-label="toggle-all-rows"
    57              size="small"
    58              onClick={() => setDefaultExpanded(!defaultExpanded)}
    59              title={
    60                toggleExpandHotkey
    61                  ? `Press "${toggleExpandHotkey}" to toggle all entries.`
    62                  : ''
    63              }
    64            >
    65              {defaultExpanded ? <ExpandMore /> : <ChevronRight />}
    66            </IconButton>
    67          </TableCell>
    68          {children}
    69        </TableRow>
    70      </TableHead>
    71    );
    72  }