ntfy/web/src/components/PublishDialog.jsx

903 lines
31 KiB
React
Raw Normal View History

2023-05-23 21:13:01 +02:00
import * as React from "react";
import { useContext, useEffect, useRef, useState } from "react";
2023-05-24 01:29:47 +02:00
import { Checkbox, Chip, FormControl, FormControlLabel, InputLabel, Link, Select, Tooltip, useMediaQuery } from "@mui/material";
import TextField from "@mui/material/TextField";
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";
2022-03-29 04:54:27 +02:00
import IconButton from "@mui/material/IconButton";
2023-05-23 21:13:01 +02:00
import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon";
import { Close } from "@mui/icons-material";
2022-03-29 04:54:27 +02:00
import MenuItem from "@mui/material/MenuItem";
2022-03-29 21:22:26 +02:00
import Box from "@mui/material/Box";
2023-05-24 09:03:28 +02:00
import { Trans, useTranslation } from "react-i18next";
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 { formatBytes, maybeWithAuth, topicShortUrl, topicUrl, validTopic, validUrl } from "../app/utils";
2022-04-04 14:40:54 +02:00
import AttachmentIcon from "./AttachmentIcon";
2022-03-29 21:22:26 +02:00
import DialogFooter from "./DialogFooter";
2022-12-25 17:59:44 +01:00
import api from "../app/Api";
2022-04-01 14:41:45 +02:00
import userManager from "../app/UserManager";
2022-04-04 16:04:01 +02:00
import EmojiPicker from "./EmojiPicker";
2023-05-24 09:03:28 +02:00
import theme from "./theme";
2022-12-19 15:59:32 +01:00
import session from "../app/Session";
import routes from "./routes";
2023-02-02 21:19:37 +01:00
import accountApi from "../app/AccountApi";
2023-05-23 21:13:01 +02:00
import { UnauthorizedError } from "../app/errors";
import { AccountContext } from "./App";
2022-04-08 16:44:35 +02:00
const PublishDialog = (props) => {
2023-05-23 21:13:01 +02:00
const { t } = useTranslation();
const { account } = useContext(AccountContext);
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 [call, setCall] = 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 [showCall, setShowCall] = 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 updateBaseUrl = (newVal) => {
if (validUrl(newVal)) {
setBaseUrl(newVal.replace(/\/$/, "")); // strip traililng slash after https?://
} else {
setBaseUrl(newVal);
}
};
const handleSubmit = async () => {
const url = new URL(topicUrl(baseUrl, topic));
if (title.trim()) {
url.searchParams.append("title", title.trim());
}
if (tags.trim()) {
url.searchParams.append("tags", tags.trim());
}
if (priority && priority !== 3) {
url.searchParams.append("priority", priority.toString());
}
if (clickUrl.trim()) {
url.searchParams.append("click", clickUrl.trim());
}
if (attachUrl.trim()) {
url.searchParams.append("attach", attachUrl.trim());
}
if (filename.trim()) {
url.searchParams.append("filename", filename.trim());
}
if (email.trim()) {
url.searchParams.append("email", email.trim());
}
if (call.trim()) {
url.searchParams.append("call", call.trim());
}
if (delay.trim()) {
url.searchParams.append("delay", delay.trim());
}
if (attachFile && message.trim()) {
2023-05-24 01:29:47 +02:00
url.searchParams.append("message", message.replaceAll("\n", "\\n").trim());
2023-05-23 21:13:01 +02:00
}
2023-05-24 09:03:28 +02:00
const body = attachFile || message;
2023-05-23 21:13:01 +02:00
try {
const user = await userManager.get(baseUrl);
const headers = maybeWithAuth({}, user);
const progressFn = (ev) => {
if (ev.loaded > 0 && ev.total > 0) {
setStatus(
t("publish_dialog_progress_uploading_detail", {
loaded: formatBytes(ev.loaded),
total: formatBytes(ev.total),
percent: Math.round((ev.loaded * 100.0) / ev.total),
})
);
} else {
2023-05-23 21:13:01 +02:00
setStatus(t("publish_dialog_progress_uploading"));
2022-03-29 21:22:26 +02:00
}
2023-05-23 21:13:01 +02:00
};
const request = api.publishXHR(url, body, headers, progressFn);
setActiveRequest(request);
await request;
if (!publishAnother) {
props.onClose();
} else {
setStatus(t("publish_dialog_message_published"));
setActiveRequest(null);
}
} catch (e) {
2023-05-24 01:29:47 +02:00
setStatus(<Typography sx={{ color: "error.main", maxWidth: "400px" }}>{e}</Typography>);
2023-05-23 21:13:01 +02:00
setActiveRequest(null);
}
};
const checkAttachmentLimits = async (file) => {
try {
const apiAccount = await accountApi.get();
const fileSizeLimit = apiAccount.limits.attachment_file_size ?? 0;
const remainingBytes = apiAccount.stats.attachment_total_size_remaining;
2023-05-24 01:29:47 +02:00
const fileSizeLimitReached = fileSizeLimit > 0 && file.size > fileSizeLimit;
2023-05-23 21:13:01 +02:00
const quotaReached = remainingBytes > 0 && file.size > remainingBytes;
if (fileSizeLimitReached && quotaReached) {
setAttachFileError(
2023-05-23 21:13:01 +02:00
t("publish_dialog_attachment_limits_file_and_quota_reached", {
fileSizeLimit: formatBytes(fileSizeLimit),
remainingBytes: formatBytes(remainingBytes),
})
);
} else if (fileSizeLimitReached) {
setAttachFileError(
2023-05-23 21:13:01 +02:00
t("publish_dialog_attachment_limits_file_reached", {
fileSizeLimit: formatBytes(fileSizeLimit),
})
);
} else if (quotaReached) {
setAttachFileError(
2023-05-23 21:13:01 +02:00
t("publish_dialog_attachment_limits_quota_reached", {
remainingBytes: formatBytes(remainingBytes),
})
);
} else {
setAttachFileError("");
2023-05-23 21:13:01 +02:00
}
} catch (e) {
console.log(`[PublishDialog] Retrieving attachment limits failed`, e);
if (e instanceof UnauthorizedError) {
session.resetAndRedirect(routes.login);
} else {
setAttachFileError(""); // Reset error (rely on server-side checking)
}
}
};
const handleAttachFileClick = () => {
attachFileInput.current.click();
};
const updateAttachFile = async (file) => {
setAttachFile(file);
setFilename(file.name);
props.onResetOpenMode();
await checkAttachmentLimits(file);
};
2023-05-23 21:13:01 +02:00
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 handleAttachFileDragLeave = () => {
setDropZone(false);
if (props.openMode === PublishDialog.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((prevTags) => (prevTags.trim() ? `${prevTags.trim()}, ${emoji}` : emoji));
2023-05-23 21:13:01 +02:00
};
const handleEmojiClose = () => {
setEmojiPickerAnchorEl(null);
};
const priorities = {
1: { label: t("publish_dialog_priority_min"), file: priority1 },
2: { label: t("publish_dialog_priority_low"), file: priority2 },
3: { label: t("publish_dialog_priority_default"), file: priority3 },
4: { label: t("publish_dialog_priority_high"), file: priority4 },
5: { label: t("publish_dialog_priority_max"), file: priority5 },
};
return (
<>
2023-05-24 01:29:47 +02:00
{dropZone && <DropArea onDrop={handleAttachFileDrop} onDragLeave={handleAttachFileDragLeave} />}
<Dialog maxWidth="md" open={open} onClose={props.onCancel} fullScreen={fullScreen}>
2023-05-23 21:13:01 +02:00
<DialogTitle>
{baseUrl && topic
? t("publish_dialog_title_topic", {
topic: topicShortUrl(baseUrl, topic),
})
: t("publish_dialog_title_no_topic")}
</DialogTitle>
<DialogContent>
{dropZone && <DropBox />}
{showTopicUrl && (
<ClosableRow
closable={!!props.baseUrl && !!props.topic}
disabled={disabled}
closeLabel={t("publish_dialog_topic_reset")}
onClose={() => {
setBaseUrl(props.baseUrl);
setTopic(props.topic);
setShowTopicUrl(false);
}}
>
<TextField
margin="dense"
label={t("publish_dialog_base_url_label")}
placeholder={t("publish_dialog_base_url_placeholder")}
value={baseUrl}
onChange={(ev) => updateBaseUrl(ev.target.value)}
disabled={disabled}
type="url"
variant="standard"
sx={{ flexGrow: 1, marginRight: 1 }}
inputProps={{
"aria-label": t("publish_dialog_base_url_label"),
}}
/>
<TextField
margin="dense"
label={t("publish_dialog_topic_label")}
placeholder={t("publish_dialog_topic_placeholder")}
value={topic}
onChange={(ev) => setTopic(ev.target.value)}
disabled={disabled}
type="text"
variant="standard"
autoFocus={!messageFocused}
sx={{ flexGrow: 1 }}
inputProps={{
"aria-label": t("publish_dialog_topic_label"),
}}
/>
</ClosableRow>
)}
<TextField
margin="dense"
label={t("publish_dialog_title_label")}
placeholder={t("publish_dialog_title_placeholder")}
value={title}
onChange={(ev) => setTitle(ev.target.value)}
disabled={disabled}
type="text"
fullWidth
variant="standard"
inputProps={{
"aria-label": t("publish_dialog_title_label"),
}}
/>
<TextField
margin="dense"
label={t("publish_dialog_message_label")}
placeholder={t("publish_dialog_message_placeholder")}
value={message}
onChange={(ev) => setMessage(ev.target.value)}
disabled={disabled}
type="text"
variant="standard"
rows={5}
autoFocus={messageFocused}
fullWidth
multiline
inputProps={{
"aria-label": t("publish_dialog_message_label"),
}}
/>
<div style={{ display: "flex" }}>
2023-05-24 01:29:47 +02:00
<EmojiPicker anchorEl={emojiPickerAnchorEl} onEmojiPick={handleEmojiPick} onClose={handleEmojiClose} />
<DialogIconButton disabled={disabled} onClick={handleEmojiClick} aria-label={t("publish_dialog_emoji_picker_show")}>
2023-05-23 21:13:01 +02:00
<InsertEmoticonIcon />
</DialogIconButton>
<TextField
margin="dense"
label={t("publish_dialog_tags_label")}
placeholder={t("publish_dialog_tags_placeholder")}
value={tags}
onChange={(ev) => setTags(ev.target.value)}
disabled={disabled}
type="text"
variant="standard"
sx={{ flexGrow: 1, marginRight: 1 }}
inputProps={{
"aria-label": t("publish_dialog_tags_label"),
}}
/>
2023-05-24 01:29:47 +02:00
<FormControl variant="standard" margin="dense" sx={{ minWidth: 170, maxWidth: 300, flexGrow: 1 }}>
2023-05-23 21:13:01 +02:00
<InputLabel />
<Select
label={t("publish_dialog_priority_label")}
margin="dense"
value={priority}
onChange={(ev) => setPriority(ev.target.value)}
disabled={disabled}
inputProps={{
"aria-label": t("publish_dialog_priority_label"),
}}
>
{[5, 4, 3, 2, 1].map((priorityMenuItem) => (
2023-05-23 21:13:01 +02:00
<MenuItem
key={`priorityMenuItem${priorityMenuItem}`}
value={priorityMenuItem}
2023-05-23 21:13:01 +02:00
aria-label={t("notifications_priority_x", {
priority: priorityMenuItem,
2023-05-23 21:13:01 +02:00
})}
>
<div style={{ display: "flex", alignItems: "center" }}>
<img
src={priorities[priorityMenuItem].file}
2023-05-23 21:13:01 +02:00
style={{ marginRight: "8px" }}
alt={t("notifications_priority_x", {
priority: priorityMenuItem,
2023-05-23 21:13:01 +02:00
})}
/>
<div>{priorities[priorityMenuItem].label}</div>
2022-04-04 01:51:32 +02:00
</div>
2023-05-23 21:13:01 +02:00
</MenuItem>
))}
</Select>
</FormControl>
</div>
{showClickUrl && (
<ClosableRow
disabled={disabled}
closeLabel={t("publish_dialog_click_reset")}
onClose={() => {
setClickUrl("");
setShowClickUrl(false);
}}
>
<TextField
margin="dense"
label={t("publish_dialog_click_label")}
placeholder={t("publish_dialog_click_placeholder")}
value={clickUrl}
onChange={(ev) => setClickUrl(ev.target.value)}
disabled={disabled}
type="url"
fullWidth
variant="standard"
inputProps={{
"aria-label": t("publish_dialog_click_label"),
}}
/>
</ClosableRow>
)}
{showEmail && (
<ClosableRow
disabled={disabled}
closeLabel={t("publish_dialog_email_reset")}
onClose={() => {
setEmail("");
setShowEmail(false);
}}
>
<TextField
margin="dense"
label={t("publish_dialog_email_label")}
placeholder={t("publish_dialog_email_placeholder")}
value={email}
onChange={(ev) => setEmail(ev.target.value)}
disabled={disabled}
type="email"
variant="standard"
fullWidth
inputProps={{
"aria-label": t("publish_dialog_email_label"),
}}
/>
</ClosableRow>
)}
{showCall && (
<ClosableRow
disabled={disabled}
closeLabel={t("publish_dialog_call_reset")}
onClose={() => {
setCall("");
setShowCall(false);
}}
>
<FormControl fullWidth variant="standard" margin="dense">
<InputLabel />
<Select
label={t("publish_dialog_call_label")}
margin="dense"
value={call}
onChange={(ev) => setCall(ev.target.value)}
disabled={disabled}
inputProps={{
"aria-label": t("publish_dialog_call_label"),
}}
>
{account?.phone_numbers?.map((phoneNumber, i) => (
// TODO(eslint): Possibly just use the phone number as a key?
// eslint-disable-next-line react/no-array-index-key
2023-05-24 01:29:47 +02:00
<MenuItem key={`phoneNumberMenuItem${i}`} value={phoneNumber} aria-label={phoneNumber}>
2023-05-23 21:13:01 +02:00
{t("publish_dialog_call_item", { number: phoneNumber })}
</MenuItem>
))}
</Select>
</FormControl>
</ClosableRow>
)}
{showAttachUrl && (
<ClosableRow
disabled={disabled}
closeLabel={t("publish_dialog_attach_reset")}
onClose={() => {
setAttachUrl("");
setFilename("");
setFilenameEdited(false);
setShowAttachUrl(false);
}}
>
<TextField
margin="dense"
label={t("publish_dialog_attach_label")}
placeholder={t("publish_dialog_attach_placeholder")}
value={attachUrl}
onChange={(ev) => {
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
2022-04-04 01:51:32 +02:00
}
2023-05-23 21:13:01 +02:00
}
}}
disabled={disabled}
type="url"
variant="standard"
sx={{ flexGrow: 5, marginRight: 1 }}
inputProps={{
"aria-label": t("publish_dialog_attach_label"),
}}
/>
<TextField
margin="dense"
label={t("publish_dialog_filename_label")}
placeholder={t("publish_dialog_filename_placeholder")}
value={filename}
onChange={(ev) => {
setFilename(ev.target.value);
setFilenameEdited(true);
}}
disabled={disabled}
type="text"
variant="standard"
sx={{ flexGrow: 1 }}
inputProps={{
"aria-label": t("publish_dialog_filename_label"),
}}
/>
</ClosableRow>
)}
2023-05-24 09:03:28 +02:00
<input type="file" ref={attachFileInput} onChange={handleAttachFileChanged} style={{ display: "none" }} aria-hidden />
2023-05-23 21:13:01 +02:00
{showAttachFile && (
<AttachmentBox
file={attachFile}
filename={filename}
disabled={disabled}
error={attachFileError}
onChangeFilename={(f) => setFilename(f)}
onClose={() => {
setAttachFile(null);
setAttachFileError("");
setFilename("");
}}
/>
)}
{showDelay && (
<ClosableRow
disabled={disabled}
closeLabel={t("publish_dialog_delay_reset")}
onClose={() => {
setDelay("");
setShowDelay(false);
}}
>
<TextField
margin="dense"
label={t("publish_dialog_delay_label")}
placeholder={t("publish_dialog_delay_placeholder", {
unixTimestamp: "1649029748",
relativeTime: "30m",
naturalLanguage: "tomorrow, 9am",
})}
value={delay}
onChange={(ev) => setDelay(ev.target.value)}
disabled={disabled}
type="text"
variant="standard"
fullWidth
inputProps={{
"aria-label": t("publish_dialog_delay_label"),
}}
/>
</ClosableRow>
)}
<Typography variant="body1" sx={{ marginTop: 2, marginBottom: 1 }}>
{t("publish_dialog_other_features")}
</Typography>
<div>
{!showClickUrl && (
<Chip
clickable
disabled={disabled}
label={t("publish_dialog_chip_click_label")}
aria-label={t("publish_dialog_chip_click_label")}
onClick={() => setShowClickUrl(true)}
sx={{ marginRight: 1, marginBottom: 1 }}
/>
)}
{!showEmail && (
<Chip
clickable
disabled={disabled}
label={t("publish_dialog_chip_email_label")}
aria-label={t("publish_dialog_chip_email_label")}
onClick={() => setShowEmail(true)}
sx={{ marginRight: 1, marginBottom: 1 }}
/>
)}
{account?.phone_numbers?.length > 0 && !showCall && (
<Chip
clickable
disabled={disabled}
label={t("publish_dialog_chip_call_label")}
aria-label={t("publish_dialog_chip_call_label")}
onClick={() => {
setShowCall(true);
setCall(account.phone_numbers[0]);
}}
sx={{ marginRight: 1, marginBottom: 1 }}
/>
)}
{!showAttachUrl && !showAttachFile && (
<Chip
clickable
disabled={disabled}
label={t("publish_dialog_chip_attach_url_label")}
aria-label={t("publish_dialog_chip_attach_url_label")}
onClick={() => setShowAttachUrl(true)}
sx={{ marginRight: 1, marginBottom: 1 }}
/>
)}
{!showAttachFile && !showAttachUrl && (
<Chip
clickable
disabled={disabled}
label={t("publish_dialog_chip_attach_file_label")}
aria-label={t("publish_dialog_chip_attach_file_label")}
onClick={() => handleAttachFileClick()}
sx={{ marginRight: 1, marginBottom: 1 }}
/>
)}
{!showDelay && (
<Chip
clickable
disabled={disabled}
label={t("publish_dialog_chip_delay_label")}
aria-label={t("publish_dialog_chip_delay_label")}
onClick={() => setShowDelay(true)}
sx={{ marginRight: 1, marginBottom: 1 }}
/>
)}
{!showTopicUrl && (
<Chip
clickable
disabled={disabled}
label={t("publish_dialog_chip_topic_label")}
aria-label={t("publish_dialog_chip_topic_label")}
onClick={() => setShowTopicUrl(true)}
sx={{ marginRight: 1, marginBottom: 1 }}
/>
)}
{account && !account?.phone_numbers && (
2023-05-24 01:29:47 +02:00
<Tooltip title={t("publish_dialog_chip_call_no_verified_numbers_tooltip")}>
2023-05-23 21:13:01 +02:00
<span>
<Chip
clickable
disabled
label={t("publish_dialog_chip_call_label")}
aria-label={t("publish_dialog_chip_call_label")}
sx={{ marginRight: 1, marginBottom: 1 }}
/>
</span>
</Tooltip>
)}
</div>
<Typography variant="body1" sx={{ marginTop: 1, marginBottom: 1 }}>
<Trans
i18nKey="publish_dialog_details_examples_description"
components={{
2023-05-24 01:29:47 +02:00
docsLink: <Link href="https://ntfy.sh/docs" target="_blank" rel="noopener" />,
2023-05-23 21:13:01 +02:00
}}
/>
</Typography>
</DialogContent>
<DialogFooter status={status}>
2023-05-24 01:29:47 +02:00
{activeRequest && <Button onClick={() => activeRequest.abort()}>{t("publish_dialog_button_cancel_sending")}</Button>}
2023-05-23 21:13:01 +02:00
{!activeRequest && (
<>
<FormControlLabel
label={t("publish_dialog_checkbox_publish_another")}
sx={{ marginRight: 2 }}
control={
<Checkbox
size="small"
checked={publishAnother}
onChange={(ev) => setPublishAnother(ev.target.checked)}
inputProps={{
2023-05-24 01:29:47 +02:00
"aria-label": t("publish_dialog_checkbox_publish_another"),
2023-05-23 21:13:01 +02:00
}}
/>
}
/>
2023-05-24 01:29:47 +02:00
<Button onClick={props.onClose}>{t("publish_dialog_button_cancel")}</Button>
2023-05-23 21:13:01 +02:00
<Button onClick={handleSubmit} disabled={!sendButtonEnabled}>
{t("publish_dialog_button_send")}
</Button>
</>
)}
</DialogFooter>
</Dialog>
</>
);
};
2023-05-24 09:03:28 +02:00
const Row = (props) => (
<div style={{ display: "flex" }} role="row">
{props.children}
</div>
);
2022-03-29 04:54:27 +02:00
const ClosableRow = (props) => {
const closable = props.closable !== undefined ? props.closable : true;
2023-05-23 21:13:01 +02:00
return (
<Row>
{props.children}
{closable && (
2023-05-24 01:29:47 +02:00
<DialogIconButton disabled={props.disabled} onClick={props.onClose} sx={{ marginLeft: "6px" }} aria-label={props.closeLabel}>
2023-05-23 21:13:01 +02:00
<Close />
</DialogIconButton>
)}
</Row>
);
2022-03-29 04:54:27 +02:00
};
const DialogIconButton = (props) => {
2023-05-23 21:13:01 +02:00
const sx = props.sx || {};
return (
<IconButton
color="inherit"
size="large"
edge="start"
sx={{ height: "45px", marginTop: "17px", ...sx }}
onClick={props.onClick}
disabled={props.disabled}
aria-label={props["aria-label"]}
>
{props.children}
</IconButton>
);
2022-03-29 04:54:27 +02:00
};
2022-03-29 21:22:26 +02:00
const AttachmentBox = (props) => {
2023-05-23 21:13:01 +02:00
const { t } = useTranslation();
2023-05-24 09:03:28 +02:00
const { file } = props;
2023-05-23 21:13:01 +02:00
return (
<>
<Typography variant="body1" sx={{ marginTop: 2 }}>
{t("publish_dialog_attached_file_title")}
</Typography>
<Box
sx={{
display: "flex",
alignItems: "center",
padding: 0.5,
borderRadius: "4px",
}}
>
<AttachmentIcon type={file.type} />
<Box sx={{ marginLeft: 1, textAlign: "left" }}>
<ExpandingTextField
minWidth={140}
variant="body2"
placeholder={t("publish_dialog_attached_file_filename_placeholder")}
value={props.filename}
onChange={(ev) => props.onChangeFilename(ev.target.value)}
disabled={props.disabled}
/>
<br />
<Typography variant="body2" sx={{ color: "text.primary" }}>
{formatBytes(file.size)}
{props.error && (
2023-05-24 01:29:47 +02:00
<Typography component="span" sx={{ color: "error.main" }} aria-live="polite">
2023-05-23 21:13:01 +02:00
{" "}
({props.error})
</Typography>
)}
</Typography>
</Box>
2023-05-24 02:16:29 +02:00
<DialogIconButton
disabled={props.disabled}
onClick={props.onClose}
sx={{ marginLeft: "6px" }}
aria-label={t("publish_dialog_attached_file_remove")}
>
2023-05-23 21:13:01 +02:00
<Close />
</DialogIconButton>
</Box>
</>
);
2022-03-29 21:22:26 +02:00
};
2022-03-31 18:03:36 +02:00
const ExpandingTextField = (props) => {
2023-05-23 21:13:01 +02:00
const invisibleFieldRef = useRef();
const [textWidth, setTextWidth] = useState(props.minWidth);
const determineTextWidth = () => {
const boundingRect = invisibleFieldRef?.current?.getBoundingClientRect();
if (!boundingRect) {
return props.minWidth;
}
2023-05-24 01:29:47 +02:00
return boundingRect.width >= props.minWidth ? Math.round(boundingRect.width) : props.minWidth;
2023-05-23 21:13:01 +02:00
};
useEffect(() => {
setTextWidth(determineTextWidth() + 5);
}, [props.value]);
return (
<>
2023-05-24 09:03:28 +02:00
<Typography ref={invisibleFieldRef} component="span" variant={props.variant} aria-hidden sx={{ position: "absolute", left: "-200%" }}>
2023-05-23 21:13:01 +02:00
{props.value}
</Typography>
<TextField
margin="dense"
placeholder={props.placeholder}
value={props.value}
onChange={props.onChange}
type="text"
variant="standard"
sx={{ width: `${textWidth}px`, borderBottom: "none" }}
InputProps={{
style: { fontSize: theme.typography[props.variant].fontSize, paddingBottom: 0, paddingTop: 0 },
2023-05-23 21:13:01 +02:00
"aria-label": props.placeholder,
}}
disabled={props.disabled}
/>
</>
);
2022-03-31 18:03:36 +02:00
};
2022-04-04 01:51:32 +02:00
const DropArea = (props) => {
2023-05-23 21:13:01 +02:00
const allowDrag = (ev) => {
// This is where we could disallow certain files to be dragged in.
// For now we allow all files.
// eslint-disable-next-line no-param-reassign
2023-05-23 21:13:01 +02:00
ev.dataTransfer.dropEffect = "copy";
ev.preventDefault();
};
return (
<Box
sx={{
position: "absolute",
left: 0,
top: 0,
right: 0,
bottom: 0,
zIndex: 10002,
}}
onDrop={props.onDrop}
onDragEnter={allowDrag}
onDragOver={allowDrag}
onDragLeave={props.onDragLeave}
/>
);
2022-04-04 01:51:32 +02:00
};
const DropBox = () => {
2023-05-23 21:13:01 +02:00
const { t } = useTranslation();
return (
<Box
sx={{
position: "absolute",
left: 0,
top: 0,
right: 0,
bottom: 0,
zIndex: 10000,
backgroundColor: "#ffffffbb",
}}
>
<Box
sx={{
position: "absolute",
border: "3px dashed #ccc",
borderRadius: "5px",
left: "40px",
top: "40px",
right: "40px",
bottom: "40px",
zIndex: 10001,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
2023-05-24 01:29:47 +02:00
<Typography variant="h5">{t("publish_dialog_drop_file_here")}</Typography>
2023-05-23 21:13:01 +02:00
</Box>
</Box>
);
};
2022-04-04 01:51:32 +02:00
2022-04-08 16:44:35 +02:00
PublishDialog.OPEN_MODE_DEFAULT = "default";
PublishDialog.OPEN_MODE_DRAG = "drag";
2022-04-04 01:51:32 +02:00
2022-04-08 16:44:35 +02:00
export default PublishDialog;