Как мне добавить заголовок и кнопку закрытия в верхнюю часть меню (над 1-м элементом в меню кнопок при нажатии в material-ui?

Question

У меня есть меню пиктограмм, которое содержит список пунктов меню с флажками. Я хочу добавить заголовок в меню, когда пользователь щелкает значок и открывает раскрывающийся список в верхней части раскрывающегося списка с помощью кнопки закрытия.

В настоящее время я использую 1-й элемент меню и отключаю его , переопределить стиль и отобразить заголовок. Я действительно ненавижу это, потому что это не так, как надо. Теперь я хочу добавить кнопку закрытия с правой стороны от заголовка, но, поскольку элемент меню отключен, я не могу этого сделать.

Вот мой код:

    <DropdownButtonMenu
        id="customized-menu"
        anchorEl={anchorEl}
        keepMounted
        PaperProps={{
            style: {
                maxHeight: 225,
            },
        }}
        open={Boolean(anchorEl)}
        onClose={handleClose}
    >
        <TitleMenuItem disabled={true} className='classes.title'>
            <Typography variant="subtitle1" >
                {menuTitle}
            </Typography>
            //**NEED TO ADD A CLOSE BUTTON HERE AND NOT BE DISABLED
        </TitleMenuItem>
        {formColumns.map(colobj => (
            <CheckboxMenuItem
                key={`ckb-${colobj.name}`}
                className={classes.SearchMenuItem}
                selected={false}
                onClick={handleClose} >
                <Checkbox
                    checked={GetChecked(colobj)}
                    onChange={handleCheckboxClick} //Need to add 1,2 or 3 as parameter to this onChange event
                    className={classes.searchColumnCheckbox}
                    value={`${colobj.name}`} />
                    {colobj.label}
            </CheckboxMenuItem>
        ))}
    </DropdownButtonMenu>

I создал TitleMenuItem, создав подкласс MenuItem, как показано ниже:

const TitleMenuItem = styled(MuiMenuItem)({
    disabled: props => props.opacity ? '1.0' : '1.0',
    color: props => props.color ? '#0047ab' : '#0047ab',
    margin: '0px',
    padding: '0px',
    paddingLeft: '8px',
});

И сделал то же самое с DropDownButtonMenu и CheckboxMenuItem:

const DropdownButtonMenu = withStyles({
    paper: {
        border: "1px solid #d3d4d5",
        muiListPadding: {
            marginTop: '0px',
            paddingTop: '0px',

    }
    },
})(props => (
    <Menu
        elevation={0}
        getContentAnchorEl={null}
        anchorOrigin={{
            vertical: "bottom",
            horizontal: "center"
        }}
        transformOrigin={{
            vertical: "top",
            horizontal: "center"
        }}
        {...props}
    />
));

const CheckboxMenuItem = withStyles(theme => ({
    root: {
        "&:focus": {
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.common.white,
            "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
                color: theme.palette.common.white
            }
        },
        paddingTop: "2px",
        paddingBottom: "2px",
        paddingRight: "0px",
        paddingLeft: "4px",
        margin: "2px",
        fontSize: "0.8rem",
        lineHeight: "1",
    }
}))(MenuItem);

Я ошибаюсь в этом? Все, что мне нужно, это заголовок в раскрывающемся списке меню с кнопкой закрытия. Любая помощь будет принята с благодарностью!

Answer 1

Чтобы сохранить допустимую структуру, вы хотите, чтобы ваш элемент заголовка / кнопки отображал элемент <li> (поскольку Menu отображает его внутри элемента <ul>). MenuItem отображает <li>, но он также делает некоторые вещи, которые вам не нужны - главное, что он отображает весь <li> как кнопку , используя опора button для ListItem.

Чтобы не обрабатывать весь <li> как кнопку, я бы использовал ListItem в качестве отправной точки (что обеспечивает разумную отправную точку для стилизации).

Мое другое предложение - это немного взлома, который зависит от деталей реализации, которые могут измениться в будущем. Когда открывается Menu, он пытается сфокусироваться на первом неотключенном пункте меню (есть способы изменить эту функциональность, но по большей части это желательно). Он определяет, отключен ли пункт меню, ищет disabled prop в непосредственных дочерних элементах Menu. Поэтому я предлагаю дать вашему элементу заголовка опору disabled, но чтобы ваш пользовательский ListItem игнорировал эту опору.

Это будет выглядеть примерно так:

const IgnoreDisabledListItem = React.forwardRef(function IgnoreDisabledListItem(
  { disabled, ...other },
  ref
) {
  return <ListItem {...other} ref={ref} />;
});

и затем используйте его позже, как показано ниже:

        <IgnoreDisabledListItem disabled>
          My Title{" "}
          <IconButton onClick={handleClose}>
            <CloseIcon />
          </IconButton>
        </IgnoreDisabledListItem>

Указание свойства disabled в JSX предотвратит передачу фокуса этому элементу Menu, но IgnoreDisabledListItem предотвратит, что свойство disabled будет иметь любые другие эффекты.

Вот полный рабочий пример:

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import ListItem from "@material-ui/core/ListItem";
import CloseIcon from "@material-ui/icons/Close";
import IconButton from "@material-ui/core/IconButton";

const IgnoreDisabledListItem = React.forwardRef(function IgnoreDisabledListItem(
  { disabled, ...other },
  ref
) {
  return <ListItem {...other} ref={ref} />;
});
export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <IgnoreDisabledListItem disabled>
          My Title{" "}
          <IconButton onClick={handleClose}>
            <CloseIcon />
          </IconButton>
        </IgnoreDisabledListItem>
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

Изменить заголовок и кнопку в первом пункте меню