= ({ buttons }) => (
17 |
18 |
19 | {buttons.map((button) => (
20 |
29 | ))}
30 |
31 |
32 | );
33 |
34 | export default ButtonGroupSimple;
35 |
--------------------------------------------------------------------------------
/frontend/src/FileManager/Elements/InputField.tsx:
--------------------------------------------------------------------------------
1 | import React, { ChangeEvent } from "react";
2 | import { TextField, TextFieldProps } from "@mui/material";
3 |
4 | interface InputFieldProps extends Omit {
5 | onChange: (value: string) => void;
6 | }
7 |
8 | export default function InputField(props: InputFieldProps) {
9 | const { onChange, ...rest } = props;
10 |
11 | const handleChange = (event: ChangeEvent) => {
12 | onChange(event.target.value);
13 | };
14 |
15 | return (
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/frontend/src/FileManager/FileManager.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from "react";
2 | import { ThemeProvider } from "@mui/system";
3 | import { FileManagerWrapper } from "./styled";
4 | import FileManagerContainer from "./FileManagerContainer";
5 | import PopupDialog from "./Elements/PopupDialog";
6 | import ImageEditPopup from "./Elements/ImageEditor";
7 | import { useFileManagerState } from "./ContextStore/FileManagerContext";
8 | import useCurrentTheme from "./Hooks/useCurrentTheme";
9 |
10 | const FileManager: React.FC<{ height: number }> = ({ height }) => {
11 | const { fullScreen } = useFileManagerState();
12 | const theme = useCurrentTheme();
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 | };
23 |
24 | export default memo(FileManager);
25 |
--------------------------------------------------------------------------------
/frontend/src/FileManager/FileManagerContainer.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from "react";
2 | import { Paper, Grid } from "@mui/material";
3 | import TopBar from "./Blocks/TopBar";
4 | import FolderBar from "./Blocks/FolderBar";
5 | import FilesBar from "./Blocks/FilesBar";
6 |
7 | const FileManager: React.FC<{}> = () => (
8 |
17 |
18 |
29 |
30 |
31 |
32 |
33 | );
34 |
35 | export default memo(FileManager);
36 |
--------------------------------------------------------------------------------
/frontend/src/FileManager/Hooks/useApiController.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react";
2 | import { FileManagerState, VolumeTypes } from "../types";
3 | import Ec2ServerConnection from "../Api/Ec2ServerConnection";
4 | import S3FrontConnection from "../Api/S3FrontConnection";
5 | import S3ServerConnection from "../Api/S3ServerConnection";
6 |
7 | export const useApiController = (
8 | selectedVolume: FileManagerState["selectedVolume"]
9 | ) => {
10 | const connection = useMemo(() => {
11 | if (!selectedVolume) return null;
12 |
13 | switch (selectedVolume.type) {
14 | case VolumeTypes.SERVER: {
15 | return new Ec2ServerConnection(selectedVolume.endpoint);
16 | }
17 | case VolumeTypes.S3BUCKET_BACK: {
18 | return new S3ServerConnection(
19 | selectedVolume.endpoint,
20 | selectedVolume.bucket
21 | );
22 | }
23 | case VolumeTypes.S3BUCKET_FRONT: {
24 | return new S3FrontConnection(selectedVolume);
25 | }
26 |
27 | default:
28 | return null;
29 | }
30 | }, [selectedVolume]);
31 | return connection;
32 | };
33 |
34 | export default useApiController;
35 |
--------------------------------------------------------------------------------
/frontend/src/FileManager/Hooks/useCurrentTheme.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react";
2 | import dark from "../Themes/dark";
3 | import light from "../Themes/light";
4 | import { useFileManagerState } from "../ContextStore/FileManagerContext";
5 | import { ThemeItemList } from "../types";
6 |
7 | export const themeList: ThemeItemList = [
8 | {
9 | id: "darkTheme",
10 | name: "Dark",
11 | theme: dark,
12 | },
13 | {
14 | id: "lightTheme",
15 | name: "Light",
16 | theme: light,
17 | },
18 | ];
19 | export const useCurrentTheme = () => {
20 | const { settings } = useFileManagerState();
21 | const currentTheme = useMemo(
22 | () =>
23 | themeList.find((theme) => theme.id === settings.selectedTheme)?.theme ??
24 | themeList[1].theme,
25 | [settings.selectedTheme]
26 | );
27 | return currentTheme;
28 | };
29 |
30 | export default useCurrentTheme;
31 |
--------------------------------------------------------------------------------
/frontend/src/FileManager/Hooks/useTexts.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react";
2 | import en from "../Assets/Translations/en";
3 |
4 | const lang = "en";
5 | export const useText = () => {
6 | const allTexts = useMemo(() => {
7 | switch (lang) {
8 | case "en":
9 | return en;
10 | default:
11 | return en;
12 | }
13 | }, []);
14 | return allTexts;
15 | };
16 |
17 | export default useText;
18 |
--------------------------------------------------------------------------------
/frontend/src/FileManager/config.ts:
--------------------------------------------------------------------------------
1 | export const LOCASTORAGE_SETTINGS_KEY = "CRONUS_SETTINGS";
2 | export const VOLUME_SETTINGS_LIST = "";
3 | export const FILE_EXTENSION_MAP = {
4 | icons: {
5 | ".png": "/img/files/png.svg",
6 | ".jpg": "/img/files/jpg.svg",
7 | ".jpeg": "/img/files/jpeg.svg",
8 | ".doc": "/img/files/doc.svg",
9 | ".docx": "/img/files/doc.svg",
10 | ".xls": "/img/files/xls.svg",
11 | ".pdf": "/img/files/pdf.svg",
12 | ".ppt": "/img/files/ppt.svg",
13 | ".svg": "/img/files/svg.svg",
14 | ".xml": "/img/files/xml.svg",
15 | ".psd": "/img/files/psd.svg",
16 | ".ai": "/img/files/ai.svg",
17 | ".mp4": "/img/files/mp4.svg",
18 | ".txt": "/img/files/txt.svg",
19 | ".csv": "/img/files/csv.svg",
20 | ".zip": "/img/files/zip.svg",
21 | ".gif": "/img/files/gif.svg",
22 | ".rar": "/img/files/zip-1.svg",
23 | ".tar.gz": "/img/files/zip-1.svg",
24 | broken: "/img/files/search.svg",
25 | folder: "/img/files/folder.svg",
26 | folderopen: "/img/files/folderopen.svg",
27 | folderfull: "/img/files/folderfull.svg",
28 | },
29 | textFiles: [".txt"],
30 | imageFiles: [".jpg", ".jpeg", ".png", ".svg", ".gif"],
31 | archiveFiles: [".zip", ".tar.gz"],
32 | };
33 |
--------------------------------------------------------------------------------
/frontend/src/FileManager/index.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | /* eslint-disable react/prop-types */
3 | import React, { memo, forwardRef, useImperativeHandle } from "react";
4 | import { FileManagerProps } from "./types";
5 | import { FileManagerProvider } from "./ContextStore/FileManagerContext";
6 | import FileManager from "./FileManager";
7 |
8 | const FileManagerWithProvider: React.FC = forwardRef(
9 | ({ selectItemCallback, height, volumesList }, ref) => {
10 | useImperativeHandle(ref, () => ({
11 | refresh: () => {
12 | console.log("refresh requested");
13 | },
14 | }));
15 | console.log("FileManagerWithProvider rerender");
16 |
17 | return (
18 |
22 |
23 |
24 | );
25 | }
26 | );
27 |
28 | export default memo(FileManagerWithProvider);
29 |
--------------------------------------------------------------------------------
/frontend/src/FileManager/styled.ts:
--------------------------------------------------------------------------------
1 | import { styled } from "@mui/material/styles";
2 | import { Box, BoxProps } from "@mui/material";
3 |
4 | export interface FileManagerWrapperProps extends BoxProps {
5 | expanded: boolean;
6 | }
7 | export const FileManagerWrapper = styled(Box, {
8 | shouldForwardProp: (prop: string) => !["expanded"].includes(prop),
9 | })(({ expanded, height }) => {
10 | if (expanded) {
11 | return {
12 | position: "fixed",
13 | top: "0",
14 | left: "0",
15 | height: "100%",
16 | width: "100%",
17 | zIndex: "999",
18 | padding: "20px",
19 | background: "rgba(255, 255, 255, 0.7)",
20 | };
21 | }
22 | return {
23 | height: `${height}px`,
24 | display: "flex",
25 | alignItems: "stretch",
26 | width: "100%",
27 | };
28 | });
29 |
--------------------------------------------------------------------------------
/frontend/src/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @package Cronus File Manager
3 | * @auth0r Farhad Aliyev Kanni
4 | * @c0pyright Copyright (c) 2011 - 2024, Kannifarhad, Ltd. (http://www.kanni.pro/)
5 | * @license https://opensource.org/licenses/GPL-3.0
6 | * @link http://filemanager.kanni.pro
7 | * */
8 |
9 | import React from "react";
10 | import ReactDOM from "react-dom/client";
11 | import App from "./App";
12 |
13 | const root = ReactDOM.createRoot(
14 | document.getElementById("root") as HTMLElement
15 | );
16 |
17 | root.render();
18 |
--------------------------------------------------------------------------------
/frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"]
20 | }
21 |
--------------------------------------------------------------------------------