@etsoo/materialui
Version:
TypeScript Material-UI Implementation
80 lines (79 loc) • 4.56 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommonPage = CommonPage;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const FabBox_1 = require("../FabBox");
const ScrollTopFab_1 = require("../ScrollTopFab");
const MUGlobal_1 = require("../MUGlobal");
const MoreFab_1 = require("../MoreFab");
const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
const BackButton_1 = require("../BackButton");
const Labels_1 = require("../app/Labels");
const ReactApp_1 = require("../app/ReactApp");
const Container_1 = __importDefault(require("@mui/material/Container"));
const styles_1 = require("@mui/material/styles");
const Fab_1 = __importDefault(require("@mui/material/Fab"));
/**
* Common page
* @param props Props
*/
function CommonPage(props) {
// Global app
const app = (0, ReactApp_1.useAppContext)();
// Destruct
const { children, disableGutters = true, fabTop, fabButtons, fabColumnDirection, fabPanel, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal_1.MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, fabRefresh = onRefresh != null, sx = {}, ...rest } = props;
// Fab padding
const fabPadding = MUGlobal_1.MUGlobal.increase(MUGlobal_1.MUGlobal.pagePaddings, fabPaddingAdjust);
if (typeof sx === "object" && sx != null && !Reflect.has(sx, "padding")) {
// Set default padding
Reflect.set(sx, "padding", paddings);
}
// Labels
const labels = Labels_1.Labels.CommonPage;
const theme = (0, styles_1.useTheme)();
const distance = react_1.default.useMemo(() => MUGlobal_1.MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
// Update
const updateRef = react_1.default.useRef(false);
const update = react_1.default.useMemo(() => onUpdateAll
? onUpdateAll
: onUpdate
? async (authorized) => {
if (authorized == null || authorized) {
await onUpdate();
updateRef.current = true;
}
}
: onRefresh
? async (authorized) => {
if (authorized) {
await onRefresh();
updateRef.current = true;
}
}
: undefined, [onUpdateAll, onUpdate, onRefresh]);
react_1.default.useEffect(() => {
if (updateRef.current && update) {
update(true, []);
updateRef.current = false;
}
}, [update]);
// Return the UI
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [update && app?.stateDetector({ targetFields, update }), (0, jsx_runtime_1.jsxs)(Container_1.default, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [(0, jsx_runtime_1.jsxs)(FabBox_1.FabBox, { sx: {
zIndex: 1,
...(typeof fabTop === "function"
? fabTop(theme, fabPadding)
: fabTop
? {
top: MUGlobal_1.MUGlobal.updateWithTheme(MUGlobal_1.MUGlobal.increase(fabPadding, 7), theme.spacing),
right: distance
}
: {
bottom: distance,
right: distance
})
}, columnDirection: fabColumnDirection, fabPanel: fabPanel, children: [scrollContainer && ((0, jsx_runtime_1.jsx)(ScrollTopFab_1.ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })), fabButtons, fabRefresh && ((0, jsx_runtime_1.jsx)(Fab_1.default, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } }, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) })), (0, jsx_runtime_1.jsx)(MoreFab_1.MoreFab, { size: fabSize, title: labels.more, actions: moreActions }), supportBack && (0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { title: labels.back, size: fabSize })] }), children] })] }));
}