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"
 shadowLevel="zero"
>
 Уведомление типа info
</Notification>

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

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

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

Монохромный фон

<Notification
    type="info"
    title="Info"
    shadowLevel="default"
    isColored={false}
 >
    Уведомление типа info с белым фоном
 </Notification>

<Notification type="success" title="Success" shadowLevel="default" isColored={false}>
 Уведомление типа success с белым фоном
</Notification>

<Notification type="warning" title="Warning" shadowLevel="default" isColored={false}>
 Уведомление типа warning с белым фоном
</Notification>

<Notification
 type="error"
 title="Error"
 shadowLevel="default"
 isColored={false}
>
 Уведомление типа error с белым фоном
</Notification>

Тени

<Notification
 type="info"
 title="shadowLevel=zero"
 shadowLevel="zero"
>
 Уровень тени zero
</Notification>

<Notification type="info" title="shadowLevel=default" shadowLevel="default" isColored={false}>
 Уровень тени default
</Notification>

<Notification type="info" title="shadowLevel=hover" shadowLevel="hover">
 Уровень тени hover
</Notification>

<Notification type="info" title="shadowLevel=pressed" shadowLevel="pressed" isColored={false}>
 Уровень тени pressed
</Notification>

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

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

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

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

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

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

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

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

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

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

Цвета ссылок отличаются в зависимости от типа уведомления

<Notification
 type="info"
 title="Для всех типов, кроме error с цветным фоном"
 shadowLevel="default"
 link="Cсылка зеленого цвета"
 target="_blank"
 href="/"
 isColored={false}
>
 Текст уведомления
</Notification>

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

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

<Notification
 type="info"
 title="Заголовок уведомления"
 shadowLevel="default"
 link="Cсылка на новую страницу"
 target="_blank"
 href="/"
 target="_blank"
 isColored={false}
/>

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

<DemoNotificationWrapper>
 {({ initialClickAmount, onLinkClick }) => (
    <Notification
          type="info"
          title="Заголовок уведомления"
          shadowLevel="zero"
          link="Cсылка с обработчиком"
          onLinkClick={onLinkClick}
    >
          {'Количество кликов: ' + initialClickAmount}
    </Notification>
 )}
</DemoNotificationWrapper>

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

<Notification
 type="info"
 shadowLevel="default"
 isColored={false}
 link="Cсылка на новую страницу"
 href="/"
 target="_blank"
>
 Отсутствует заголовок
</Notification>

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

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

Цвет кнопки меняется в зависимости от типа уведомления

<Notification
 type="info"
 title="Для всех типов, кроме error с цветным фоном"
 shadowLevel="default"
 buttonText="Зеленая кнопка"
 isColored={false}
>
 Текст уведомления
</Notification>

<Notification
 type="error"
 title="Для типа error с цветным фоном"
 buttonText="Белая кнопка"
>
 Текст уведомления
</Notification>

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

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

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

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

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

<DemoNotificationWrapper>
 {({ initialClickAmount, onButtonClick }) => (
 <Notification
       type="info"
       title="Заголовок уведомления"
       shadowLevel="zero"
       buttonText="Кнопка с обработчиком"
       onButtonClick={onButtonClick}
 >
       {'Количество кликов: ' + initialClickAmount}
 </Notification>
 )}
</DemoNotificationWrapper>

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

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

По умолчанию

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

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

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

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

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

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

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

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

Вертикальное выравнивание

<Notification
 type="info"
 shadowLevel="zero"
 hasCloseButton
>
 Если высота контента больше высоты иконки, то они выравниваются по верхнему краю контентной области.
</Notification>

<Notification
 type="info"
 shadowLevel="zero"
 hasCloseButton
>
 Центрирование по вертикали при небольшой высоте текста.
</Notification>

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"
 shadowLevel="zero"
 title="Переход на<br>новую строку"
 shortText="Переход на<br>новую строку"
>
</Notification>

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

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

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

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