drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
97 lines (96 loc) • 5.04 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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__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.default = Overlays;
const react_1 = __importStar(require("react"));
const Backdrop_1 = __importDefault(require("@mui/material/Backdrop"));
const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
const Snackbar_1 = __importDefault(require("@mui/material/Snackbar"));
const Alert_1 = __importDefault(require("@mui/material/Alert"));
const Dialog_1 = __importDefault(require("@mui/material/Dialog"));
const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
const Box_1 = __importDefault(require("@mui/material/Box"));
const utils_1 = require("../utils");
const APIWrapper_1 = __importDefault(require("./APIWrapper"));
function Overlays({ children }) {
const initialSnackBar = {
open: false,
msg: '',
severity: 'info',
};
const initialDialog = {
open: false,
loading: true,
title: '',
Body: null,
Actions: null,
};
const [snackBar, setSnackBar] = (0, react_1.useReducer)((utils_1.reducer), initialSnackBar);
const [dialog, setDialog] = (0, react_1.useReducer)((utils_1.reducer), initialDialog);
const [loading, setLoading] = (0, react_1.useState)(false);
// give some time to stop loading when data is retrieved and must render before loading rendering:
const handleLoading = (0, react_1.useCallback)((loadingState) => {
if (loadingState) {
setLoading(true);
return;
}
setTimeout(() => {
setLoading(false);
}, 300);
}, []);
const handleDialogClose = (0, react_1.useCallback)(() => {
setDialog({
open: false,
});
}, []);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(APIWrapper_1.default, { handleLoading: handleLoading, setSnackBar: setSnackBar, setDialog: setDialog }, children),
react_1.default.createElement(Backdrop_1.default, { invisible: false, sx: { color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }, open: loading },
react_1.default.createElement(CircularProgress_1.default, null)),
snackBar && (react_1.default.createElement(Snackbar_1.default, { open: snackBar.open, autoHideDuration: 3000, onClose: () => {
setSnackBar({ open: false });
}, anchorOrigin: { vertical: 'top', horizontal: 'right' } },
react_1.default.createElement(Alert_1.default, { severity: snackBar.severity }, snackBar.msg))),
dialog && (react_1.default.createElement(Dialog_1.default, { open: dialog.open, onClose: handleDialogClose, disableEscapeKeyDown: dialog.isCancelDisabled },
react_1.default.createElement(DialogTitle_1.default, null, dialog.loading ? 'Carregando...' : dialog.title),
react_1.default.createElement(DialogContent_1.default, null, dialog.loading ? (react_1.default.createElement(Box_1.default, { sx: { display: 'flex' } },
react_1.default.createElement(CircularProgress_1.default, null))) : (react_1.default.createElement(react_1.default.Fragment, null, dialog.Body))),
react_1.default.createElement(DialogActions_1.default, null, !dialog.loading && react_1.default.createElement(react_1.default.Fragment, null, dialog.Actions))))));
}