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>

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