Notification

import { Notification } from '@megafon/ui-core';

Код DemoNotificationWrapperexport const DemoNotificationWrapper: React.FC<IDemoNotificationWrapperProps> = ({
    initialClickAmount = 0,
    children,
}) => {
    const [clickAmount, setClickAmount] = useState(initialClickAmount);
    const [isCollapseOpen, setIsCollapseOpen] = useState(true);

    return children({
        onCollapseButtonClick: (value: boolean) => setIsCollapseOpen(value),
        onWrapperButtonClick: () => setIsCollapseOpen(!isCollapseOpen),
        onButtonClick: () => setClickAmount(clickAmount + 1),
        onLinkClick: () => setClickAmount(clickAmount + 1),
        onClose: () => setClickAmount(clickAmount + 1),
        initialClickAmount: clickAmount,
        isCollapseOpen,
    });
};

Базовое использование

Показать код

<Notification
    type="info"
    title="Info"
 >
    Уведомление типа info
 </Notification>

<Notification type="success" title="Success"  >
 Уведомление типа success
</Notification>

<Notification type="warning" title="Warning"  >
 Уведомление типа warning
</Notification>

<Notification
 type="error"
 title="Error"
>
 Уведомление типа error
</Notification>

Кастомные иконки

Показать код

<Notification
 type="info"
 title="Info"
 icon={<Send />}
>
 Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового цвета уведомления
</Notification>

<Notification type="info" title="Info"   icon={<Send />}>
 Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового цвета уведомления
</Notification>

<Notification type="success" title="Success"  icon={<Sended />}>
 Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового цвета уведомления
</Notification>

<Notification type="success" title="Success"   icon={<Sended />}>
 Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового цвета уведомления
</Notification>

<Notification type="warning" title="Warning"  icon={<Rating1 />}>
 Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового цвета уведомления
</Notification>

<Notification type="warning" title="Warning"   icon={<Rating1 />}>
 Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового цвета уведомления
</Notification>

<Notification type="error" title="Error"  icon={<Cancel />}>
 Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового цвета уведомления
</Notification>

<Notification
 type="error"
 title="Error"
 icon={<Cancel />}
>
 Фоновый цвет и заливка иконок меняется в зависимости от типа и фонового цвета уведомления
</Notification>

Уведомления со ссылками

Показать код

<Notification
 type="info"
 title="Для всех типов"
 link="Cсылка зеленого цвета"
 target="_blank"
 href="/"
>
 Текст уведомления
</Notification>

Переход на другую страницу

Показать код

<Notification
 type="info"
 title="Заголовок уведомления"

 link="Cсылка на новую страницу"
 target="_blank"
 href="/"
 target="_blank"

/>

Кастомный обработчик клика по ссылке

Показать код

<DemoNotificationWrapper>
 {({ initialClickAmount, onLinkClick }) => (
    <Notification
          type="info"
          title="Заголовок уведомления"

          link="Cсылка с обработчиком"
          onLinkClick={onLinkClick}
    >
          {'Количество кликов: ' + initialClickAmount}
    </Notification>
 )}
</DemoNotificationWrapper>

Частичное заполнение контентом

Показать код

<Notification
 type="info"


 link="Cсылка на новую страницу"
 href="/"
 target="_blank"
>
 Отсутствует заголовок
</Notification>

<Notification
 type="info"
 title="Отсутствует дополнительный текст"
 link="Cсылка на новую страницу"
 href="/"
 target="_blank"
/>

Уведомления с кнопками

Показать код

<Notification
 type="info"
 title="Для всех типов"
 buttonText="Зеленая кнопка"
>
 Текст уведомления
</Notification>

Комбинирование кнопки с расхлопом и ссылкой

При недостаточной ширине элементы не переносятся в столбик, а всегда идут в одну строку. Текст на кнопке сокращается путем добавления в конце многоточия.

Показать код

<Notification
 type="info"
 title="Кнопка + ссылка"

 buttonText="Кнопка"
 link="Ссылка"
 target="_blank"
 href="/"
 onButtonClick={() => {}}
>
 Выравниваются по левому краю контента.
</Notification>

<Notification
 type="warning"
 title="Кнопка + расхлоп"

 buttonText="Подключить"
 shortText="Короткий текст уведомления"
 isCollapseOpened
 onButtonClick={() => {}}
>
 Кнопка выравнивается по левому краю, расхлоп - по правому краю.
</Notification>

Кастомный обработчик клика по кнопке

Показать код

<DemoNotificationWrapper>
 {({ initialClickAmount, onButtonClick }) => (
 <Notification
       type="info"
       title="Заголовок уведомления"

       buttonText="Кнопка с обработчиком"
       onButtonClick={onButtonClick}
 >
       {'Количество кликов: ' + initialClickAmount}
 </Notification>
 )}
</DemoNotificationWrapper>

Уведомления с расхлопом

Расхлоп может комбинироваться с кнопкой, но не со ссылкой

По умолчанию

Показать код

<Notification
    type="info"
    title="По умолчанию расхлоп изначально закрыт"

    buttonText="Подключить"
    shortText="Здание было красивым и странным: оно напоминало жилище эльфов"
 >
 Здание было красивым и странным: оно напоминало не то жилище эльфов, не то замок рыцарей-монахов. Белые шпили,
 стрельчатые окна, легкие мраморные беседки
</Notification>

Кастомные заголовки расхлопа

Показать код

<Notification
 type="success"
 title="По умолчанию расхлоп изначально закрыт"

 buttonText="Подключить"
 shortText="Здание было красивым и странным: оно напоминало жилище эльфов"
 closeCollapseTitle="Показать весь текст"
 openCollapseTitle=" Скрыть часть текста"
>
 Здание было красивым и странным: оно напоминало не то жилище эльфов, не то замок рыцарей-монахов. Белые шпили,
 стрельчатые окна, легкие мраморные беседки
</Notification>

Управление состоянием расхлопа

Показать код

<Notification
 type="info"
 title="Изначально открыт"
 isCollapseOpened
 shortText="Устанавливает только начальное состояние расхлопа"
>
 Устанавливает только начальное состояние расхлопа. Управляется только по кнопке расхлопа.
</Notification>

<DemoNotificationWrapper>
 {({ isCollapseOpen, onWrapperButtonClick, onCollapseButtonClick }) =>
    <div>
       <Notification
          type="info"
          title="Изначально открыт"
          isCollapseOpened={isCollapseOpen}
          shortText="Есть управление состоянием расхлопа извне"
          onCollapseButtonClick={onCollapseButtonClick}
       >
          Есть управление состоянием расхлопа извне. Управлять состоянием расхлопа можно по внешней кнопке, либо по основной кнопке расхлопа.
       </Notification>
       <div style={{ marginTop: '15px' }}>
          <Button onClick={onWrapperButtonClick}>Внешнее управление</Button>
       </div>
    </div>
 }
</DemoNotificationWrapper>

Кнопка закрытия

Показать код

<DemoNotificationWrapper>
 {({ initialClickAmount, onClose }) => (
    <Notification
          type="error"
          title="Кнопка закрытия с обработчиком"
          hasCloseButton
          onClose={onClose}
    >
          {'Количество кликов: ' + initialClickAmount}
    </Notification>
 )}
</DemoNotificationWrapper>

HTML-теги и спецсимволы

В свойствах title и shortText поддерживаются некоторые HTML-теги:
- для title: "<br>, <font color>, <a href>";
- для shortText: "<br>, <font color>, <a href>, <b>".

Также в обоих свойствах поддерживается спецсимвол &nbsp.

Демо данныеconst fontTitle = 'Текст с <font color="#731982">изменённым цветом</font> текста';
const hrefTitle = '<a href="https://moscow.megafon.ru">Ссылка</a>';

Показать код

<Notification
 type="info"
 title="Переход на<br>новую строку"
 shortText="Переход на<br>новую строку"
>
</Notification>

<Notification
 type="info"
 title="Текст"
 shortText="Текст с <b>жирным</b> начертаниием"
></Notification>

<Notification type="info" title={fontText} shortText={fontText}></Notification>

<Notification type="info" title={hrefText} shortText={hrefText}></Notification>

<Notification
 type="info"
 title="Неразрывный&nbspпробел"
 shortText="Неразрывный&nbspпробел"
>
</Notification>

Prop name	Type	Default	Description
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; container?: string \| undefined; content?: string \| undefined; link?: string \| undefined; } \| undefined		Дополнительные классы для корневого и внутренних элементов
type	NotificationType \| undefined	info	Тип отображения
hasCloseButton	boolean \| undefined		Наличие кнопки-крестика "Закрыть"
title	string \| undefined		Заголовок
shortText	string \| undefined		Короткий текст, отображаемый при закрытом расхлопе
closeCollapseTitle	string \| undefined	Подробнее	заголовок закрытого расхлопа
openCollapseTitle	string \| undefined	Свернуть	заголовок открытого расхлопа
isCollapseOpened	boolean \| undefined	false	Управление состоянием открыт/закрыт расхлопа "Подробнее"
buttonText	string \| undefined		Текст кнопки
buttonLoader	boolean \| undefined	false	Лоадер кнопки
buttonDisable	boolean \| undefined	false	Заблокировать кнопку
link	string \| undefined		Текст ссылки внизу уведомления
rel	string \| undefined		rel - аргумент тега <a> для ссылки
href	string \| undefined		href - аргумент тега <a> для ссылки
target	"_self" \| "_blank" \| "_parent" \| "_top" \| undefined		target - аргумент тега <a>
icon	Element \| undefined		Иконка
dataAttrs	{ root?: Record<string, string> \| undefined; title?: Record<string, string> \| undefined; text?: Record<string, string> \| undefined; link?: Record<string, string> \| undefined; close?: Record<...> \| undefined; button?: Record<...> \| undefined; collapseButton?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на элемент
onClose	(() => void) \| undefined		Обработчик на закрытие
onLinkClick	(() => void) \| undefined		Обработчик клика по ссылке
onButtonClick	(() => void) \| undefined		Обработчик клика по кнопке
onCollapseButtonClick	((value: boolean) => void) \| undefined		Обработчик клика по кнопке расхлопа