zmp-ui
Version:
Zalo Mini App framework
196 lines (195 loc) • 7.76 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.WithIcon = exports.WithAction = exports.Warning = exports.VerticalAction = exports.Success = exports.Loading = exports.Forerver = exports.Error = exports.Download = exports.DisconnectWifi = exports.DefaultTop = exports.Default = exports.Countdown = exports.ConnectWifi = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ = _interopRequireWildcard(require("."));
var _button = _interopRequireDefault(require("../button"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var meta = {
title: "Overlay/SnackbarProvider",
component: _["default"],
tags: ["autodocs"],
argTypes: {}
};
var _default = exports["default"] = meta;
function generateStory(props) {
return {
name: props.name,
args: {
children: /*#__PURE__*/(0, _react.createElement)(function () {
var _useSnackbar = (0, _.useSnackbar)(),
openSnackbar = _useSnackbar.openSnackbar;
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
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>"
}
}
}
};
}
var Default = exports.Default = generateStory({
name: "Mặc định",
options: {
text: "Thông báo này sẽ biến mất sau 2 giây"
}
});
var Forerver = exports.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
}
});
var WithIcon = exports.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."
}
});
var WithAction = exports.WithAction = generateStory({
name: "Có hành động",
options: {
icon: true,
text: "Đã lưu.",
action: {
text: "Hoàn tác",
close: true
}
}
});
var VerticalAction = exports.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
}
});
var DefaultTop = exports.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"
}
});
var Error = exports.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"
}
});
var Success = exports.Success = generateStory({
name: "Thành công",
options: {
text: "Dữ liệu đã được lưu thành công!",
type: "success"
}
});
var Warning = exports.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
}
});
var Loading = exports.Loading = generateStory({
name: "Đang tải",
options: {
text: "Đang tải dữ liệu, vui lòng chờ...",
type: "loading"
}
});
var Countdown = exports.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
}
});
var Download = exports.Download = {
name: "Tải xuống",
args: {
children: /*#__PURE__*/(0, _react.createElement)(function () {
var _useSnackbar2 = (0, _.useSnackbar)(),
openSnackbar = _useSnackbar2.openSnackbar,
setDownloadProgress = _useSnackbar2.setDownloadProgress,
closeSnackbar = _useSnackbar2.closeSnackbar;
var _useState = (0, _react.useState)(0),
progress = _useState[0],
setProgress = _useState[1];
var intervalRef = (0, _react.useRef)();
(0, _react.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["default"].createElement(_button["default"], {
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>"
}
}
}
};
var ConnectWifi = exports.ConnectWifi = generateStory({
name: "Kết nối Wifi",
options: {
text: "Đã kết nối Wifi!",
type: "wifi-connected"
}
});
var DisconnectWifi = exports.DisconnectWifi = generateStory({
name: "Ngắt kết nối Wifi",
options: {
text: "Đã ngắt kết nối Wifi!",
type: "wifi-disconnected"
}
});