@churchapps/apphelper/dist/components/notes/Note.js

Library of helper functions for React and NextJS ChurchApps

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, IconButton, Stack, Box, Typography } from "@mui/material";
import { useState, useEffect } from "react";
import { DateHelper } from "../../helpers";
import { PersonAvatar } from "../PersonAvatar";
export const Note = (props) => {
    const [message, setMessage] = useState(null);
    useEffect(() => setMessage(props.message), [props.message]);
    if (message === null)
        return null;
    const datePosted = new Date(message.timeUpdated || message.timeSent);
    const displayDuration = DateHelper.getDisplayDuration(datePosted);
    const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent;
    const contents = message.content?.split("\n");
    return (_jsxs(Box, { sx: {
            display: "flex",
            gap: 2,
            mb: 2,
            p: 1,
            borderRadius: 1,
            bgcolor: props.isEditing ? "rgba(255, 243, 224, 0.5)" : "transparent",
            border: props.isEditing ? "1px solid #FFA726" : "none",
            transition: "background-color 0.3s, border 0.3s",
            "&:hover": { bgcolor: "action.hover" }
        }, children: [_jsx(PersonAvatar, { person: message.person, size: "small" }), _jsx(Box, { sx: { flex: 1 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", children: [_jsxs(Box, { sx: { flex: 1 }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 0.5 }, children: [_jsx(Typography, { variant: "subtitle2", fontWeight: "bold", children: message.person?.name?.display }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: displayDuration }), isEdited && (_jsx(Typography, { variant: "caption", color: "text.secondary", children: "(edited)" }))] }), _jsx(Box, { children: contents.map((c, i) => c ? (_jsx(Typography, { variant: "body2", sx: { mb: 0.5 }, children: c }, `content-${i}-${c.substring(0, 20)}`)) : (_jsx(Box, { sx: { height: "1em" } }, `empty-${i}`))) })] }), (message?.id && message.personId === props.context?.person.id && !props.hideEdit) && (_jsx(IconButton, { size: "small", "aria-label": "editNote", onClick: () => props.showEditNote(message.id), sx: { opacity: 0.7, "&:hover": { opacity: 1 } }, children: _jsx(Icon, { fontSize: "small", children: "edit" }) }))] }) })] }));
};
//# sourceMappingURL=Note.js.map