TableSettings

index.js

import React from "react";
import Settings from "@material-ui/icons/Settings";
import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader";
import Checkbox from "@material-ui/core/Checkbox";
import {observer} from "mobx-react-lite";

const TableSettings = ({fields, onSwitch}) => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  
  const handleClose = () => {
    setAnchorEl(null);
  };
  
  return (
    <>
      <IconButton
        edge="end"
        aria-label="more"
        aria-controls="products-table-settings-more"
        aria-haspopup="true"
        onClick={handleClick}
      >
        <Settings />
      </IconButton>
      <Menu
        id="products-table-settings"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        MenuListProps={{
          subheader: (
            <ListSubheader
              disableSticky
              component="div"
              id="nested-list-subheader"
            >
              Настройки таблицы
            </ListSubheader>
          )
        }}
      >
        {fields.map(f => (
          <ListItem
            key={f}
            dense
            button
            disabled={f.hold}
            role={undefined}
            onClick={() => onSwitch(f)}
          >
            <ListItemIcon>
              <Checkbox
                edge="start"
                checked={f.active}
                tabIndex={-1}
                disableRipple
                inputProps={{ 'aria-labelledby': f }}
              />
            </ListItemIcon>
            <ListItemText primary={f.label} />
          </ListItem>
        ))}
      </Menu>
    </>
  )
}

export default observer(TableSettings)