Popover для сложных подсказок

Компонент Popover из библиотеки MUI представляет собой элемент интерфейса, который позволяет отображать всплывающие окна поверх других компонентов. Popover может содержать произвольный JSX-контент, что делает его удобным для сложных подсказок, диалогов с действиями или контекстных меню. Основная задача Popover — позиционирование относительно другого элемента и управление видимостью.

import React, { useState } from 'react';
import Popover from '@mui/material/Popover';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

function SimplePopover() {
  const [anchorEl, setAnchorEl] = useState(null);

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

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

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onCl ick={handleClick}>
        Открыть Popover
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onCl ose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>Это простой Popover с текстом.</Typography>
      </Popover>
    </div>
  );
}

Ключевые моменты:

  • anchorEl — элемент, относительно которого позиционируется Popover.
  • open — состояние видимости.
  • anchorOrigin и transformOrigin — определяют точку привязки и точку трансформации всплывающего окна.
  • onClose — событие закрытия, часто используется для сброса состояния.

Продвинутое использование: сложные подсказки с интерактивным контентом

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

import TextField from '@mui/material/TextField';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

function AdvancedPopover() {
  const [anchorEl, setAnchorEl] = useState(null);
  const [checked, setChecked] = useState(false);

  const handleClick = (event) => setAnchorEl(event.currentTarget);
  const handleClose = () => setAnchorEl(null);

  return (
    <>
      <Button variant="outlined" onCl ick={handleClick}>
        Настройки
      </Button>
      <Popover
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onCl ose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        <div style={{ padding: '16px', maxWidth: '300px' }}>
          <TextField label="Имя пользователя" variant="outlined" fullWidth margin="normal" />
          <FormControlLabel
            control={
              <Checkbox checked={checked} onCha nge={(e) => setChecked(e.target.checked)} />
            }
            label="Подписка на уведомления"
          />
        </div>
      </Popover>
    </>
  );
}

Особенности сложных Popover:

  • Можно использовать форма-внутри-Popover, включая TextField, Select, Checkbox и другие компоненты MUI.
  • Поповер автоматически учитывает позиционирование при появлении в пределах окна, но для сложных интерфейсов рекомендуется управлять anchorOrigin и transformOrigin.
  • Интерактивные элементы внутри Popover требуют управления локальным состоянием для правильной работы.

Управление позиционированием

Popover имеет встроенную систему позиционирования через свойства anchorOrigin и transformOrigin:

  • anchorOrigin — определяет точку привязки относительно элемента.
  • transformOrigin — определяет точку всплывающего окна, которая будет совпадать с anchorOrigin.

Примеры настроек:

anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}

Это позволяет точно контролировать, как Popover появляется относительно кнопки или любого другого элемента.

Поповер с динамическим содержимым

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

function DynamicPopover({ userId }) {
  const [anchorEl, setAnchorEl] = useState(null);
  const [userData, setUserData] = useState(null);

  const handleClick = async (event) => {
    setAnchorEl(event.currentTarget);
    const data = await fetchUserData(userId); // асинхронная функция получения данных
    setUserData(data);
  };

  return (
    <>
      <Button onCl ick={handleClick}>Показать данные пользователя</Button>
      <Popover
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onCl ose={() => setAnchorEl(null)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
      >
        <div style={{ padding: '16px' }}>
          {userData ? <Typography>{userData.name}</Typography> : <Typography>Загрузка...</Typography>}
        </div>
      </Popover>
    </>
  );
}

Поддержка закрытия по клику вне Popover

По умолчанию Popover закрывается при клике вне его области. Для более гибкого контроля можно использовать onClose с дополнительной логикой проверки:

const handleClose = (event, reason) => {
  if (reason === 'backdropClick') {
    // дополнительная логика перед закрытием
  }
  setAnchorEl(null);
};

Это позволяет реализовать условия, когда Popover не должен закрываться автоматически, например, при заполнении формы внутри него.

Закрепление Popover при прокрутке

Если нужно, чтобы Popover оставался привязанным к элементу при прокрутке страницы, MUI обеспечивает это через корректное управление anchorEl. В случае сложных интерфейсов можно использовать библиотеку Popper.js, интегрированную в Popover, для точного управления поведением.

Popover в MUI является универсальным инструментом для создания сложных интерактивных подсказок. Гибкая система позиционирования, поддержка любого JSX-контента и возможность динамического обновления делают его ключевым элементом при разработке современных интерфейсов.

Оглавление