@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
37 lines • 2.54 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Paper, Box, Typography, Icon } from "@mui/material";
import { HelpIcon } from "./HelpIcon";
import { SmallButton } from "./SmallButton";
import { styled, useTheme } from "@mui/material/styles";
/* "& p": { color: "#666" }, */
const CustomContextBox = styled(Box)({
marginTop: 10,
overflowX: "hidden",
"& label": { color: "#999" },
"& ul": { paddingLeft: 0 },
"& li": {
listStyleType: "none",
marginBottom: 10,
"& i": { marginRight: 5 }
},
"& td": { "& i": { marginRight: 5 } },
"& td:first-of-type": { paddingLeft: 0 },
"& td:last-of-type": { paddingRight: 0 },
"& th:first-of-type": { paddingLeft: 0 },
"& th:last-of-type": { paddingRight: 0 }
});
export const DisplayBox = React.forwardRef((props, ref) => {
const theme = useTheme();
const headerText = theme?.palette?.InputBox?.headerText ? theme?.palette?.InputBox?.headerText : "primary";
let editContent;
if (props.editFunction !== undefined) {
editContent = _jsx(SmallButton, { icon: "edit", "aria-label": props.ariaLabel || "editButton", onClick: props.editFunction });
}
else if (props.editContent !== undefined)
editContent = props.editContent;
return (_jsxs(Paper, { sx: { padding: 2, marginBottom: 4 }, id: props.id || "display-box", "data-testid": props["data-testid"] || "", children: [props.help && _jsx(HelpIcon, { article: props.help }), _jsxs(Box, { id: "display-box-header", sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsxs(Box, { id: "display-box-title-section", sx: { display: "flex", alignItems: "center" }, children: [props.headerIcon && _jsx(Icon, { id: "display-box-icon", sx: { color: headerText }, children: props.headerIcon }), _jsx(Typography, { id: "display-box-title", component: "h2", sx: { display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }, variant: "h6", color: headerText, children: props.headerText })] }), _jsx(Box, { id: "display-box-actions", children: editContent })] }), _jsx(CustomContextBox, { id: "display-box-content", ref: ref, "data-testid": "display-box-content", children: props.children }), props.footerContent && (_jsx("div", { id: "display-box-footer", style: { marginLeft: -16, marginRight: -16, marginBottom: -15, marginTop: 15 }, children: props.footerContent }))] }));
});
DisplayBox.displayName = "DisplayBox";
//# sourceMappingURL=DisplayBox.js.map