@etsoo/materialui
Version:
TypeScript Material-UI Implementation
74 lines (73 loc) • 3.85 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { FabBox } from "../FabBox";
import { ScrollTopFab } from "../ScrollTopFab";
import { MUGlobal } from "../MUGlobal";
import { MoreFab } from "../MoreFab";
import RefreshIcon from "@mui/icons-material/Refresh";
import { BackButton } from "../BackButton";
import { Labels } from "../app/Labels";
import { useAppContext } from "../app/ReactApp";
import Container from "@mui/material/Container";
import { useTheme } from "@mui/material/styles";
import Fab from "@mui/material/Fab";
/**
* Common page
* @param props Props
*/
export function CommonPage(props) {
// Global app
const app = useAppContext();
// Destruct
const { children, disableGutters = true, fabTop, fabButtons, fabColumnDirection, fabPanel, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, fabRefresh = onRefresh != null, sx = {}, ...rest } = props;
// Fab padding
const fabPadding = MUGlobal.increase(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.CommonPage;
const theme = useTheme();
const distance = React.useMemo(() => MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
// Update
const updateRef = React.useRef(false);
const update = React.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.useEffect(() => {
if (updateRef.current && update) {
update(true, []);
updateRef.current = false;
}
}, [update]);
// Return the UI
return (_jsxs(React.Fragment, { children: [update && app?.stateDetector({ targetFields, update }), _jsxs(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [_jsxs(FabBox, { sx: {
zIndex: 1,
...(typeof fabTop === "function"
? fabTop(theme, fabPadding)
: fabTop
? {
top: MUGlobal.updateWithTheme(MUGlobal.increase(fabPadding, 7), theme.spacing),
right: distance
}
: {
bottom: distance,
right: distance
})
}, columnDirection: fabColumnDirection, fabPanel: fabPanel, children: [scrollContainer && (_jsx(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })), fabButtons, fabRefresh && (_jsx(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } }, children: _jsx(RefreshIcon, {}) })), _jsx(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }), supportBack && _jsx(BackButton, { title: labels.back, size: fabSize })] }), children] })] }));
}