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

Name	Type	Default	Description
zIndex	number		Tuỳ chỉnh z-index cho snackbar

SnackbarContext

SnackbarProvider cung cấp các hooks

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

SnackbarAction

Name	Type	Default	Description
close	boolean		Action close
text	string		Phần text hiển thị cho action
onClick	function		Thêm event handler cho click event khi user nhấn vào action

SnackbarOptions

Name	Type	Default	Description
position	SnackbarPosition		Vị trí snackbar
duration	number		Thời gian tồn tại của snackbar tính theo ms
text	string		Phần text hiển thị trên snackbar
type	SnackbarType		Loại snackbar
action	SnackbarAction		Thêm action cho snackbar
prefixIcon	ReactNode		Thêm lead icon cho snackbar
icon	boolean		Hiển thị icon cho snackbar trường hợp type default
verticalAction	boolean		Hiển thị action tại hàng mới, thường sử dụng khi action có độ dài text dài
zIndex	number		Tuỳ chỉnh z-index cho snackbar
onClose	function		Thêm event handler 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>
  );
}