@yandex/ui

# MessageBox <a href='https://github.yandex-team.ru/search-interfaces/frontend/tree/master/packages/lego-components/src/MessageBox' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Исходники]/[Github ][green]/badge.svg' /></a> <a href='https://search.yandex-team.ru/stsearch?text=MessageBox.ts&facet.queue=ISL&facet.type=bug&facet.status=128' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Известные проблемы]/[Startrek][blue]/badge.svg' /></a> > **Важно!** Компонент может измениться после [дизайн-ревью](https://st.yandex-team.ru/ISL-8128), следите за обновлениями.  Визуальный компонент для уведомлений, плашек и других паттернов.  ## Пример подключения Конфигурация темы на уровне проекта: ```ts // src/lib/theme.ts import { configureRootTheme } from '@yandex-lego/components/Theme' import { theme } from '@yandex-lego/components/Theme/presets/default' configureRootTheme({ theme }) ``` Использование с нужным набором модификаторов: ```ts // src/App.ts import React from 'react' import { compose } from '@bem-react/core' import { MessageBox as MessageBoxDesktop, withSizeM, withViewDefault, } from '@yandex-lego/components/MessageBox/desktop' const MessageBox = compose( withSizeM, withViewDefault, )(MessageBoxDesktop) const App = () => ( <MessageBox view="default" size="m"> MessageBox </MessageBox> ) ``` Использование с полным набором модификаторов: ```ts // src/App.ts import React from 'react' import { MessageBox } from '@yandex-lego/components/MessageBox/desktop/bundle' const App = () => ( <MessageBox view="default" size="m"> MessageBox </MessageBox> ) ``` ## Примеры ### Вид компонента Чтобы изменить вид компонента, установите свойство `view` в одно из следующих значений: `"default"`, `"inverse"`, `"promo"` (Компонент появится при нажатии на кнопку в примере). {{%story::desktop:surface-messagebox-desktop--view%}} ### Размер компонента Чтобы изменить размер компонента, установите свойство `size` в одно из следующих значений: `"s"`, `"m"`, `"l"`. {{%story::desktop:surface-messagebox-desktop--size%}} ### Уголки Чтобы добавить компоненту произвольный компонент в угол, передайте нужный элемент в свойство `corners`. ```tsx import { MessageBox, Corner, } from '@yandex-lego/components/MessageBox/desktop/bundle' <MessageBox view="default" size="m" corner={ <Corner width={42} side="bottom-right"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49"> <path fill="#ffd426" stroke="#f6cf2e" d="M17.644 34.455l9.906 13.912 4.949-16.171 16.296-4.911-14.02-9.83.167-16.948-13.614 10.096L5.135 5.039l5.606 16.07L.567 34.62z" /> </svg> </Corner> } /> ``` {{%story::desktop:surface-messagebox-desktop--corners%}} ### Кнопки действий Чтобы добавить кнопки, установите свойство `actions` с необходимым набором кнопок. ```ts <MessageBox view="default" size="m" actions={ <> <Button view="clear" size="m"> Отклонить </Button> <Button view="action" size="m"> Принять </Button> </> } > Новая почта с классными темами теперь для вас! </MessageBox> ``` {{%story::desktop:surface-messagebox-desktop--buttons%}} ### Составной компонент Чтобы добавить произвольный фон, установите свойство `background` с необходимым изображением. В составе так же есть вспомогательный компонент `Wrapper`, который позволяет размещать текст или разметку - слева, справа или по центру. ```tsx import { MessageBox, Wrapper, } from '@yandex-lego/components/MessageBox/desktop/bundle' <MessageBox view="default" size="m" background={ <img style={{ filter: 'opacity(.5)', width: '100%' }} src="//avatars.mds.yandex.net/get-dialogs/1676983/7bdc8b36f13ce872e360/catalogue-banner-x3" /> } > <Wrapper leading="текст слева" trailing="текст справа"> текст по центру </Wrapper> </MessageBox> ``` {{%story::desktop:surface-messagebox-desktop--complex%}} ### Раскладка компонента Чтобы изменить раскладку компонента, установите свойство `layout` в одно из допустимых значений: - `layout="plain"` — Используется для уведомлений и того, что не требует пользовательского взаимодействия (используется по умолчанию). - `layout="tooltip"` — Используется для создании различного рода подсказок. - `layout="functional"` — Используется для создания интерактивного компонента. {{%story::desktop:surface-messagebox-desktop--layout%}} ### MessageBox + Popup Компонент можно показать относительно любого элемента на странице, для этого необходимо воспользоваться импортом `MessageBoxPopup`, данный компонент использует внутри себя `Popup`, а снаружи частично реализует его интерфейс. ```tsx import { MessageBoxPopup } from '@yandex-lego/components/MessageBox/desktop/bundle' <MessageBoxPopup visible hasTail anchor={anchorRef} direction="top-center" view="default" size="s" > top-center </MessageBoxPopup> ``` {{%story::desktop:surface-messagebox-desktop--with-popup%}} ## Свойства ### MessageBox  | Свойство | Тип | По умолчанию | Описание | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | --------------------------------------------------------------------------- | | className? | `string` | — | Дополнительный className | | corner? | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal` | — | Элемент, который будет размещен в углу компонента | | opaque? | `false \| true` | — | Делает фон непрозрачным | | onClose? | `(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void` | — | Обработчик клика на close элемент и индикатор того, что close надо показать | | actions? | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal` | — | Кнопка или набор кнопок, которые будут размещены внизу компонента | | background? | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal` | — | Элемент, который будет размещен на фоне компонента | | layout? | `"tooltip" \| "plain" \| "functional"` | `'plain'` | Раскладка компонента | | innerRef? | `RefObject<HTMLDivElement>` | — | Ссылка на корневой DOM-элемент компонента | | tailRef? | `(instance: HTMLDivElement) => void \| RefObject<HTMLDivElement>` | — | Ссылка на DOM-элемент хвостика | | hasTail? | `false \| true` | — | Включает/отключает хвостик у компонента | | tailType? | `"default" \| "rounded"` | `'default'` | Тип хвостика |  ### MessageBoxPopup Компонент частично реализует интерфейс `MessageBox`, `Popup`, `WithOutsideClick` и `PopupTargetAnchor`. | Свойство | Тип | По умолчанию | Описание | | ---------- | --------------------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | visible? | `false \| true` | — | Делает попап видимым | | anchor? | `RefObject<HTMLElement>` | — | Элемент, относительно которого позиционируется попап | | scope? | `RefObject<HTMLElement>` | `document.body` | Ссылка на DOM-элемент, в котором размещается попап<br>Важно, чтобы контейнер имел `position: relative` для корректного позиционирования | | direction? | `Direction | Direction[]` | — | Направление для раскрытия компонента | | onClick? | `(event: MouseEvent<HTMLDivElement, MouseEvent>) => void` | — | Обработчик, вызываемый при срабатывании события click |