zmp-ui/esm/components/snackbar-provider/index.stories.js

Zalo Mini App framework

import React, { createElement, useEffect, useRef, useState } from "react";
import SnackbarProvider, { useSnackbar } from ".";
import Button from "../button";
var meta = {
  title: "Overlay/SnackbarProvider",
  component: SnackbarProvider,
  tags: ["autodocs"],
  argTypes: {}
};
export default meta;
function generateStory(props) {
  return {
    name: props.name,
    args: {
      children: /*#__PURE__*/createElement(function () {
        var _useSnackbar = useSnackbar(),
          openSnackbar = _useSnackbar.openSnackbar;
        return /*#__PURE__*/React.createElement(Button, {
          onClick: function onClick() {
            return openSnackbar(props.options);
          },
          fullWidth: true
        }, "M\u1EDF");
      })
    },
    parameters: {
      docs: {
        source: {
          code: "function Trigger() {\n  const { openSnackbar } = useSnackbar();\n  const onClick = () => {\n    openSnackbar(" + JSON.stringify(props.options, null, 2).replace(/^/gm, "    ") // Add 4 spaces to each line to match indentation
          .replace(/"(\w+)"\s*:/g, "$1:") // Remove quotes around keys, to make JSON more JS
          .trim() // Remove first line's indentation
          + ");\n  }\n\n  return <Button fullWidth onClick={onClick}>M\u1EDF</Button>\n}\n\n<SnackbarProvider>\n  <Trigger />\n</SnackbarProvider>"
        }
      }
    }
  };
}
export var Default = generateStory({
  name: "Mặc định",
  options: {
    text: "Thông báo này sẽ biến mất sau 2 giây"
  }
});
export var Forerver = generateStory({
  name: "Vô thời hạn",
  options: {
    text: "Thông báo này sẽ không biến mất.",
    duration: 999999999
  }
});
export var WithIcon = generateStory({
  name: "Có biểu tượng",
  options: {
    icon: true,
    text: "Vui lòng kiểm tra lại thông tin của bạn."
  }
});
export var WithAction = generateStory({
  name: "Có hành động",
  options: {
    icon: true,
    text: "Đã lưu.",
    action: {
      text: "Hoàn tác",
      close: true
    }
  }
});
export var VerticalAction = generateStory({
  name: "Hành động dọc",
  options: {
    text: "Bạn có muốn xóa mục này không?",
    action: {
      text: "Xóa",
      close: true
    },
    verticalAction: true,
    icon: true
  }
});
export var DefaultTop = generateStory({
  name: "Thông báo trên cùng",
  options: {
    text: "Thông báo này xuất hiện ở vị trí trên cùng của màn hình.",
    position: "top"
  }
});
export var Error = generateStory({
  name: "Lỗi",
  options: {
    text: "Đã xảy ra lỗi khi lưu dữ liệu. Vui lòng thử lại.",
    type: "error"
  }
});
export var Success = generateStory({
  name: "Thành công",
  options: {
    text: "Dữ liệu đã được lưu thành công!",
    type: "success"
  }
});
export var Warning = generateStory({
  name: "Cảnh báo",
  options: {
    text: "Dung lượng lưu trữ của bạn sắp đầy. Hãy giải phóng dung lượng.",
    type: "warning",
    duration: 10000
  }
});
export var Loading = generateStory({
  name: "Đang tải",
  options: {
    text: "Đang tải dữ liệu, vui lòng chờ...",
    type: "loading"
  }
});
export var Countdown = generateStory({
  name: "Đếm ngược",
  options: {
    text: "Phiên làm việc của bạn sẽ hết hạn sau 5 giây.",
    type: "countdown",
    duration: 5000
  }
});
export var Download = {
  name: "Tải xuống",
  args: {
    children: /*#__PURE__*/createElement(function () {
      var _useSnackbar2 = useSnackbar(),
        openSnackbar = _useSnackbar2.openSnackbar,
        setDownloadProgress = _useSnackbar2.setDownloadProgress,
        closeSnackbar = _useSnackbar2.closeSnackbar;
      var _useState = useState(0),
        progress = _useState[0],
        setProgress = _useState[1];
      var intervalRef = useRef();
      useEffect(function () {
        setDownloadProgress(progress);
        if (progress >= 100) {
          clearInterval(intervalRef.current);
          setTimeout(function () {
            closeSnackbar();
          }, 1000);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, [progress]);
      return /*#__PURE__*/React.createElement(Button, {
        fullWidth: true,
        onClick: function onClick() {
          openSnackbar({
            text: "Đang tải xuống...",
            type: "download",
            duration: 999999999
          });
          if (intervalRef.current) {
            clearInterval(intervalRef.current);
          }
          setProgress(0);
          intervalRef.current = setInterval(function () {
            setProgress(function (prev) {
              return prev + 1;
            });
          }, 50);
        }
      }, "M\u1EDF");
    })
  },
  parameters: {
    docs: {
      source: {
        code: "function Trigger() {\n  const { openSnackbar, setDownloadProgress, closeSnackbar } = useSnackbar();\n  const [progress, setProgress] = useState(0);\n  const intervalRef = useRef();\n\n  useEffect(() => {\n    setDownloadProgress(progress);\n    if (progress >= 100) {\n      clearInterval(intervalRef.current);\n      setTimeout(() => {\n        closeSnackbar();\n      }, 1000);\n    }\n  }, [progress]);\n\n  return (\n    <Button\n      fullWidth\n      onClick={() => {\n        openSnackbar({\n          text: \"\u0110ang t\u1EA3i xu\u1ED1ng...\",\n          type: \"download\",\n          duration: 999999999,\n        });\n        if (intervalRef.current) {\n          clearInterval(intervalRef.current);\n        }\n        setProgress(0);\n        intervalRef.current = setInterval(() => {\n          setProgress(prev => prev + 1);\n        }, 50);\n      }}\n    >\n        M\u1EDF\n    </Button>\n  );\n}\n\n<SnackbarProvider>\n  <Trigger />\n</SnackbarProvider>"
      }
    }
  }
};
export var ConnectWifi = generateStory({
  name: "Kết nối Wifi",
  options: {
    text: "Đã kết nối Wifi!",
    type: "wifi-connected"
  }
});
export var DisconnectWifi = generateStory({
  name: "Ngắt kết nối Wifi",
  options: {
    text: "Đã ngắt kết nối Wifi!",
    type: "wifi-disconnected"
  }
});