@churchapps/apphelper 0.2.79 → 0.2.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DisplayBox.d.ts +12 -0
- package/dist/components/DisplayBox.d.ts.map +1 -1
- package/dist/components/DisplayBox.js +6 -3
- package/dist/components/DisplayBox.js.map +1 -1
- package/dist/components/InputBox.d.ts +12 -0
- package/dist/components/InputBox.d.ts.map +1 -1
- package/dist/components/InputBox.js +9 -4
- package/dist/components/InputBox.js.map +1 -1
- package/package.json +1 -1
- package/src/components/DisplayBox.tsx +16 -3
- package/src/components/InputBox.tsx +21 -4
|
@@ -1,4 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
declare module '@mui/material/styles' {
|
|
3
|
+
interface Palette {
|
|
4
|
+
InputBox: {
|
|
5
|
+
headerText: string;
|
|
6
|
+
};
|
|
7
|
+
}
|
|
8
|
+
interface PaletteOptions {
|
|
9
|
+
InputBox?: {
|
|
10
|
+
headerText?: string;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
}
|
|
2
14
|
interface Props {
|
|
3
15
|
id?: string;
|
|
4
16
|
children: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DisplayBox.d.ts","sourceRoot":"","sources":["../../src/components/DisplayBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DisplayBox.d.ts","sourceRoot":"","sources":["../../src/components/DisplayBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,OAAO;QACf,QAAQ,EAAE;YAAE,UAAU,EAAE,MAAM,CAAC;SAAE,CAAC;KACnC;IACD,UAAU,cAAc;QACtB,QAAQ,CAAC,EAAE;YAAE,UAAU,CAAC,EAAE,MAAM,CAAC;SAAE,CAAC;KACrC;CACF;AAGD,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAsBD,eAAO,MAAM,UAAU,8EA6BrB,CAAA"}
|
|
@@ -9,8 +9,9 @@ const react_1 = __importDefault(require("react"));
|
|
|
9
9
|
const material_1 = require("@mui/material");
|
|
10
10
|
const HelpIcon_1 = require("./HelpIcon");
|
|
11
11
|
const SmallButton_1 = require("./SmallButton");
|
|
12
|
+
const styles_1 = require("@mui/material/styles");
|
|
12
13
|
/* "& p": { color: "#666" }, */
|
|
13
|
-
const CustomContextBox = (0,
|
|
14
|
+
const CustomContextBox = (0, styles_1.styled)(material_1.Box)({
|
|
14
15
|
marginTop: 10,
|
|
15
16
|
overflowX: "hidden",
|
|
16
17
|
"& label": { color: "#999" },
|
|
@@ -29,6 +30,8 @@ const CustomContextBox = (0, material_1.styled)(material_1.Box)({
|
|
|
29
30
|
"& th:last-of-type": { paddingRight: 0 }
|
|
30
31
|
});
|
|
31
32
|
exports.DisplayBox = react_1.default.forwardRef((props, ref) => {
|
|
33
|
+
const theme = (0, styles_1.useTheme)();
|
|
34
|
+
const headerText = theme.palette.InputBox.headerText ? theme.palette.InputBox.headerText : "primary";
|
|
32
35
|
let editContent;
|
|
33
36
|
if (props.editFunction !== undefined) {
|
|
34
37
|
editContent = react_1.default.createElement(SmallButton_1.SmallButton, { icon: "edit", "aria-label": props.ariaLabel || "editButton", onClick: props.editFunction });
|
|
@@ -39,8 +42,8 @@ exports.DisplayBox = react_1.default.forwardRef((props, ref) => {
|
|
|
39
42
|
props.help && react_1.default.createElement(HelpIcon_1.HelpIcon, { article: props.help }),
|
|
40
43
|
react_1.default.createElement(material_1.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" } },
|
|
41
44
|
react_1.default.createElement(material_1.Box, { sx: { display: "flex", alignItems: "center" } },
|
|
42
|
-
props.headerIcon && react_1.default.createElement(material_1.Icon, { sx: { color:
|
|
43
|
-
react_1.default.createElement(material_1.Typography, { component: "h2", sx: { display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }, variant: "h6", color:
|
|
45
|
+
props.headerIcon && react_1.default.createElement(material_1.Icon, { sx: { color: headerText } }, props.headerIcon),
|
|
46
|
+
react_1.default.createElement(material_1.Typography, { component: "h2", sx: { display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }, variant: "h6", color: headerText }, props.headerText)),
|
|
44
47
|
react_1.default.createElement(material_1.Box, null, editContent)),
|
|
45
48
|
react_1.default.createElement(CustomContextBox, { ref: ref, "data-cy": "content" }, props.children),
|
|
46
49
|
props.footerContent && (react_1.default.createElement("div", { style: { marginLeft: -16, marginRight: -16, marginBottom: -15, marginTop: 15 } }, props.footerContent))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DisplayBox.js","sourceRoot":"","sources":["../../src/components/DisplayBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAEb,kDAA0B;AAC1B,
|
|
1
|
+
{"version":3,"file":"DisplayBox.js","sourceRoot":"","sources":["../../src/components/DisplayBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { PaperProps } from "@mui/material";
|
|
3
|
+
declare module '@mui/material/styles' {
|
|
4
|
+
interface Palette {
|
|
5
|
+
InputBox: {
|
|
6
|
+
headerText: string;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
interface PaletteOptions {
|
|
10
|
+
InputBox?: {
|
|
11
|
+
headerText?: string;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
}
|
|
3
15
|
interface Props {
|
|
4
16
|
id?: string;
|
|
5
17
|
children?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputBox.d.ts","sourceRoot":"","sources":["../../src/components/InputBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"InputBox.d.ts","sourceRoot":"","sources":["../../src/components/InputBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+C,UAAU,EAAE,MAAM,eAAe,CAAC;AAKxF,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,OAAO;QACf,QAAQ,EAAE;YAAE,UAAU,EAAE,MAAM,CAAC;SAAE,CAAC;KACnC;IACD,UAAU,cAAc;QACtB,QAAQ,CAAC,EAAE;YAAE,UAAU,CAAC,EAAE,MAAM,CAAC;SAAE,CAAC;KACrC;CACF;AAGD,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACrC,qBAAqB,CAAC,EAAE,UAAU,CAAC;CACpC;AAoBD,wBAAgB,QAAQ,CAAC,EAAE,qBAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,qBAoCvE"}
|
|
@@ -20,7 +20,10 @@ const react_1 = __importDefault(require("react"));
|
|
|
20
20
|
const material_1 = require("@mui/material");
|
|
21
21
|
const HelpIcon_1 = require("./HelpIcon");
|
|
22
22
|
const helpers_1 = require("../helpers");
|
|
23
|
-
const
|
|
23
|
+
const styles_1 = require("@mui/material/styles");
|
|
24
|
+
const CustomContextBox = (0, styles_1.styled)(material_1.Box)({
|
|
25
|
+
name: "InputBox",
|
|
26
|
+
slot: "root",
|
|
24
27
|
marginTop: 10,
|
|
25
28
|
overflowX: "hidden",
|
|
26
29
|
"& p": { color: "#666" },
|
|
@@ -36,6 +39,8 @@ const CustomContextBox = (0, material_1.styled)(material_1.Box)({
|
|
|
36
39
|
});
|
|
37
40
|
function InputBox(_a) {
|
|
38
41
|
var { mainContainerCssProps = {} } = _a, props = __rest(_a, ["mainContainerCssProps"]);
|
|
42
|
+
const theme = (0, styles_1.useTheme)();
|
|
43
|
+
const headerText = theme.palette.InputBox.headerText ? theme.palette.InputBox.headerText : "primary";
|
|
39
44
|
let buttons = [];
|
|
40
45
|
if (props.cancelFunction)
|
|
41
46
|
buttons.push(react_1.default.createElement(material_1.Button, { key: "cancel", onClick: props.cancelFunction, color: "warning", sx: { "&:focus": { outline: "none" } } }, props.cancelText || helpers_1.Locale.label("common.cancel")));
|
|
@@ -50,9 +55,9 @@ function InputBox(_a) {
|
|
|
50
55
|
return (react_1.default.createElement(material_1.Paper, Object.assign({ id: props.id, sx: { padding: 2, marginBottom: 4 }, "data-cy": props["data-cy"] }, mainContainerCssProps),
|
|
51
56
|
props.help && react_1.default.createElement(HelpIcon_1.HelpIcon, { article: props.help }),
|
|
52
57
|
react_1.default.createElement(material_1.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }, "data-cy": "header" },
|
|
53
|
-
react_1.default.createElement(material_1.Box, {
|
|
54
|
-
props.headerIcon && react_1.default.createElement(material_1.Icon, { sx: { color:
|
|
55
|
-
props.headerText && (react_1.default.createElement(material_1.Typography, { component: "h2", sx: { display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }, variant: "h6", color:
|
|
58
|
+
react_1.default.createElement(material_1.Box, { display: "flex", alignItems: "center" },
|
|
59
|
+
props.headerIcon && react_1.default.createElement(material_1.Icon, { sx: { color: headerText } }, props.headerIcon),
|
|
60
|
+
props.headerText && (react_1.default.createElement(material_1.Typography, { component: "h2", sx: { display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }, variant: "h6", color: headerText }, props.headerText))),
|
|
56
61
|
react_1.default.createElement(material_1.Box, null, props.headerActionContent)),
|
|
57
62
|
react_1.default.createElement(CustomContextBox, null, props.children),
|
|
58
63
|
react_1.default.createElement(material_1.Stack, { direction: "row", sx: { marginTop: 1 }, spacing: 1, justifyContent: "end" }, buttons)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputBox.js","sourceRoot":"","sources":["../../src/components/InputBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,kDAA0B;AAC1B,
|
|
1
|
+
{"version":3,"file":"InputBox.js","sourceRoot":"","sources":["../../src/components/InputBox.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { Paper, Box, Typography,
|
|
4
|
+
import { Paper, Box, Typography, Icon } from "@mui/material";
|
|
5
5
|
import { HelpIcon } from "./HelpIcon";
|
|
6
6
|
import { SmallButton } from "./SmallButton";
|
|
7
|
+
import { styled, useTheme } from '@mui/material/styles';
|
|
8
|
+
|
|
9
|
+
declare module '@mui/material/styles' {
|
|
10
|
+
interface Palette {
|
|
11
|
+
InputBox: { headerText: string; };
|
|
12
|
+
}
|
|
13
|
+
interface PaletteOptions {
|
|
14
|
+
InputBox?: { headerText?: string; };
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
7
18
|
|
|
8
19
|
interface Props {
|
|
9
20
|
id?: string,
|
|
@@ -39,6 +50,8 @@ const CustomContextBox = styled(Box)({
|
|
|
39
50
|
});
|
|
40
51
|
|
|
41
52
|
export const DisplayBox = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
|
|
53
|
+
const theme = useTheme();
|
|
54
|
+
const headerText = theme.palette.InputBox.headerText ? theme.palette.InputBox.headerText : "primary";
|
|
42
55
|
|
|
43
56
|
let editContent: React.ReactNode;
|
|
44
57
|
if (props.editFunction !== undefined) {
|
|
@@ -51,8 +64,8 @@ export const DisplayBox = React.forwardRef<HTMLDivElement, Props>((props, ref) =
|
|
|
51
64
|
{props.help && <HelpIcon article={props.help} />}
|
|
52
65
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
53
66
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
54
|
-
{props.headerIcon && <Icon sx={{ color:
|
|
55
|
-
<Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color=
|
|
67
|
+
{props.headerIcon && <Icon sx={{ color: headerText }}>{props.headerIcon}</Icon>}
|
|
68
|
+
<Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color={headerText}>
|
|
56
69
|
{props.headerText}
|
|
57
70
|
</Typography>
|
|
58
71
|
|
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { Paper, Box, Typography, Stack,
|
|
4
|
+
import { Paper, Box, Typography, Stack, Button, Icon, PaperProps } from "@mui/material";
|
|
5
5
|
import { HelpIcon } from "./HelpIcon";
|
|
6
6
|
import { Locale } from "../helpers";
|
|
7
|
+
import { styled, useTheme } from '@mui/material/styles';
|
|
8
|
+
|
|
9
|
+
declare module '@mui/material/styles' {
|
|
10
|
+
interface Palette {
|
|
11
|
+
InputBox: { headerText: string; };
|
|
12
|
+
}
|
|
13
|
+
interface PaletteOptions {
|
|
14
|
+
InputBox?: { headerText?: string; };
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
7
18
|
|
|
8
19
|
interface Props {
|
|
9
20
|
id?: string;
|
|
@@ -28,6 +39,8 @@ interface Props {
|
|
|
28
39
|
}
|
|
29
40
|
|
|
30
41
|
const CustomContextBox = styled(Box)({
|
|
42
|
+
name: "InputBox",
|
|
43
|
+
slot: "root",
|
|
31
44
|
marginTop: 10,
|
|
32
45
|
overflowX: "hidden",
|
|
33
46
|
"& p": { color: "#666" },
|
|
@@ -42,7 +55,11 @@ const CustomContextBox = styled(Box)({
|
|
|
42
55
|
}
|
|
43
56
|
})
|
|
44
57
|
|
|
58
|
+
|
|
45
59
|
export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
|
|
60
|
+
const theme = useTheme();
|
|
61
|
+
const headerText = theme.palette.InputBox.headerText ? theme.palette.InputBox.headerText : "primary";
|
|
62
|
+
|
|
46
63
|
let buttons = [];
|
|
47
64
|
if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>{props.cancelText || Locale.label("common.cancel")}</Button>);
|
|
48
65
|
if (props.deleteFunction) buttons.push(<Button key="delete" id="delete" variant="outlined" aria-label={props.ariaLabelDelete} onClick={props.deleteFunction} color="error" sx={{ "&:focus": { outline: "none" } }}>{props.deleteText || Locale.label("common.delete")}</Button>);
|
|
@@ -57,10 +74,10 @@ export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
|
|
|
57
74
|
<Paper id={props.id} sx={{ padding: 2, marginBottom: 4 }} data-cy={props["data-cy"]} {...mainContainerCssProps}>
|
|
58
75
|
{props.help && <HelpIcon article={props.help} />}
|
|
59
76
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }} data-cy="header">
|
|
60
|
-
<Box
|
|
61
|
-
{props.headerIcon && <Icon sx={{ color:
|
|
77
|
+
<Box display="flex" alignItems="center">
|
|
78
|
+
{props.headerIcon && <Icon sx={{ color: headerText }}>{props.headerIcon}</Icon>}
|
|
62
79
|
{props.headerText && (
|
|
63
|
-
<Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color=
|
|
80
|
+
<Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color={headerText}>
|
|
64
81
|
{props.headerText}
|
|
65
82
|
</Typography>
|
|
66
83
|
)}
|