react-common-use-components
Version:
A React mobile commonly used component library
141 lines (140 loc) • 5.96 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toast = exports.ToastContext = void 0;
var react_1 = __importStar(require("react"));
var SuccessIcon_1 = __importDefault(require("../../assets/svgs/SuccessIcon"));
var FailIcon_1 = __importDefault(require("../../assets/svgs/FailIcon"));
var WarningIcon_1 = __importDefault(require("../../assets/svgs/WarningIcon"));
var LoadingIcon_1 = __importDefault(require("../../assets/svgs/LoadingIcon"));
exports.ToastContext = (0, react_1.createContext)({});
var show = function (_a) {
var text = _a.text, type = _a.type, duration = _a.duration;
};
var close = function (timeout) { };
var ToastProvider = function (_a) {
var children = _a.children;
var _b = (0, react_1.useState)(false), modalVisible = _b[0], setModalVisible = _b[1];
var _c = (0, react_1.useState)(''), type = _c[0], setType = _c[1];
var _d = (0, react_1.useState)(''), text = _d[0], setText = _d[1];
(0, react_1.useEffect)(function () {
if (type === 'loading') {
rotateSmoothly();
}
}, [type]);
show = function (_a) {
var text = _a.text, type = _a.type;
setText(text);
setType(type);
setModalVisible(true);
};
close = function (timeout) {
setTimeout(function () {
setModalVisible(false);
setText('');
setType('');
}, timeout ? timeout : 0);
};
function rotateSmoothly() {
var loading_icon = document.getElementById('toast_loading');
var rotation = 0;
function animate() {
rotation = (rotation + 6) % 360;
if (loading_icon) {
loading_icon.style.transform = "rotate(".concat(rotation, "deg)");
window.requestAnimationFrame(animate);
}
}
animate();
}
return (react_1.default.createElement(exports.ToastContext.Provider, { value: {} },
modalVisible &&
react_1.default.createElement("div", { onClick: function (e) {
close(2000);
e.stopPropagation();
}, style: {
background: 'rgba(0,0,0,0)',
width: "100%",
zIndex: 1300,
position: 'fixed',
inset: 0,
display: "flex",
justifyContent: 'center',
alignItems: 'center',
opacity: modalVisible ? 1 : 0,
transition: "opacity 1s ease-in-out",
} },
react_1.default.createElement("div", { style: {
background: 'rgba(0,0,0,0.6)',
minWidth: 150,
minHeight: 150,
color: "#FFFFFF",
fontSize: 14,
zIndex: 1301,
display: "flex",
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
borderRadius: 16,
opacity: modalVisible ? 1 : 0,
transition: "opacity 1s ease-in-out",
} },
type === 'success' &&
react_1.default.createElement(SuccessIcon_1.default, { style: { width: "2rem", height: "2rem" } }),
type === 'fail' &&
react_1.default.createElement(FailIcon_1.default, { style: { width: "2rem", height: "2rem" } }),
type === 'warning' &&
react_1.default.createElement(WarningIcon_1.default, { style: { width: "2rem", height: "2rem" } }),
type === 'loading' &&
react_1.default.createElement(LoadingIcon_1.default, { id: 'toast_loading', style: { width: "2rem", height: "2rem" } }),
react_1.default.createElement("div", { style: {
marginTop: 8,
maxWidth: 120,
textAlign: "center",
wordBreak: "break-all",
wordWrap: "break-word"
} }, text))),
children));
};
exports.default = ToastProvider;
exports.Toast = { show: show, close: close };
exports.Toast.show = function (_a) {
var text = _a.text, type = _a.type, duration = _a.duration;
show({ text: text, type: type, duration: duration });
if (type === 'loading') {
if (duration !== 0) {
close(duration ? duration : 2000);
}
}
else {
close(2000);
}
};
exports.Toast.close = function (timeout) {
close(timeout);
};