github.com/minio/console@v1.4.1/web-app/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 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, { Fragment } from "react";
    18  import { DropdownSelector, SelectorType } from "mds";
    19  import styled from "styled-components";
    20  import get from "lodash/get";
    21  
    22  interface IInputUnitBox {
    23    id: string;
    24    unitSelected: string;
    25    unitsList: SelectorType[];
    26    disabled?: boolean;
    27    onUnitChange?: (newValue: string) => void;
    28  }
    29  
    30  const UnitMenuButton = styled.button(({ theme }) => ({
    31    border: `1px solid ${get(theme, "borderColor", "#E2E2E2")}`,
    32    borderRadius: 3,
    33    color: get(theme, "secondaryText", "#5B5C5C"),
    34    backgroundColor: get(theme, "boxBackground", "#FBFAFA"),
    35    fontSize: 12,
    36  }));
    37  
    38  const InputUnitMenu = ({
    39    id,
    40    unitSelected,
    41    unitsList,
    42    disabled = false,
    43    onUnitChange,
    44  }: IInputUnitBox) => {
    45    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    46    const open = Boolean(anchorEl);
    47    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    48      setAnchorEl(event.currentTarget);
    49    };
    50    const handleClose = (newUnit: string) => {
    51      setAnchorEl(null);
    52      if (newUnit !== "" && onUnitChange) {
    53        onUnitChange(newUnit);
    54      }
    55    };
    56  
    57    return (
    58      <Fragment>
    59        <UnitMenuButton
    60          id={`${id}-button`}
    61          aria-controls={`${id}-menu`}
    62          aria-haspopup="true"
    63          aria-expanded={open ? "true" : undefined}
    64          onClick={handleClick}
    65          disabled={disabled}
    66          type={"button"}
    67        >
    68          {unitSelected}
    69        </UnitMenuButton>
    70        <DropdownSelector
    71          id={"upload-main-menu"}
    72          options={unitsList}
    73          selectedOption={""}
    74          onSelect={(value) => handleClose(value)}
    75          hideTriggerAction={() => {
    76            handleClose("");
    77          }}
    78          open={open}
    79          anchorEl={anchorEl}
    80          anchorOrigin={"end"}
    81        />
    82      </Fragment>
    83    );
    84  };
    85  
    86  export default InputUnitMenu;