handleFileRemove(index) : handleAbortUpload}
>
@@ -197,4 +199,4 @@ const UploadItem = ({
);
};
-export default UploadItem;
+export default injectIntl(UploadItem);
diff --git a/frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx b/frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx
index e367d70..cd15d15 100644
--- a/frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx
+++ b/frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx
@@ -3,8 +3,9 @@ import { MdHome, MdMoreHoriz, MdOutlineNavigateNext } from "react-icons/md";
import { useFileNavigation } from "../../contexts/FileNavigationContext";
import { useDetectOutsideClick } from "../../hooks/useDetectOutsideClick";
import "./BreadCrumb.scss";
+import {injectIntl} from "react-intl";
-const BreadCrumb = () => {
+const BreadCrumb = ({intl}) => {
const [folders, setFolders] = useState([]);
const [hiddenFolders, setHiddenFolders] = useState([]);
const [hiddenFoldersWidth, setHiddenFoldersWidth] = useState([]);
@@ -23,7 +24,7 @@ const BreadCrumb = () => {
let path = "";
return currentPath?.split("/").map((item) => {
return {
- name: item || "Home",
+ name: item || intl.formatMessage({id: `home`}),
path: item === "" ? item : (path += `/${item}`),
};
});
@@ -92,7 +93,7 @@ const BreadCrumb = () => {
className="folder-name folder-name-btn"
onClick={() => setShowHiddenFolders(true)}
ref={moreBtnRef}
- title="Show more folders"
+ title={intl.formatMessage({id: `showMoreFolder`})}
>
@@ -122,4 +123,4 @@ const BreadCrumb = () => {
BreadCrumb.displayName = "BreadCrumb";
-export default BreadCrumb;
+export default injectIntl(BreadCrumb);
diff --git a/frontend/src/FileManager/FileList/FileItem.jsx b/frontend/src/FileManager/FileList/FileItem.jsx
index 679dd10..9548313 100644
--- a/frontend/src/FileManager/FileList/FileItem.jsx
+++ b/frontend/src/FileManager/FileList/FileItem.jsx
@@ -10,6 +10,7 @@ import { useSelection } from "../../contexts/SelectionContext";
import { useClipBoard } from "../../contexts/ClipboardContext";
import { useLayout } from "../../contexts/LayoutContext";
import Checkbox from "../../components/Checkbox/Checkbox";
+import {injectIntl} from "react-intl";
const dragIconSize = 50;
@@ -25,6 +26,7 @@ const FileItem = ({
triggerAction,
handleContextMenu,
setLastSelectedFile,
+ intl
}) => {
const [fileSelected, setFileSelected] = useState(false);
const [lastClickTime, setLastClickTime] = useState(0);
@@ -260,7 +262,7 @@ const FileItem = ({
}}
className="drag-move-tooltip"
>
- Move to
{file.name}
+ {intl.formatMessage({id: `moveTo`})}
{file.name}
This folder is empty.
+ {
+const FilesHeader = ({ unselectFiles, intl }) => {
const [showSelectAll, setShowSelectAll] = useState(false);
const { selectedFiles, setSelectedFiles } = useSelection();
@@ -30,14 +31,14 @@ const FilesHeader = ({ unselectFiles }) => {
>
{(showSelectAll || allFilesSelected) && (
-
- Name
- Modified
- Size
+ {intl.formatMessage({id: `name`})}
+ {intl.formatMessage({id: `modified`})}
+ {intl.formatMessage({id: `size`})}
);
};
-export default FilesHeader;
+export default injectIntl(FilesHeader);
diff --git a/frontend/src/FileManager/FileList/useFileList.jsx b/frontend/src/FileManager/FileList/useFileList.jsx
index 1e86a94..a66e92e 100644
--- a/frontend/src/FileManager/FileList/useFileList.jsx
+++ b/frontend/src/FileManager/FileList/useFileList.jsx
@@ -11,8 +11,9 @@ import { useLayout } from "../../contexts/LayoutContext";
import { useFileNavigation } from "../../contexts/FileNavigationContext";
import { duplicateNameHandler } from "../../utils/duplicateNameHandler";
import { validateApiCallback } from "../../utils/validateApiCallback";
+import {injectIntl} from "react-intl";
-const useFileList = (onRefresh, enableFilePreview, triggerAction) => {
+const useFileList = (onRefresh, enableFilePreview, triggerAction, intl) => {
const [selectedFileIndexes, setSelectedFileIndexes] = useState([]);
const [visible, setVisible] = useState(false);
const [isSelectionCtx, setIsSelectionCtx] = useState(false);
@@ -85,12 +86,12 @@ const useFileList = (onRefresh, enableFilePreview, triggerAction) => {
const emptySelecCtxItems = [
{
- title: "View",
+ title: intl.formatMessage({id: `view`}),
icon: activeLayout === "grid" ? e.preventDefault()} style={customStyles}>
+
+
@@ -114,6 +117,7 @@ const FileManager = ({
+
);
};
@@ -161,6 +165,7 @@ FileManager.propTypes = {
filePreviewComponent: PropTypes.func,
primaryColor: PropTypes.string,
fontFamily: PropTypes.string,
+ locale: PropTypes.string,
};
export default FileManager;
diff --git a/frontend/src/FileManager/NavigationPane/NavigationPane.jsx b/frontend/src/FileManager/NavigationPane/NavigationPane.jsx
index be7d2bf..f34064f 100644
--- a/frontend/src/FileManager/NavigationPane/NavigationPane.jsx
+++ b/frontend/src/FileManager/NavigationPane/NavigationPane.jsx
@@ -3,8 +3,9 @@ import FolderTree from "./FolderTree";
import { getParentPath } from "../../utils/getParentPath";
import { useFiles } from "../../contexts/FilesContext";
import "./NavigationPane.scss";
+import {injectIntl} from "react-intl";
-const NavigationPane = ({ onFileOpen }) => {
+const NavigationPane = ({intl, onFileOpen}) => {
const [foldersTree, setFoldersTree] = useState([]);
const { files } = useFiles();
@@ -40,7 +41,7 @@ const NavigationPane = ({ onFileOpen }) => {
})}
) : (
- Nothing here yet
+ {intl.formatMessage({id: `nothingHereYet`})}
)}
);
@@ -48,4 +49,4 @@ const NavigationPane = ({ onFileOpen }) => {
NavigationPane.displayName = "NavigationPane";
-export default NavigationPane;
+export default injectIntl(NavigationPane);
diff --git a/frontend/src/FileManager/Toolbar/LayoutToggler.jsx b/frontend/src/FileManager/Toolbar/LayoutToggler.jsx
index 0975efd..f46bbc9 100644
--- a/frontend/src/FileManager/Toolbar/LayoutToggler.jsx
+++ b/frontend/src/FileManager/Toolbar/LayoutToggler.jsx
@@ -2,8 +2,9 @@ import { BsGridFill } from "react-icons/bs";
import { FaCheck, FaListUl } from "react-icons/fa6";
import { useDetectOutsideClick } from "../../hooks/useDetectOutsideClick";
import { useLayout } from "../../contexts/LayoutContext";
+import {injectIntl} from "react-intl";
-const LayoutToggler = ({ setShowToggleViewMenu, onLayoutChange }) => {
+const LayoutToggler = ({ setShowToggleViewMenu, onLayoutChange, intl }) => {
const toggleViewRef = useDetectOutsideClick(() => {
setShowToggleViewMenu(false);
});
@@ -12,12 +13,12 @@ const LayoutToggler = ({ setShowToggleViewMenu, onLayoutChange }) => {
const layoutOptions = [
{
key: "grid",
- name: "Grid",
+ name: intl.formatMessage({id: `grid`}),
icon:
handleCutCopy(true)}>
Cut
+ {intl.formatMessage({id: `cut`})}
handleCutCopy(false)}>
Copy
+ {intl.formatMessage({id: `copy`})}
{clipBoard?.files?.length > 0 && (
Paste
+ {intl.formatMessage({id: `paste`})}
)}
{selectedFiles.length === 1 && (
@@ -107,13 +109,13 @@ const Toolbar = ({
onClick={() => triggerAction.show("rename")}
>
Rename
+ {intl.formatMessage({id: `rename`})}
)}
{!selectedFiles.isDirectory && (
Download
+ {intl.formatMessage({id: `download`})}
)}
triggerAction.show("delete")}
>
Delete
+ {intl.formatMessage({id: `delete`})}
setSelectedFiles([])}
>
@@ -177,4 +179,4 @@ const Toolbar = ({
Toolbar.displayName = "Toolbar";
-export default Toolbar;
+export default injectIntl(Toolbar);
diff --git a/frontend/src/FileManager/intlHelper.jsx b/frontend/src/FileManager/intlHelper.jsx
new file mode 100644
index 0000000..e3171e7
--- /dev/null
+++ b/frontend/src/FileManager/intlHelper.jsx
@@ -0,0 +1,15 @@
+import { useIntl } from 'react-intl';
+
+let intl;
+
+export const IntlHelper = () => {
+ intl = useIntl();
+ return null;
+};
+
+export const getIntl = () => {
+ if (!intl) {
+ throw new Error('IntlHelper has not been initialized');
+ }
+ return intl;
+};
diff --git a/frontend/src/FileManager/locales/en-US.js b/frontend/src/FileManager/locales/en-US.js
new file mode 100644
index 0000000..b5e31da
--- /dev/null
+++ b/frontend/src/FileManager/locales/en-US.js
@@ -0,0 +1,48 @@
+const messages = {
+ 'newFolder': 'New Folder',
+ 'upload': 'Upload',
+ 'paste': 'Paste',
+ 'changeView': 'Change View',
+ 'refresh': 'Refresh',
+ 'cut': 'Cut',
+ 'copy': 'Copy',
+ 'rename': 'Rename',
+ 'download': 'Download',
+ 'delete': 'Delete',
+ 'cancel': "Cancel",
+ 'clearSelection': 'Clear Selection',
+ 'completed': "Completed",
+ 'folderNameError': 'A file name cant contain any of the following characters:',
+ 'folderNameAlreadyContains': 'This destination already contains a folder named',
+ 'fileNameChangeWarning': 'If you change a file name extension, the file might become unusable. Are you sure you want to change it?',
+ 'no': 'Hayır',
+ 'yes': 'Evet',
+ 'fileTypeNotAllowed': 'File type is not allowed.',
+ 'fileAlreadyExist': 'File already exists.',
+ 'maxUploadSize': 'Maximum upload size is',
+ 'dragFileToUpload': 'Drag files to upload',
+ 'chooseFile': 'Choose File',
+ 'uploadFail': 'Upload failed.',
+ 'uploaded': 'Uploaded',
+ 'remove': 'Remove',
+ 'abortUpload': 'Abort Upload',
+ 'preview': 'Preview',
+ 'home': 'Home',
+ 'showMoreFolder': 'Show more folders',
+ 'moveTo': 'Move to',
+ 'folderEmpty': 'This folder is empty.',
+ 'selectAll': 'Select all',
+ 'view': 'View',
+ 'grid': 'Grid',
+ 'list': 'List',
+ 'open': 'Open',
+ 'nothingHereYet': 'Nothing here yet',
+ 'name': 'Name',
+ 'modified': 'Modified',
+ 'size': 'Size',
+}
+
+export default {
+ locale: 'en-US',
+ messages,
+}
diff --git a/frontend/src/FileManager/locales/tr-TR.js b/frontend/src/FileManager/locales/tr-TR.js
new file mode 100644
index 0000000..14e40b4
--- /dev/null
+++ b/frontend/src/FileManager/locales/tr-TR.js
@@ -0,0 +1,48 @@
+const messages = {
+ 'newFolder': 'Yeni Klasör',
+ 'upload': 'Dosya Yükle',
+ 'paste': 'Yapıştır',
+ 'changeView': 'Görünümü Değiştir',
+ 'refresh': 'Yenile',
+ 'cut': 'Kes',
+ 'copy': 'Kopyala',
+ 'rename': 'Yeniden İsimlendir',
+ 'download': 'İndir',
+ 'delete': 'Sil',
+ 'cancel': "İptal",
+ 'clearSelection': 'Seçimi Temizle',
+ 'completed': "Tamamlandı",
+ "folderErrorMessage": "Dosya adı aşağıdaki karakterlerden hiçbirini içeremez:",
+ 'folderNameAlreadyContains': 'Bu hedef zaten bu isimle bir klasör içeriyor:',
+ 'fileNameChangeWarning': 'Bir dosya adı uzantısını değiştirirseniz, dosya kullanılamaz hale gelebilir. Bunu değiştirmek istediğinizden emin misiniz?',
+ 'no': 'Hayır',
+ 'yes': 'Evet',
+ 'fileTypeNotAllowed': 'Dosya türüne izin verilmiyor.',
+ 'fileAlreadyExist': 'Dosya zaten mevcut.',
+ 'maxUploadSize': 'Maksimum yükleme boyutu',
+ 'dragFileToUpload': 'Yüklemek için dosyaları sürükleyin',
+ 'chooseFile': 'Dosya Seç',
+ 'uploadFail': 'Yükleme hatası.',
+ 'uploaded': 'Yüklendi',
+ 'remove': 'Kaldır',
+ 'abortUpload': 'Yüklemeyi İptal Et',
+ 'preview': 'Görünüm',
+ 'home': 'Ana Sayfa',
+ 'showMoreFolder': 'Daha fazla klasör göster',
+ 'moveTo': 'Burya Taşı',
+ 'folderEmpty': 'Bu klasör boş.',
+ 'selectAll': 'Hepsini Seç',
+ 'view': 'Görünüm',
+ 'grid': 'Grid',
+ 'list': 'Liste',
+ 'open': 'Aç',
+ 'nothingHereYet': 'Henüz hiçbir şey yok',
+ 'name': 'Ad',
+ 'modified': 'Değiştirilme Tarihi',
+ 'size': 'Boyut',
+}
+
+export default {
+ locale: 'tr-TR',
+ messages,
+}
diff --git a/frontend/src/FileManager/localization.jsx b/frontend/src/FileManager/localization.jsx
new file mode 100644
index 0000000..a76ab8b
--- /dev/null
+++ b/frontend/src/FileManager/localization.jsx
@@ -0,0 +1,31 @@
+import {IntlProvider} from "react-intl";
+import turkish from './locales/tr-TR'
+import english from './locales/en-US'
+import {IntlHelper} from "./intlHelper";
+
+const locales = {
+ 'tr-TR': turkish,
+ 'en-US': english,
+}
+
+const myCustomErrorFunction = () => null
+
+// eslint-disable-next-line react/prop-types
+const Localization = ({children, locale}) => {
+ const currentLocale = locales[locale] || locales['tr-TR'];
+
+ return (
+
+ <>
+
+ )
+}
+
+export default Localization
diff --git a/frontend/src/components/Progress/Progress.jsx b/frontend/src/components/Progress/Progress.jsx
index f9e93b5..112333f 100644
--- a/frontend/src/components/Progress/Progress.jsx
+++ b/frontend/src/components/Progress/Progress.jsx
@@ -1,6 +1,7 @@
import "./Progress.scss";
+import {injectIntl} from "react-intl";
-const Progress = ({ percent = 0, isCanceled = false, isCompleted = false, error }) => {
+const Progress = ({ percent = 0, isCanceled = false, isCompleted = false, error, intl }) => {
return (
{!error && (
@@ -9,16 +10,16 @@ const Progress = ({ percent = 0, isCanceled = false, isCompleted = false, error
)}
{isCanceled ? (
- Canceled
+ {intl.formatMessage({id: `completed`})}
) : error ? (
{error}
) : (
- {isCompleted ? "Completed" : percent + "% done"}
+ {isCompleted ? intl.formatMessage({id: `completed`}) : percent + "% "+intl.formatMessage({id: `completed`})}
)}
);
};
-export default Progress;
+export default injectIntl(Progress);