import * as React from 'react'; import {useEffect, useRef, useState} from 'react'; import {NotificationItem} from "./Notifications"; import theme from "./theme"; import {Checkbox, Chip, FormControl, FormControlLabel, InputLabel, Link, Select, useMediaQuery} from "@mui/material"; import TextField from "@mui/material/TextField"; import priority1 from "../img/priority-1.svg"; import priority2 from "../img/priority-2.svg"; import priority3 from "../img/priority-3.svg"; import priority4 from "../img/priority-4.svg"; import priority5 from "../img/priority-5.svg"; import Dialog from "@mui/material/Dialog"; import DialogTitle from "@mui/material/DialogTitle"; import DialogContent from "@mui/material/DialogContent"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; import IconButton from "@mui/material/IconButton"; import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'; import {Close} from "@mui/icons-material"; import MenuItem from "@mui/material/MenuItem"; import {basicAuth, formatBytes, topicShortUrl, validTopic, validUrl} from "../app/utils"; import Box from "@mui/material/Box"; import AttachmentIcon from "./AttachmentIcon"; import DialogFooter from "./DialogFooter"; import api from "../app/Api"; import userManager from "../app/UserManager"; import EmojiPicker from "./EmojiPicker"; const SendDialog = (props) => { const [baseUrl, setBaseUrl] = useState(""); const [topic, setTopic] = useState(""); const [message, setMessage] = useState(""); const [messageFocused, setMessageFocused] = useState(true); const [title, setTitle] = useState(""); const [tags, setTags] = useState(""); const [priority, setPriority] = useState(3); const [clickUrl, setClickUrl] = useState(""); const [attachUrl, setAttachUrl] = useState(""); const [attachFile, setAttachFile] = useState(null); const [filename, setFilename] = useState(""); const [filenameEdited, setFilenameEdited] = useState(false); const [email, setEmail] = useState(""); const [delay, setDelay] = useState(""); const [publishAnother, setPublishAnother] = useState(false); const [showTopicUrl, setShowTopicUrl] = useState(""); const [showClickUrl, setShowClickUrl] = useState(false); const [showAttachUrl, setShowAttachUrl] = useState(false); const [showEmail, setShowEmail] = useState(false); const [showDelay, setShowDelay] = useState(false); const showAttachFile = !!attachFile && !showAttachUrl; const attachFileInput = useRef(); const [attachFileError, setAttachFileError] = useState(""); const [activeRequest, setActiveRequest] = useState(null); const [status, setStatus] = useState(""); const disabled = !!activeRequest; const [emojiPickerAnchorEl, setEmojiPickerAnchorEl] = useState(null); const [dropZone, setDropZone] = useState(false); const [sendButtonEnabled, setSendButtonEnabled] = useState(true); const open = !!props.openMode; const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); useEffect(() => { window.addEventListener('dragenter', () => { props.onDragEnter(); setDropZone(true); }); }, []); useEffect(() => { setBaseUrl(props.baseUrl); setTopic(props.topic); setShowTopicUrl(!props.baseUrl || !props.topic); setMessageFocused(!!props.topic); // Focus message only if topic is set }, [props.baseUrl, props.topic]); useEffect(() => { const valid = validUrl(baseUrl) && validTopic(topic) && !attachFileError; setSendButtonEnabled(valid); }, [baseUrl, topic, attachFileError]); useEffect(() => { setMessage(props.message); }, [props.message]); const handleSubmit = async () => { const headers = {}; if (title.trim()) { headers["X-Title"] = title.trim(); } if (tags.trim()) { headers["X-Tags"] = tags.trim(); } if (priority && priority !== 3) { headers["X-Priority"] = priority.toString(); } if (clickUrl.trim()) { headers["X-Click"] = clickUrl.trim(); } if (attachUrl.trim()) { headers["X-Attach"] = attachUrl.trim(); } if (filename.trim()) { headers["X-Filename"] = filename.trim(); } if (email.trim()) { headers["X-Email"] = email.trim(); } if (delay.trim()) { headers["X-Delay"] = delay.trim(); } if (attachFile && message.trim()) { headers["X-Message"] = message.replaceAll("\n", "\\n").trim(); } const body = (attachFile) ? attachFile : message; try { const user = await userManager.get(baseUrl); if (user) { headers["Authorization"] = basicAuth(user.username, user.password); } const progressFn = (ev) => { if (ev.loaded > 0 && ev.total > 0) { const percent = Math.round(ev.loaded * 100.0 / ev.total); setStatus(`Uploading ${formatBytes(ev.loaded)}/${formatBytes(ev.total)} (${percent}%) ...`); } else { setStatus(`Uploading ...`); } }; const request = api.publishXHR(baseUrl, topic, body, headers, progressFn); setActiveRequest(request); await request; if (!publishAnother) { props.onClose(); } else { setStatus("Message published"); setActiveRequest(null); } } catch (e) { setStatus({e}); setActiveRequest(null); } }; const checkAttachmentLimits = async (file) => { try { const stats = await api.userStats(baseUrl); const fileSizeLimit = stats.attachmentFileSizeLimit ?? 0; const remainingBytes = stats.visitorAttachmentBytesRemaining ?? 0; const fileSizeLimitReached = fileSizeLimit > 0 && file.size > fileSizeLimit; const quotaReached = remainingBytes > 0 && file.size > remainingBytes; if (fileSizeLimitReached && quotaReached) { return setAttachFileError(`exceeds ${formatBytes(fileSizeLimit)} file limit and quota, ${formatBytes(remainingBytes)} remaining`); } else if (fileSizeLimitReached) { return setAttachFileError(`exceeds ${formatBytes(fileSizeLimit)} file limit`); } else if (quotaReached) { return setAttachFileError(`exceeds quota, ${formatBytes(remainingBytes)} remaining`); } setAttachFileError(""); } catch (e) { console.log(`[SendDialog] Retrieving attachment limits failed`, e); setAttachFileError(""); // Reset error (rely on server-side checking) } }; const handleAttachFileClick = () => { attachFileInput.current.click(); }; const handleAttachFileChanged = async (ev) => { await updateAttachFile(ev.target.files[0]); }; const handleAttachFileDrop = async (ev) => { ev.preventDefault(); setDropZone(false); await updateAttachFile(ev.dataTransfer.files[0]); }; const updateAttachFile = async (file) => { setAttachFile(file); setFilename(file.name); props.onResetOpenMode(); await checkAttachmentLimits(file); }; const handleAttachFileDragLeave = () => { setDropZone(false); if (props.openMode === SendDialog.OPEN_MODE_DRAG) { props.onClose(); // Only close dialog if it was not open before dragging file in } }; const handleEmojiClick = (ev) => { setEmojiPickerAnchorEl(ev.currentTarget); }; const handleEmojiPick = (emoji) => { setTags(tags => (tags.trim()) ? `${tags.trim()}, ${emoji}` : emoji); }; const handleEmojiClose = () => { setEmojiPickerAnchorEl(null); }; return ( <> {dropZone && } {(baseUrl && topic) ? `Publish to ${topicShortUrl(baseUrl, topic)}` : "Publish message"} {dropZone && } {showTopicUrl && { setBaseUrl(props.baseUrl); setTopic(props.topic); setShowTopicUrl(false); }}> setBaseUrl(ev.target.value)} disabled={disabled} type="url" variant="standard" sx={{flexGrow: 1, marginRight: 1}} /> setTopic(ev.target.value)} disabled={disabled} type="text" variant="standard" autoFocus={!messageFocused} sx={{flexGrow: 1}} /> } setTitle(ev.target.value)} disabled={disabled} type="text" fullWidth variant="standard" placeholder="Notification title, e.g. Disk space alert" /> setMessage(ev.target.value)} disabled={disabled} type="text" variant="standard" rows={5} autoFocus={messageFocused} fullWidth multiline />
setTags(ev.target.value)} disabled={disabled} type="text" variant="standard" sx={{flexGrow: 1, marginRight: 1}} />
{showClickUrl && { setClickUrl(""); setShowClickUrl(false); }}> setClickUrl(ev.target.value)} disabled={disabled} type="url" fullWidth variant="standard" /> } {showEmail && { setEmail(""); setShowEmail(false); }}> setEmail(ev.target.value)} disabled={disabled} type="email" variant="standard" fullWidth /> } {showAttachUrl && { setAttachUrl(""); setFilename(""); setFilenameEdited(false); setShowAttachUrl(false); }}> { const url = ev.target.value; setAttachUrl(url); if (!filenameEdited) { try { const u = new URL(url); const parts = u.pathname.split("/"); if (parts.length > 0) { setFilename(parts[parts.length-1]); } } catch (e) { // Do nothing } } }} disabled={disabled} type="url" variant="standard" sx={{flexGrow: 5, marginRight: 1}} /> { setFilename(ev.target.value); setFilenameEdited(true); }} disabled={disabled} type="text" variant="standard" sx={{flexGrow: 1}} /> } {showAttachFile && setFilename(f)} onClose={() => { setAttachFile(null); setAttachFileError(""); setFilename(""); }} />} {showDelay && { setDelay(""); setShowDelay(false); }}> setDelay(ev.target.value)} disabled={disabled} type="text" variant="standard" fullWidth /> } Other features:
{!showClickUrl && setShowClickUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>} {!showEmail && setShowEmail(true)} sx={{marginRight: 1, marginBottom: 1}}/>} {!showAttachUrl && !showAttachFile && setShowAttachUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>} {!showAttachFile && !showAttachUrl && handleAttachFileClick()} sx={{marginRight: 1, marginBottom: 1}}/>} {!showDelay && setShowDelay(true)} sx={{marginRight: 1, marginBottom: 1}}/>} {!showTopicUrl && setShowTopicUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
For examples and a detailed description of all send features, please refer to the documentation.
{activeRequest && } {!activeRequest && <> setPublishAnother(ev.target.checked)} /> } /> }
); }; const Row = (props) => { return (
{props.children}
); }; const ClosableRow = (props) => { const closable = (props.hasOwnProperty("closable")) ? props.closable : true; return ( {props.children} {closable && } ); }; const DialogIconButton = (props) => { const sx = props.sx || {}; return ( {props.children} ); }; const AttachmentBox = (props) => { const file = props.file; return ( <> Attached file: props.onChangeFilename(ev.target.value)} disabled={props.disabled} />
{formatBytes(file.size)} {props.error && {" "}({props.error}) }
); }; const ExpandingTextField = (props) => { const invisibleFieldRef = useRef(); const [textWidth, setTextWidth] = useState(props.minWidth); const determineTextWidth = () => { const boundingRect = invisibleFieldRef?.current?.getBoundingClientRect(); if (!boundingRect) { return props.minWidth; } return (boundingRect.width >= props.minWidth) ? Math.round(boundingRect.width) : props.minWidth; }; useEffect(() => { setTextWidth(determineTextWidth() + 5); }, [props.value]); return ( <> {props.value} ) }; const DropArea = (props) => { const allowDrag = (ev) => { // This is where we could disallow certain files to be dragged in. // For now we allow all files. ev.dataTransfer.dropEffect = 'copy'; ev.preventDefault(); }; return ( ); }; const DropBox = () => { return ( Drop file here ); } const priorities = { 1: { label: "Min. priority", file: priority1 }, 2: { label: "Low priority", file: priority2 }, 3: { label: "Default priority", file: priority3 }, 4: { label: "High priority", file: priority4 }, 5: { label: "Max. priority", file: priority5 } }; SendDialog.OPEN_MODE_DEFAULT = "default"; SendDialog.OPEN_MODE_DRAG = "drag"; export default SendDialog;