react-common-use-components
Version:
A React mobile commonly used component library
140 lines (138 loc) • 5.29 kB
JavaScript
;
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;
const react_1 = __importStar(require("react"));
const SuccessIcon_1 = __importDefault(require("../../assets/svgs/SuccessIcon"));
const FailIcon_1 = __importDefault(require("../../assets/svgs/FailIcon"));
const WarningIcon_1 = __importDefault(require("../../assets/svgs/WarningIcon"));
const LoadingIcon_1 = __importDefault(require("../../assets/svgs/LoadingIcon"));
exports.ToastContext = (0, react_1.createContext)({});
let show = ({ text, type, duration }) => { };
let close = (timeout) => { };
const ToastProvider = ({ children }) => {
const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
const [type, setType] = (0, react_1.useState)('');
const [text, setText] = (0, react_1.useState)('');
(0, react_1.useEffect)(() => {
if (type === 'loading') {
rotateSmoothly();
}
}, [type]);
show = ({ text, type }) => {
setText(text);
setType(type);
setModalVisible(true);
};
close = (timeout) => {
setTimeout(() => {
setModalVisible(false);
setText('');
setType('');
}, timeout ? timeout : 0);
};
function rotateSmoothly() {
const loading_icon = document.getElementById('toast_loading');
let rotation = 0;
function animate() {
rotation = (rotation + 6) % 360;
if (loading_icon) {
loading_icon.style.transform = `rotate(${rotation}deg)`;
window.requestAnimationFrame(animate);
}
}
animate();
}
return (<exports.ToastContext.Provider value={{}}>
{modalVisible &&
<div onClick={(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",
}}>
<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' &&
<SuccessIcon_1.default style={{ width: "2rem", height: "2rem" }}/>}
{type === 'fail' &&
<FailIcon_1.default style={{ width: "2rem", height: "2rem" }}/>}
{type === 'warning' &&
<WarningIcon_1.default style={{ width: "2rem", height: "2rem" }}/>}
{type === 'loading' &&
<LoadingIcon_1.default id={'toast_loading'} style={{ width: "2rem", height: "2rem" }}/>}
<div style={{
marginTop: 8,
maxWidth: 120,
textAlign: "center",
wordBreak: "break-all",
wordWrap: "break-word"
}}>{text}</div>
</div>
</div>}
{children}
</exports.ToastContext.Provider>);
};
exports.default = ToastProvider;
exports.Toast = { show, close };
exports.Toast.show = ({ text, type, duration }) => {
show({ text, type, duration });
if (type === 'loading') {
if (duration !== 0) {
close(duration ? duration : 2000);
}
}
else {
close(2000);
}
};
exports.Toast.close = (timeout) => {
close(timeout);
};