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>