Snackbar

Cập nhật lần cuối: 27/05/2022

Snackbar Giúp tạo thông báo nhanh hiển thị lên trên giao diện ứng dụng, sự dụng thông báo về thông tin thêm, trạng thái thành công hoặc lỗi xảy ra khi sử dụng một hành động, quá trình download, trạng thái kết nối,...

Properties

SnackbarProvider

SnackbarContext

Name	Type	Default	Description
closeSnackbar	() => void		Hàm để đóng một Snackbar, có thể sử dụng để đóng nhanh khi chưa hết thời gian hiển thị.
openSnackbar	(options: SnackbarOptions) => void		Hàm để tạo mới và mở một Snackbar. Có thể mở Snackbar với các
setDownloadProgress	(completed: number) => void		Cập nhật phần trăm tiến trình download (0 - 100) khi sử dụng với type là download.

SnackbarAction

Name	Type	Default	Description
close	boolean	false	Chỉ định action có thể đóng snackbar sau khi click hay không
text	string		Chữ hiển thị trên action
onClick	(event: React.MouseEvent) => void		Callback được gọi khi người dùng click vào action

SnackbarOptions

Name	Type	Default	Description
action	SnackbarAction		Thiết lập các nút action cho snackbar
duration	number		Thời gian tồn tại của snackbar tính theo ms
icon	boolean	false	Hiển thị icon ở đầu snackbar, tương ứng với type được chọn.
position	SnackbarPosition		Vị trí snackbar
prefixIcon	ReactNode		Custom icon cho snackbar, thay thế cho icon mặc định. Có thể sử dụng ReactNode bất kỳ để làm icon, nhưng khuyến khích sử dụng <Icon> component.
text	string		Nội dung văn bản hiển thị trên snackbar
type	SnackbarType		Loại snackbar. Xem
verticalAction	boolean	false	Hiển thị các action theo hàng dọc. Khuyến khích sử dụng khi có nhiều action hoặc nội dung các action dài và không hiển thị được hết trên một hàng ngang.
zIndex	number		Thiết lập độ sâu của snackbar, sử dụng khi có nhiều phần tử overlay lên nhau.
onClose	() => void		Callback được gọi khi snackbar đóng.

Type

SnackbarPosition

Name	Description
'top'	Mở Snackbar phía trên
'bottom'	Mở Snackbar phía dưới

SnackbarType

Name	Description
'default'	Snackbar mặc định
'success'	Snackbar dùng hiển thị khi thực hiện một tác vụ thành công
'info'	Snackbar dùng để hiển thị thông tin
'error'	Snackbar dùng để hiển thị phản hồi một tác vụ thực hiện bị lỗi
'warning'	Snackbar dùng để đưa ra cảnh báo
'loading'	Snackbar dùng để hiển thị trạng thái loading
'download'	Snackbar hiển thị tiến trình download
'countdown'	Snackbar hiển thị với countdowwn
'wifi-connected'	Snackbar hiển thị khi network kết nối
'wifi-disconnected'	Snackbar hiẻn thị khi network ngắt kết nối

Example

Open Sandbox

import React, { useRef, useEffect } from "react";
import { useSnackbar, Button, Page, Box, Text } from "zmp-ui";

export default function HomePage() {
  const { openSnackbar, setDownloadProgress, closeSnackbar } = useSnackbar();
  const timmerId = useRef();

  useEffect(
    () => () => {
      closeSnackbar();
      clearInterval(timmerId.current);
    },
    []
  );

  return (
    <Page className="section-container">
      <Text.Title size="small">Snackbar</Text.Title>

      <Box mr={2} mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              icon: true,
              text: " Snackbar",
              action: {
                text: "close",
                close: true,
              },
              duration: 10000000,
            });
          }}
        >
          Default with Action
        </Button>
      </Box>
      <Box mr={2} mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              text: "text",
            });
          }}
        >
          Text Only
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              text: "Vertical action",
              action: {
                text: "close",
                close: true,
              },
              verticalAction: true,
              icon: true,
              duration: 10000000,
            });
          }}
        >
          Vertical action
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              text: "Default top snackbar",
              position: "top",
            });
          }}
        >
          Default Top
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              text: "Error",
              type: "error",
            });
          }}
        >
          Error
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              text: "Success",
              type: "success",
            });
          }}
        >
          Success
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              text: "Waring",
              type: "warning",
              duration: 10000,
            });
          }}
        >
          Warning
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              text: "Loading...",
              type: "loading",
            });
          }}
        >
          Loading
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              text: "loading...",
              type: "countdown",
              duration: 5000,
            });
          }}
        >
          Countdown
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            let i = 0;
            timmerId.current = setInterval(() => {
              if (i === 0) {
                openSnackbar({
                  text: "download...",
                  type: "download",
                  duration: 10000000,
                  onClose() {
                    clearInterval(timmerId.current);
                  },
                });
              }
              if (i < 100) {
                // eslint-disable-next-line no-plusplus
                setDownloadProgress(++i);
              }
              if (i === 100) {
                setTimeout(() => {
                  closeSnackbar();
                  clearInterval(timmerId.current);
                }, 1000);
              }
            }, 100);
          }}
        >
          Download
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              text: "Connected!",
              type: "wifi-connected",
            });
          }}
        >
          Connect Wifi
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          variant="secondary"
          type="highlight"
          onClick={() => {
            openSnackbar({
              text: "Disconnected!",
              type: "wifi-disconnected",
            });
          }}
        >
          Disconnect Wifi
        </Button>
      </Box>
    </Page>
  );
}