@etsoo/materialui
Version:
TypeScript Material-UI Implementation
26 lines (25 loc) • 2.04 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { MUGlobal } from "../MUGlobal";
import { CommonPage } from "./CommonPage";
import SaveIcon from "@mui/icons-material/Save";
import DeleteIcon from "@mui/icons-material/Delete";
import { BackButton } from "../BackButton";
import { Labels } from "../app/Labels";
import { OperationMessageContainer } from "../messages/OperationMessageContainer";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";
/**
* Add / Edit page
* @param props Props
*/
export function EditPage(props) {
// Destruct
const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, gridSpacing = MUGlobal.pagePaddings, ...rest } = props;
// Labels
const labels = Labels.CommonPage;
return (_jsxs(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), topPart, _jsxs("form", { onSubmit: onSubmit, children: [_jsx(Grid, { container: true, justifyContent: "left", spacing: gridSpacing, paddingTop: 1, children: children }), _jsxs(Grid, { container: true, position: "sticky", display: "flex", gap: gridSpacing, sx: {
top: "auto",
bottom: (theme) => MUGlobal.updateWithTheme(gridSpacing, theme.spacing),
paddingTop: gridSpacing
}, children: [isEditing && onDelete && (_jsx(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: _jsx(DeleteIcon, { color: "warning" }), children: labels.delete })), _jsx(Button, { variant: "contained", type: "submit", startIcon: _jsx(SaveIcon, {}), sx: { flexGrow: 1 }, disabled: submitDisabled, children: labels.save }), supportBack && _jsx(BackButton, { title: labels.back })] })] }), bottomPart] }));
}