@ava3v/ui-react (0.1.171)
Installation
@ava3v:registry=https://git.ava3v.ru/api/packages/Administrator/npm/npm install @ava3v/ui-react@0.1.171"@ava3v/ui-react": "0.1.171"About this package
@ava3v/ui-react
React-версия библиотеки компонентов @ava3v/ui (порт @ava3v/ui-vue): общие CSS-токены,
темы, плотности и headless-логика — собственный React-слой компонентов. Версии обоих пакетов
выпускаются синхронно одной цифрой.
Установка
В .npmrc проекта:
@ava3v:registry=https://git.ava3v.ru/api/packages/Administrator/npm/
npm install @ava3v/ui-react
Пиры: react и react-dom 18 или 19. write-excel-file — опциональный пир,
нужен только для экспорта грида в XLSX (подгружается лениво).
Подключение
import '@ava3v/ui-react/dist/ui.css' // токены, темы, плотности, стили компонентов
import { Ava3vButton, Ava3vDataGrid, Ava3vNotify, Ava3vDialogHost, notify, ava3vConfirm } from '@ava3v/ui-react'
Ava3vNotify и Ava3vDialogHost монтируются один раз на приложение (обычно в корневом
лейауте) — без них notify(...) и ava3vConfirm(...) не имеют куда рендериться:
export function AppRoot() {
return (
<>
<AppRoutes />
<Ava3vNotify />
<Ava3vDialogHost />
</>
)
}
Тема и плотность
Темы и плотности управляются атрибутами на контейнере приложения:
<div data-theme="dark" data-density="compact">…</div>
Манифест токенов темы (для экранов настройки): ava3vThemeTokens (+ типы
Ava3vThemeToken, Ava3vThemeTokenGroup).
Локаль
import { setAva3vLocale, setAva3vLocaleMessages } from '@ava3v/ui-react'
setAva3vLocale('en') // компоненты перерисовываются сами
Серверный грид
Контракт серверной загрузки общий с Vue-версией — см. docs/datagrid-backend-contract.md (включая раздел с React-примерами):
import { Ava3vDataGrid, createRemoteDataStore } from '@ava3v/ui-react'
// load получает DataGridBackendRequest (skip/take/sort/filter/…) и отдаёт { data, totalCount }
const store = createRemoteDataStore({
load: request => fetch('/api/items', { method: 'POST', body: JSON.stringify({ gridLoadOptions: request }) }).then(r => r.json()),
})
<Ava3vDataGrid store={store} columns={columns} rowKey="id"
showFilterRow showHeaderFilterButtons stateStorageKey="items" />
refresh() через ref после сохранения всегда шлёт запрос и ждёт его; строки в событиях — те же
объекты, что пришли от стора.
Эталонный экран «реестр + карточка» — в плейграунде репозитория: пункт «React: реестр + карточка» (режим React в шапке).
Тесты
npm test # из папки react/
Версионирование
Пакет на стадии 0.x: релизы частые, синхронные с @ava3v/ui-vue. Ломающие изменения
до 1.0 возможны в минорных/патч-версиях и всегда отмечаются в CHANGELOG.md
в секции «Ломающие» — перед обновлением сверяйтесь с ним. Публикация — см.
PUBLISHING.md.
Оверлеи и Esc
Vue- и React-модалки делят один overlayManager (состояние на globalThis, общее для обоих бандлов):
Esc получает только верхний слой (модалка, диалоги и оверлеи грида, Ava3vPopup, Ava3vDrawer,
Ava3vContextMenu, полноэкранный Ava3vHtmlEditor, drill-down Ava3vPivotGrid), стек z-слоёв и
блокировка скролла общие. Свой попап регистрирует слой хуком useEscapeLayer(open, close) из пакета;
без хуков — pushModalEscape(handler) и возвращённая функция снятия.
ava3vConfirm с intent: 'warning' | 'danger' фокусирует безопасную кнопку и возвращает фокус
опенеру; Ava3vButton принимает autoFocus.
Отличия от Vue-версии
spinnerReact-аналога не имеет и считается устаревшим — используйтеAva3vLoaderилиAva3vSkeleton.- Слоты Vue — пропы-функции или
children; события — колбэкиonXxx. - Полное руководство по библиотеке (темы, локаль, формы, грид, Esc) — в корневом README.
Dependencies
Peer Dependencies
| ID | Version |
|---|---|
| react | ^18.0.0 || ^19.0.0 |
| react-dom | ^18.0.0 || ^19.0.0 |
| write-excel-file | ^4.1.1 |