Snackbar

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

Примеры и код

Свойства и методы

Код DemoSnackbarWrapperexport const DemoSnackbarWrapper: React.FC<IDemoSnackbarWrapperProps> = ({ children }) => {
    const [showSnackbar, setShowSnackbar] = useState(false);
    const [clickAmount, setClickAmount] = useState(0);

    const handleClose = () => {
        setShowSnackbar(false);
        setClickAmount(0);
    };

    return children({
        onTextButtonClick: () => setClickAmount(clickAmount + 1),
        onButtonClick: () => setShowSnackbar(true),
        onClose: handleClose,
        showSnackbar,
        clickAmount,
    });
};

Типы

<DemoSnackbarWrapper>
{({ onButtonClick, showSnackbar, onClose }) => (
 <div style={blockStyle}>
    <Button onClick={onButtonClick}>Показать снэкбар с типом 'info'</Button>
    {showSnackbar && (
       <Snackbar
          type='info'
          text='Что-то происходит'
          hasTextButton={true}
          onClose={onClose}
       />
    )}
 </div>
)}
</DemoSnackbarWrapper>
<DemoSnackbarWrapper>
{({ onButtonClick, showSnackbar, onClose }) => (
 <div style={blockStyle}>
    <Button onClick={onButtonClick}>Показать снэкбар с типом 'success'</Button>
    {showSnackbar && (
       <Snackbar
          type='success'
          text='Успешно завершено'
          hasTextButton={true}
          onClose={onClose}
       />
    )}
 </div>
)}
</DemoSnackbarWrapper>
<DemoSnackbarWrapper>
{({ onButtonClick, showSnackbar, onClose }) => (
 <div style={blockStyle}>
    <Button onClick={onButtonClick}>Показать снэкбар с типом 'attention'</Button>
    {showSnackbar && (
       <Snackbar
          type='attention'
          text='Сообщение об ошибке'
          hasTextButton={true}
          onClose={onClose}
       />
    )}
 </div>
)}
</DemoSnackbarWrapper>
<DemoSnackbarWrapper>
{({ onButtonClick, showSnackbar, onClose }) => (
 <div style={blockStyle}>
    <Button onClick={onButtonClick}>Показать снэкбар с типом 'timer'</Button>
    {showSnackbar && (
       <Snackbar
          type='timer'
          text='Элемент удален'
          hasTextButton={true}
          onClose={onClose}
       />
    )}
 </div>
)}
</DemoSnackbarWrapper>

Управление иконкой

<DemoSnackbarWrapper>
{({ onButtonClick, showSnackbar, onClose }) => (
 <div style={blockStyle}>
    <Button onClick={onButtonClick}>Показать снэкбар без иконки</Button>
    {showSnackbar && (
       <Snackbar
          type='info'
          text='Снэкбар без иконки'
          hasIcon={false}
          onClose={onClose}
       />
    )}
 </div>
)}
</DemoSnackbarWrapper>
<DemoSnackbarWrapper>
{({ onButtonClick, showSnackbar, onClose }) => (
 <div style={blockStyle}>
    <Button onClick={onButtonClick}>Показать снэкбар с кастомной иконкой</Button>
    {showSnackbar && (
       <Snackbar
          type='info'
          text='Снэкбар с кастомной иконкой'
          icon=<CustomIcon />
          onClose={onClose}
       />
    )}
 </div>
)}
</DemoSnackbarWrapper>

Управление кнопкой

Кастомный текст кнопки недоступен для типа 'timer'

<DemoSnackbarWrapper>
{({ onButtonClick, showSnackbar, onClose }) => (
 <div style={blockStyle}>
    <Button onClick={onButtonClick}>Показать снэкбар с кастомным текстом кнопки</Button>
    {showSnackbar && (
       <Snackbar
          type='info'
          text='Снэкбар с кастомным текстом кнопки и очень длинным текстом'
          buttonText='Кнопка'
          hasTextButton={true}
          onClose={onClose}
       />
    )}
 </div>
)}
</DemoSnackbarWrapper>
<DemoSnackbarWrapper>
{({ onButtonClick, showSnackbar, onClose }) => (
 <div style={blockStyle}>
    <Button onClick={onButtonClick}>Показать снэкбар без текстовой кнопки</Button>
    {showSnackbar && (
       <Snackbar
          type='info'
          text='Снэкбар без текстовой кнопки'
          hasTextButton={false}
          onClose={onClose}
       />
    )}
 </div>
)}
</DemoSnackbarWrapper>

Обработчик на текстовой кнопке

<DemoSnackbarWrapper>
{({ onButtonClick, showSnackbar, onClose, clickAmount, onTextButtonClick }) => (
 <div style={blockStyle}>
    <Button onClick={onButtonClick}>Показать снэкбар</Button>
    {showSnackbar && (
       <Snackbar
          type='info'
          text={'Количество кликов: ' + clickAmount}
          buttonText='Кнопка'
          hasTextButton={true}
          onButtonClick={onTextButtonClick}
          onClose={onClose}
       />
    )}
 </div>
)}
</DemoSnackbarWrapper>

Без автоматического закрытия

Отключение автоматического закрытия недоступно для типа 'timer'

<DemoSnackbarWrapper>
{({ onButtonClick, showSnackbar, onClose, clickAmount, onTextButtonClick }) => (
 <div style={blockStyle}>
    <Button onClick={onButtonClick}>Показать снэкбар</Button>
    {showSnackbar && (
       <Snackbar
          type='info'
          text='Что-то происходит'
          hasTextButton={true}
          disableAutoClose
          onClose={onClose}
       />
    )}
 </div>
)}
</DemoSnackbarWrapper>

Prop name	Type	Default	Description
text*	string		Текст
type	SnackbarType \| undefined		Тип отображения
icon	Element \| undefined		Кастомная иконка для типа 'info'
hasIcon	boolean \| undefined	true	Отображение иконки. Скрыть иконку можно только для типа 'info'
buttonText	string \| undefined		Кастомный текст кнопки. Не работает для типа 'timer'
maxTimerValue	number \| undefined	4	Максимальное значение таймера
hasTextButton	boolean \| undefined	false	Отображение текстовой кнопки
disableCloseAnimation	boolean \| undefined	false	Отключение анимации закрытия
disableAutoClose	boolean \| undefined	false	Отключение автоматического закрытия
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; container?: string \| undefined; icon?: string \| undefined; text?: string \| undefined; } \| undefined	{}	Дополнительные классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; text?: Record<string, string> \| undefined; closeButton?: Record<string, string> \| undefined; textButton?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
onButtonClick	(() => void) \| undefined		Обработчик клика по кнопке
onClose	(() => void) \| undefined		Обработчик на закрытие