mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-17 11:45:05 +02:00
React translations
This commit is contained in:
@@ -10,6 +10,7 @@ import {
|
||||
Paper,
|
||||
} from "@mantine/core";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
|
||||
export interface SplitPdfPanelProps {
|
||||
@@ -38,6 +39,7 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
|
||||
params,
|
||||
updateParams,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [status, setStatus] = useState("");
|
||||
@@ -61,7 +63,7 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!file) {
|
||||
setStatus("Please upload a PDF first.");
|
||||
setStatus(t("noFileSelected"));
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -99,7 +101,7 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("Processing split...");
|
||||
setStatus(t("loading"));
|
||||
setIsLoading(true);
|
||||
setErrorMessage(null);
|
||||
|
||||
@@ -108,13 +110,13 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
|
||||
const blob = new Blob([response.data], { type: "application/zip" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
setDownloadUrl(url);
|
||||
setStatus("Download ready.");
|
||||
setStatus(t("downloadComplete"));
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
setErrorMessage(
|
||||
error.response?.data || "An error occurred while splitting the PDF."
|
||||
error.response?.data || t("error.pdfPassword", "An error occurred while splitting the PDF.")
|
||||
);
|
||||
setStatus("Split failed.");
|
||||
setStatus(t("error._value", "Split failed."));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@@ -124,21 +126,21 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Stack gap="sm" mb={16}>
|
||||
<Select
|
||||
label="Split Mode"
|
||||
label={t("split-by-size-or-count.type.label", "Split Mode")}
|
||||
value={mode}
|
||||
onChange={(v) => v && updateParams({ mode: v })}
|
||||
data={[
|
||||
{ value: "byPages", label: "Split by Pages (e.g. 1,3,5-10)" },
|
||||
{ value: "bySections", label: "Split by Grid Sections" },
|
||||
{ value: "bySizeOrCount", label: "Split by Size or Count" },
|
||||
{ value: "byChapters", label: "Split by Chapters" },
|
||||
{ value: "byPages", label: t("split.header", "Split by Pages") + " (e.g. 1,3,5-10)" },
|
||||
{ value: "bySections", label: t("split-by-sections.title", "Split by Grid Sections") },
|
||||
{ value: "bySizeOrCount", label: t("split-by-size-or-count.title", "Split by Size or Count") },
|
||||
{ value: "byChapters", label: t("splitByChapters.title", "Split by Chapters") },
|
||||
]}
|
||||
/>
|
||||
|
||||
{mode === "byPages" && (
|
||||
<TextInput
|
||||
label="Pages"
|
||||
placeholder="e.g. 1,3,5-10"
|
||||
label={t("split.splitPages", "Pages")}
|
||||
placeholder={t("pageSelectionPrompt", "e.g. 1,3,5-10")}
|
||||
value={pages}
|
||||
onChange={(e) => updateParams({ pages: e.target.value })}
|
||||
/>
|
||||
@@ -147,23 +149,25 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
|
||||
{mode === "bySections" && (
|
||||
<Stack gap="sm">
|
||||
<TextInput
|
||||
label="Horizontal Divisions"
|
||||
label={t("split-by-sections.horizontal.label", "Horizontal Divisions")}
|
||||
type="number"
|
||||
min="0"
|
||||
max="300"
|
||||
value={hDiv}
|
||||
onChange={(e) => updateParams({ hDiv: e.target.value })}
|
||||
placeholder={t("split-by-sections.horizontal.placeholder", "Enter number of horizontal divisions")}
|
||||
/>
|
||||
<TextInput
|
||||
label="Vertical Divisions"
|
||||
label={t("split-by-sections.vertical.label", "Vertical Divisions")}
|
||||
type="number"
|
||||
min="0"
|
||||
max="300"
|
||||
value={vDiv}
|
||||
onChange={(e) => updateParams({ vDiv: e.target.value })}
|
||||
placeholder={t("split-by-sections.vertical.placeholder", "Enter number of vertical divisions")}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Merge sections into one PDF"
|
||||
label={t("split-by-sections.merge", "Merge sections into one PDF")}
|
||||
checked={merge}
|
||||
onChange={(e) => updateParams({ merge: e.currentTarget.checked })}
|
||||
/>
|
||||
@@ -173,18 +177,18 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
|
||||
{mode === "bySizeOrCount" && (
|
||||
<Stack gap="sm">
|
||||
<Select
|
||||
label="Split Type"
|
||||
label={t("split-by-size-or-count.type.label", "Split Type")}
|
||||
value={splitType}
|
||||
onChange={(v) => v && updateParams({ splitType: v })}
|
||||
data={[
|
||||
{ value: "size", label: "By Size" },
|
||||
{ value: "pages", label: "By Page Count" },
|
||||
{ value: "docs", label: "By Document Count" },
|
||||
{ value: "size", label: t("split-by-size-or-count.type.size", "By Size") },
|
||||
{ value: "pages", label: t("split-by-size-or-count.type.pageCount", "By Page Count") },
|
||||
{ value: "docs", label: t("split-by-size-or-count.type.docCount", "By Document Count") },
|
||||
]}
|
||||
/>
|
||||
<TextInput
|
||||
label="Split Value"
|
||||
placeholder="e.g. 10MB or 5 pages"
|
||||
label={t("split-by-size-or-count.value.label", "Split Value")}
|
||||
placeholder={t("split-by-size-or-count.value.placeholder", "e.g. 10MB or 5 pages")}
|
||||
value={splitValue}
|
||||
onChange={(e) => updateParams({ splitValue: e.target.value })}
|
||||
/>
|
||||
@@ -194,18 +198,18 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
|
||||
{mode === "byChapters" && (
|
||||
<Stack gap="sm">
|
||||
<TextInput
|
||||
label="Bookmark Level"
|
||||
label={t("splitByChapters.bookmarkLevel", "Bookmark Level")}
|
||||
type="number"
|
||||
value={bookmarkLevel}
|
||||
onChange={(e) => updateParams({ bookmarkLevel: e.target.value })}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Include Metadata"
|
||||
label={t("splitByChapters.includeMetadata", "Include Metadata")}
|
||||
checked={includeMetadata}
|
||||
onChange={(e) => updateParams({ includeMetadata: e.currentTarget.checked })}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Allow Duplicate Bookmarks"
|
||||
label={t("splitByChapters.allowDuplicates", "Allow Duplicate Bookmarks")}
|
||||
checked={allowDuplicates}
|
||||
onChange={(e) => updateParams({ allowDuplicates: e.currentTarget.checked })}
|
||||
/>
|
||||
@@ -213,18 +217,18 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
|
||||
)}
|
||||
|
||||
<Button type="submit" loading={isLoading} fullWidth>
|
||||
{isLoading ? "Processing..." : "Split PDF"}
|
||||
{isLoading ? t("loading") : t("split.submit", "Split PDF")}
|
||||
</Button>
|
||||
|
||||
{status && <p className="text-xs text-gray-600">{status}</p>}
|
||||
|
||||
{errorMessage && (
|
||||
<Notification color="red" title="Error" onClose={() => setErrorMessage(null)}>
|
||||
<Notification color="red" title={t("error._value", "Error")} onClose={() => setErrorMessage(null)}>
|
||||
{errorMessage}
|
||||
</Notification>
|
||||
)}
|
||||
|
||||
{status === "Download ready." && downloadUrl && (
|
||||
{status === t("downloadComplete") && downloadUrl && (
|
||||
<Button
|
||||
component="a"
|
||||
href={downloadUrl}
|
||||
@@ -233,7 +237,7 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
|
||||
color="green"
|
||||
fullWidth
|
||||
>
|
||||
Download Split PDF
|
||||
{t("downloadPdf", "Download Split PDF")}
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user