go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/build/components/build_table/build_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 { LinearProgress, TableCell, TableHead, TableRow } from '@mui/material';
    16  import { ReactNode } from 'react';
    17  
    18  export interface BuildTableHeadProps {
    19    readonly showLoadingBar?: boolean;
    20    readonly children: ReactNode;
    21  }
    22  
    23  export function BuildTableHead({
    24    showLoadingBar = false,
    25    children,
    26  }: BuildTableHeadProps) {
    27    return (
    28      <TableHead
    29        sx={{
    30          position: 'sticky',
    31          top: 0,
    32          backgroundColor: 'white',
    33          zIndex: 2,
    34          '& th': {
    35            border: 'none',
    36          },
    37        }}
    38      >
    39        <TableRow
    40          sx={{
    41            '& > th': {
    42              whiteSpace: 'nowrap',
    43            },
    44          }}
    45        >
    46          {children}
    47        </TableRow>
    48        <TableRow>
    49          <TableCell
    50            colSpan={100}
    51            className="divider"
    52            sx={{ '&.divider': { padding: '0' } }}
    53          >
    54            <LinearProgress
    55              value={100}
    56              variant={showLoadingBar ? 'indeterminate' : 'determinate'}
    57              color={showLoadingBar ? 'primary' : 'dividerLine'}
    58              sx={{ height: '1px' }}
    59            />
    60          </TableCell>
    61        </TableRow>
    62      </TableHead>
    63    );
    64  }