Программное открытие и закрытие

В библиотеке Ant Design управление состоянием отображения компонентов, таких как модальные окна, выпадающие меню, уведомления и панели, является ключевым аспектом построения интерактивного интерфейса. Основной принцип заключается в контроле видимости через свойства компонентов и реактивное управление состоянием через React Hooks.

Модальные окна (Modal)

Компонент Modal предоставляет встроенные методы для открытия и закрытия диалоговых окон. Контроль осуществляется через проп visible (в AntD v4 и выше — open):

import React, { useState } from 'react';
import { Modal, Button } from 'antd';

const ExampleModal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const showModal = () => setIsOpen(true);
  const handleOk = () => setIsOpen(false);
  const handleCancel = () => setIsOpen(false);

  return (
    <>
      <Button type="primary" onCl ick={showModal}>
        Открыть окно
      </Button>
      <Modal
        title="Пример модального окна"
        open={isOpen}
        onOk={handleOk}
        onCan cel={handleCancel}
      >
        <p>Содержимое модального окна.</p>
      </Modal>
    </>
  );
};

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

  • open (или visible в старых версиях) — булевое значение, управляющее состоянием компонента.
  • onOk и onCancel — колбэки для закрытия окна, позволяющие выполнять дополнительную логику.
  • Управление через состояние React обеспечивает гибкость и синхронизацию с другими элементами интерфейса.

Всплывающие уведомления (Notification)

Компонент notification не требует рендеринга через JSX. Открытие и закрытие контролируется вызовом методов open, success, error, info, warning. Закрытие можно выполнить автоматически через duration или вручную через key.

import { notification, Button } from 'antd';

const openNotification = () => {
  notification.open({
    message: 'Уведомление',
    description: 'Это пример уведомления.',
    duration: 3,
    key: 'uniqueKey'
  });
};

const closeNotification = () => {
  notification.close('uniqueKey');
};

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

  • key — уникальный идентификатор для управления конкретным уведомлением.
  • duration — время автоматического закрытия в секундах.
  • Методы destroy позволяют закрыть все уведомления одновременно.

Выпадающие меню и поповеры (Dropdown, Popover)

Компоненты Dropdown и Popover поддерживают управление открытием через проп open и колбэк onOpenChange:

import { Dropdown, Button, Menu, Popover } from 'antd';

const menu = (
  <Menu>
    <Menu.Item key="1">Элемент 1</Menu.Item>
    <Menu.Item key="2">Элемент 2</Menu.Item>
  </Menu>
);

const ControlledDropdown = () => {
  const [open, setOpen] = useState(false);

  return (
    <Dropdown
      overlay={menu}
      open={open}
      onOpenCha nge={(flag) => setOpen(flag)}
    >
      <Button>Меню</Button>
    </Dropdown>
  );
};

Для Popover принцип аналогичный:

const ControlledPopover = () => {
  const [open, setOpen] = useState(false);

  return (
    <Popover
      content="Пример содержимого"
      title="Заголовок"
      open={open}
      onOpenCha nge={setOpen}
    >
      <Button>Поповер</Button>
    </Popover>
  );
};

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

  • Использование контролируемого состояния (open) позволяет синхронизировать видимость с внешней логикой.
  • Колбэк onOpenChange передаёт новое состояние, что удобно для интеграции с эффектами React.

Сайдбары и панели (Drawer)

Компонент Drawer служит для создания выезжающих панелей. Управление открытием/закрытием осуществляется аналогично модальным окнам:

import { Drawer, Button } from 'antd';

const ExampleDrawer = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onCl ick={() => setOpen(true)}>Открыть панель</Button>
      <Drawer
        title="Выезжающая панель"
        placement="right"
        open={open}
        onCl ose={() => setOpen(false)}
      >
        <p>Содержимое панели</p>
      </Drawer>
    </>
  );
};

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

  • placement — направление выезда панели (left, right, top, bottom).
  • onClose обеспечивает реактивное закрытие и может использоваться для сохранения состояния или отмены изменений.
  • Контролируемое состояние open позволяет интегрировать панель с другими компонентами.

Управление несколькими компонентами одновременно

Часто требуется синхронно открывать или закрывать несколько элементов интерфейса. Для этого используется объект состояния:

const [state, setState] = useState({
  modalOpen: false,
  drawerOpen: false,
  popoverOpen: false,
});

const openAll = () => setState({ modalOpen: true, drawerOpen: true, popoverOpen: true });
const closeAll = () => setState({ modalOpen: false, drawerOpen: false, popoverOpen: false });

Использование такой структуры упрощает управление сложными интерфейсами и предотвращает рассинхронизацию компонентов.

Динамическое создание компонентов

Для модальных окон и уведомлений библиотека поддерживает динамическое создание через API:

const modal = Modal.confirm({
  title: 'Подтверждение',
  content: 'Вы уверены?',
  onOk() { console.log('Подтверждено'); },
  onCancel() { console.log('Отменено'); },
});

// Закрытие программно
modal.destroy();

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

  • Методы Modal.info, Modal.success, Modal.error, Modal.warning, Modal.confirm создают временные экземпляры.
  • Возможность программного закрытия (destroy) полезна для таймеров и асинхронных операций.

Эти механизмы формирования открытого и закрытого состояния являются основой для построения интерактивных и отзывчивых интерфейсов в Ant Design. Грамотное управление open/visible, колбэками и состоянием React позволяет создавать сложные интерфейсы с высокой предсказуемостью поведения.

Оглавление