Компоненты

import { Menu, MenuItem } from "@toimetdev/pathlogs-core";

<Menu label="Ещё" count={3} tip="Остальные действия">
  <MenuItem onClick={exportExcel}>Экспортировать в Excel</MenuItem>
  <MenuItem href="/projects/1/templates">Шаблоны задач</MenuItem>
  <MenuItem tone="danger" onClick={archive}>Архивировать проект</MenuItem>
</Menu>

Пункт с href рендерится ссылкой, а не кнопкой, — чтобы работали Ctrl+клик и открытие в новой вкладке.

Диалоги внутри меню

Самый частый сценарий: пункт меню открывает модальное окно. Наивная реализация здесь ломается.

tsx

<Menu>
  <MenuItem onClick={() => setOpen(true)}>Удалить проект</MenuItem>
  <ConfirmDialog open={open} onConfirm={remove} onCancel={() => setOpen(false)} />
</Menu>

Своя кнопка

Стандартная кнопка — три точки с подписью. Если нужна другая, передайте trigger: он получает состояние открытости и переключатель.

tsx

<Menu
  trigger={({ open, toggle }) => (
    <Button variant={open ? "primary" : "secondary"} onClick={toggle}>
      Действия {open ? "▲" : "▼"}
    </Button>
  )}
>
  <MenuItem onClick={…}>…</MenuItem>
</Menu>

Пропсы

Проп	Тип	По умолчанию	Описание
`children`*	`ReactNode`	—	Содержимое панели.
`label`	`string`	`"More"`	Подпись кнопки. На узком экране скрывается, остаётся иконка.
`trigger`	`(props: { open, toggle }) => ReactNode`	—	Своя кнопка вместо стандартной.
`count`	`number`	—	Сколько действий спрятано — числом на кнопке.
`align`	`"start" \| "end"`	`"end"`	С какой стороны выпадает панель.
`tip`	`string`	—	Подсказка на кнопке.

children*ReactNode

Содержимое панели.

labelstring

по умолчанию: "More"

Подпись кнопки. На узком экране скрывается, остаётся иконка.

trigger(props: { open, toggle }) => ReactNode

Своя кнопка вместо стандартной.

countnumber

Сколько действий спрятано — числом на кнопке.

align"start" | "end"

по умолчанию: "end"

С какой стороны выпадает панель.

tipstring

Подсказка на кнопке.

MenuItem принимает onClick или href, icon, tone (default либо danger) и disabled.

Пример

Диалоги внутри меню

Своя кнопка

Пропсы