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

Library of helper functions for React and NextJS ChurchApps

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;
    let 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, '&:hover': { bgcolor: 'action.hover', borderRadius: 1 } }, 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 }, i)) : (_jsx(Box, { sx: { height: '1em' } }, i))) })] }), (message?.id && message.personId === props.context?.person.id) && (_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