@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
80 lines • 5.72 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Elements } from "@stripe/react-stripe-js";
import { MuiTelInput } from "mui-tel-input";
import { Checkbox, Select, MenuItem, FormControl, InputLabel, TextField, FormLabel, FormGroup, FormControlLabel } from "@mui/material";
import { FormCardPayment } from "./FormCardPayment";
export const QuestionEdit = React.forwardRef(({ noBackground = false, ...props }, ref) => {
const handleChange = (e) => {
props.changeFunction(props.question.id, e.target.value);
};
const handleCheck = (e) => {
const selectedOptions = props.answer.value ? props.answer.value.split(",") : [];
if (e.target.checked) {
selectedOptions.push(e.target.name);
}
else {
const idx = selectedOptions.indexOf(e.target.name);
selectedOptions.splice(idx, 1);
}
props.changeFunction(props.question.id, selectedOptions.join());
};
const q = props.question;
if (q.fieldType === "Heading")
return _jsx("h5", { children: q.title });
else {
let input = null;
const choiceOptions = [];
if (q.choices !== undefined && q.choices !== null) {
if (q.fieldType === "Multiple Choice") {
for (let i = 0; i < q.choices.length; i++)
choiceOptions.push(_jsx(MenuItem, { value: q.choices[i].value, children: q.choices[i].text }, q.choices[i].value));
}
else if (q.fieldType === "Checkbox") {
for (let i = 0; i < q.choices.length; i++)
choiceOptions.push(_jsx(FormControlLabel, { label: q.choices[i].text, control: _jsx(Checkbox, { onChange: handleCheck, name: q.choices[i].value }) }, q.choices[i].value));
}
}
const answerValue = (props.answer === null) ? "" : props.answer.value;
switch (q.fieldType) {
case "Textbox":
input = _jsx(TextField, { fullWidth: true, style: noBackground ? { backgroundColor: "white", borderRadius: "4px" } : {}, InputLabelProps: { sx: { fontWeight: "bold" } }, label: q.title, placeholder: q.placeholder, value: answerValue, onChange: handleChange });
break;
case "Multiple Choice": {
input = (_jsxs(FormControl, { fullWidth: true, style: noBackground ? { backgroundColor: "white", borderRadius: "4px" } : {}, children: [_jsx(InputLabel, { sx: { fontWeight: "bold" }, children: q.title }), _jsx(Select, { fullWidth: true, label: q.title, value: answerValue, onChange: handleChange, children: choiceOptions })] }));
break;
}
case "Yes/No": {
input = (_jsxs(FormControl, { fullWidth: true, style: noBackground ? { backgroundColor: "white", borderRadius: "4px" } : {}, children: [_jsx(InputLabel, { sx: { fontWeight: "bold" }, children: q.title }), _jsxs(Select, { fullWidth: true, label: q.title, value: answerValue, onChange: handleChange, children: [_jsx(MenuItem, { value: "False", children: "No" }), _jsx(MenuItem, { value: "True", children: "Yes" })] })] }));
break;
}
case "Checkbox": {
input = (_jsxs(FormControl, { fullWidth: true, sx: { marginLeft: 1 }, children: [_jsx(FormLabel, { sx: { fontWeight: "bold" }, children: q.title }), _jsx(FormGroup, { children: choiceOptions })] }));
break;
}
case "Whole Number":
case "Decimal":
input = _jsx(TextField, { fullWidth: true, style: noBackground ? { backgroundColor: "white", borderRadius: "4px" } : {}, type: "number", InputLabelProps: { shrink: true, sx: { fontWeight: "bold" } }, label: q.title, placeholder: q.placeholder, value: answerValue, onChange: handleChange });
break;
case "Date":
input = _jsx(TextField, { fullWidth: true, style: noBackground ? { backgroundColor: "white", borderRadius: "4px" } : {}, type: "date", InputLabelProps: { shrink: true, sx: { fontWeight: "bold" } }, label: q.title, placeholder: q.placeholder, value: answerValue, onChange: handleChange });
break;
case "Phone Number":
input = _jsx(MuiTelInput, { fullWidth: true, style: noBackground ? { backgroundColor: "white", borderRadius: "4px" } : {}, InputLabelProps: { sx: { fontWeight: "bold" } }, label: q.title, placeholder: "", value: answerValue, onChange: (value) => { props.changeFunction(props.question.id, value); }, defaultCountry: "US", focusOnSelectCountry: true, excludedCountries: ["TA", "AC"] });
break;
case "Email":
input = _jsx(TextField, { fullWidth: true, style: noBackground ? { backgroundColor: "white", borderRadius: "4px" } : {}, type: "email", InputLabelProps: { sx: { fontWeight: "bold" } }, label: q.title, placeholder: "john@doe.com", value: answerValue, onChange: handleChange });
break;
case "Text Area":
input = _jsx(TextField, { fullWidth: true, style: noBackground ? { backgroundColor: "white", borderRadius: "4px" } : {}, multiline: true, rows: 4, InputLabelProps: { sx: { fontWeight: "bold" } }, label: q.title, placeholder: q.placeholder, value: answerValue, onChange: handleChange });
break;
case "Payment":
input = _jsx(Elements, { stripe: props.stripePromise, children: _jsx(FormCardPayment, { churchId: props.churchId, question: q, ref: ref }) });
break;
default: return null;
}
return input;
}
});
//# sourceMappingURL=QuestionEdit.js.map