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}>Показать снэкбар с типом '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>

<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 }) => (
    <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>

<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>