github.com/minio/console@v1.4.1/web-app/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2022 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React from "react";
    18  import { Box, Button, ClosePanelIcon } from "mds";
    19  
    20  interface IDetailsListPanel {
    21    open: boolean;
    22    className?: string;
    23    closePanel: () => void;
    24    children: React.ReactNode;
    25  }
    26  
    27  const DetailsListPanel = ({
    28    open,
    29    closePanel,
    30    className = "",
    31    children,
    32  }: IDetailsListPanel) => {
    33    return (
    34      <Box
    35        id={"details-panel"}
    36        sx={{
    37          borderColor: "#EAEDEE",
    38          borderWidth: 0,
    39          borderStyle: "solid",
    40          borderRadius: 3,
    41          borderBottomLeftRadius: 0,
    42          borderBottomRightRadius: 0,
    43          width: 0,
    44          transitionDuration: "0.3s",
    45          overflowX: "hidden",
    46          overflowY: "auto",
    47          position: "relative",
    48          opacity: 0,
    49          marginLeft: -1,
    50          "&.open": {
    51            width: 300,
    52            minWidth: 300,
    53            borderLeftWidth: 1,
    54            opacity: 1,
    55          },
    56          "@media (max-width: 799px)": {
    57            "&.open": {
    58              width: "100%",
    59              minWidth: "100%",
    60              borderLeftWidth: 0,
    61            },
    62          },
    63        }}
    64        className={`${open ? "open" : ""} ${className}`}
    65      >
    66        <Button
    67          variant={"text"}
    68          id={"close-details-list"}
    69          onClick={closePanel}
    70          icon={<ClosePanelIcon />}
    71          sx={{
    72            position: "absolute",
    73            right: 5,
    74            top: 18,
    75            padding: 0,
    76            height: 14,
    77            "&:hover:not(:disabled)": {
    78              backgroundColor: "transparent",
    79            },
    80          }}
    81        />
    82        {children}
    83      </Box>
    84    );
    85  };
    86  
    87  export default DetailsListPanel;