@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
38 lines • 3.15 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Paper, Box, Typography, Stack, Button } from "@mui/material";
import { Icon } from "@mui/material";
import { HelpIcon } from "./HelpIcon";
import { Locale } from "../helpers";
import { styled, useTheme } from "@mui/material/styles";
const CustomContextBox = styled(Box)({
name: "InputBox",
slot: "root",
marginTop: 10,
overflowX: "hidden",
"& p": { color: "#666" },
"& label": { color: "#999" },
"& ul": { paddingLeft: 15 },
"& li": {
marginBottom: 10,
"& i": { marginRight: 5 }
},
"& td": { "& i": { marginRight: 5 } }
});
export function InputBox({ mainContainerCssProps = {}, ...props }) {
const theme = useTheme();
const headerText = theme?.palette?.InputBox?.headerText ? theme?.palette?.InputBox?.headerText : "primary";
const buttons = [];
if (props.cancelFunction)
buttons.push(_jsx(Button, { onClick: props.cancelFunction, color: "warning", sx: { "&:focus": { outline: "none" } }, children: props.cancelText || Locale.label("common.cancel") }, "cancel"));
if (props.deleteFunction)
buttons.push(_jsx(Button, { id: "delete", variant: "outlined", "aria-label": props.ariaLabelDelete, onClick: props.deleteFunction, color: "error", sx: { "&:focus": { outline: "none" } }, children: props.deleteText || Locale.label("common.delete") }, "delete"));
if (props.saveFunction)
buttons.push(_jsx(Button, { type: props.saveButtonType || "button", variant: "contained", disableElevation: true, "aria-label": props.ariaLabelSave, onClick: props.saveFunction, disabled: props.isSubmitting, sx: { "&:focus": { outline: "none" } }, children: props.isSubmitting && props.saveTextSubmitting ? props.saveTextSubmitting : (props.saveText || Locale.label("common.save")) }, "save"));
const classNames = ["inputBox"];
if (props.className) {
classNames.push(props.className);
}
return (_jsxs(Paper, { id: props.id || "input-box", sx: { padding: 2, marginBottom: 4 }, "data-testid": props["data-testid"], ...mainContainerCssProps, children: [props.help && _jsx(HelpIcon, { article: props.help }), _jsxs(Box, { id: "input-box-header", sx: { display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }, "data-testid": "input-box-header", children: [_jsxs(Box, { id: "input-box-title-section", display: "flex", alignItems: "center", children: [props.headerIcon && _jsx(Icon, { id: "input-box-icon", sx: { color: headerText }, children: props.headerIcon }), props.headerText && (_jsx(Typography, { id: "input-box-title", component: "h2", sx: { display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }, variant: "h6", color: headerText, children: props.headerText }))] }), _jsx(Box, { id: "input-box-actions", children: props.headerActionContent })] }), _jsx(CustomContextBox, { id: "input-box-content", children: props.children }), _jsx(Stack, { id: "input-box-buttons", direction: "row", sx: { marginTop: 1 }, spacing: 1, justifyContent: "end", children: buttons })] }));
}
//# sourceMappingURL=InputBox.js.map