From 27de5db3e70288d6e1664207a269d87ee14e9baf Mon Sep 17 00:00:00 2001 From: Aaron Liu Date: Sun, 22 Jun 2025 10:57:50 +0800 Subject: [PATCH] chore: format code --- src/api/api.ts | 1 - src/component/Admin/Common/SharesInput.tsx | 4 +- .../Admin/File/FileDialog/FileForm.tsx | 5 +- .../Settings/Appearance/ThemeOptions.tsx | 217 +- .../Admin/Settings/Captcha/CapCaptcha.tsx | 26 +- .../Admin/Settings/Captcha/Captcha.tsx | 85 +- .../Admin/Settings/Captcha/GraphicCaptcha.tsx | 23 +- .../Admin/Settings/Captcha/ReCaptcha.tsx | 16 +- .../Settings/Captcha/TurnstileCaptcha.tsx | 16 +- src/component/Admin/Settings/Email/Email.tsx | 82 +- .../Settings/Filesystem/FileIconList.tsx | 65 +- .../Settings/Filesystem/HexColorInput.tsx | 6 +- .../ViewerSetting/FileViewerRow.tsx | 143 +- .../Admin/Settings/Media/Extractors.tsx | 51 +- .../Admin/Settings/Media/Generators.tsx | 78 +- src/component/Admin/Settings/Queue/Queue.tsx | 51 +- .../Admin/Settings/Queue/QueueCard.tsx | 223 +- .../Settings/Queue/QueueSettingDialog.tsx | 108 +- .../Settings/SiteInformation/SiteURLInput.tsx | 35 +- .../Settings/UserSession/UserSession.tsx | 2 +- .../EditStoragePolicy/FormSections/index.ts | 13 +- .../FormSections/magicVars.ts | 4 +- src/component/Common/BorderLinearProgress.tsx | 3 +- src/component/Common/Captcha/CapCaptcha.tsx | 60 +- src/component/Common/Captcha/Captcha.tsx | 4 +- .../Common/Captcha/DefaultCaptcha.tsx | 11 +- src/component/Common/Captcha/ReCaptchaV2.tsx | 10 +- .../Common/Captcha/TurnstileCaptcha.tsx | 10 +- src/component/Common/CircularProgress.tsx | 69 +- src/component/Common/FadeTransition.css | 12 +- .../Common/Form/OutlineIconTextField.tsx | 22 +- src/component/Common/Nothing.tsx | 12 +- src/component/Common/ResponsiveTabs.tsx | 23 +- src/component/Common/Snackbar/snackbar.tsx | 105 +- src/component/Common/TimeBadge.tsx | 7 +- src/component/Common/User/UserBadge.tsx | 12 +- src/component/Common/User/UserPopover.tsx | 38 +- .../Dialogs/AggregatedErrorDetail.tsx | 29 +- src/component/Dialogs/BatchDownloadLog.tsx | 12 +- src/component/Dialogs/Confirmation.tsx | 12 +- src/component/Dialogs/DialogAccordion.tsx | 77 +- src/component/Dialogs/SelectOption.tsx | 24 +- .../FileManager/ContextMenu/HoverMenu.tsx | 36 +- .../ContextMenu/NewFileTemplateMenuItems.tsx | 11 +- .../ContextMenu/OrganizeMenuItems.tsx | 27 +- .../FileManager/ContextMenu/TagMenuItems.tsx | 25 +- .../FileManager/Dialogs/ChangeIcon.tsx | 35 +- .../FileManager/Dialogs/CreateNew.tsx | 39 +- .../FileManager/Dialogs/DirectLinks.tsx | 6 +- src/component/FileManager/Dialogs/Rename.tsx | 54 +- .../Dialogs/StaleVersionConfirm.tsx | 23 +- src/component/FileManager/Dnd/DragLayer.tsx | 17 +- .../FileManager/Dnd/useDndScrolling.ts | 14 +- .../FileManager/Explorer/FileTag.tsx | 38 +- .../FileManager/Explorer/FileTagSummary.tsx | 146 +- .../Explorer/GridView/GridView.tsx | 24 +- .../Explorer/ListView/ListBody.tsx | 16 +- src/component/FileManager/FileBadge.tsx | 12 +- .../ColorCircle/CircleColorSelector.tsx | 57 +- .../FileInfo/FolderColorQuickAction.tsx | 40 +- src/component/FileManager/FmIndexContext.tsx | 2 +- src/component/FileManager/NewButton.tsx | 4 +- .../Pagination/PaginationFooter.tsx | 25 +- .../FileManager/Pagination/PaginationItem.tsx | 23 +- .../Search/AdvanceSearch/AddCondition.tsx | 37 +- .../Search/AdvanceSearch/AdvanceSearch.tsx | 51 +- .../Search/AdvanceSearch/ConditionBox.tsx | 42 +- .../AdvanceSearch/FileNameCondition.tsx | 17 +- .../AdvanceSearch/FileTypeCondition.tsx | 16 +- .../AdvanceSearch/MetadataCondition.tsx | 8 +- .../Search/AdvanceSearch/TagCondition.tsx | 4 +- .../FileManager/Search/FullSearchOptions.tsx | 18 +- .../FileManager/Search/FuzzySearchResult.tsx | 23 +- .../FileManager/Search/SearchIndicator.tsx | 24 +- .../FileManager/Search/SearchPopup.tsx | 98 +- src/component/FileManager/Sidebar/Details.tsx | 14 +- src/component/FileManager/Sidebar/Header.tsx | 15 +- .../FileManager/Sidebar/Map/MapLoader.tsx | 20 +- .../FileManager/Sidebar/MediaMetaCard.tsx | 53 +- src/component/FileManager/Sidebar/Sidebar.tsx | 11 +- .../FileManager/Sidebar/SidebarDialog.tsx | 8 +- src/component/FileManager/Sidebar/Tags.tsx | 7 +- .../TopBar/BreadcrumbHiddenItem.tsx | 47 +- .../FileManager/TopBar/TopActions.tsx | 34 +- src/component/FileManager/TreeView/Pinned.tsx | 21 +- .../FileManager/TreeView/TreeFile.tsx | 106 +- src/component/Frame/HeadlessFrame.tsx | 16 +- src/component/Frame/NavBar/AppDrawer.tsx | 15 +- .../Frame/NavBar/DarkThemeSwitcher.tsx | 25 +- src/component/Frame/NavBar/DrawerHeader.tsx | 14 +- .../Frame/NavBar/NavBarMainActions.tsx | 8 +- .../Frame/NavBar/NavIconTransition.tsx | 13 +- src/component/Frame/NavBar/SearchBar.tsx | 17 +- src/component/Frame/NavBar/SplitHandle.tsx | 5 +- src/component/Frame/NavBar/TopAppBar.tsx | 52 +- src/component/Icons/Border.tsx | 20 +- .../Pages/Devices/ConnectionInfoDialog.tsx | 26 +- .../Pages/Devices/CreateDAVAccountDialog.tsx | 53 +- .../Pages/Devices/DavAccountList.tsx | 55 +- src/component/Pages/Devices/DavAccountRow.tsx | 46 +- src/component/Pages/Devices/Devices.tsx | 28 +- src/component/Pages/Login/Activate.tsx | 10 +- src/component/Pages/Login/Phases/Phase2FA.tsx | 8 +- .../Login/Phases/PhaseForgetPassword.tsx | 17 +- .../Pages/Login/Phases/PhaseSignupNeeded.tsx | 16 +- src/component/Pages/Login/SessionIntro.tsx | 4 +- src/component/Pages/Login/SideTransition.css | 22 +- src/component/Pages/PageHeader.tsx | 8 +- src/component/Pages/Profile/Profile.tsx | 39 +- .../Pages/Setting/AvatarCropperDialog.tsx | 59 +- src/component/Pages/Setting/AvatarSetting.tsx | 21 +- .../Setting/Security/Disable2FADialog.tsx | 23 +- .../Setting/Security/Enable2FADialog.tsx | 30 +- .../Pages/Setting/SettingListItem.tsx | 10 +- src/component/Pages/Shares/ShareList.tsx | 41 +- src/component/Pages/Tasks/DownloadList.tsx | 59 +- src/component/Pages/Tasks/PieceProgress.tsx | 96 +- src/component/Pages/Tasks/StepProgressBar.tsx | 20 +- src/component/Uploader/PasteUploadDialog.tsx | 24 +- .../Uploader/Popup/ConcurrentOptionDialog.tsx | 14 +- src/component/Uploader/Popup/MoreActions.tsx | 15 +- src/component/Uploader/Popup/TaskDetail.tsx | 11 +- src/component/Uploader/Popup/TaskList.tsx | 66 +- src/component/Uploader/Uploader.tsx | 9 +- src/component/Uploader/UseUpload.tsx | 16 +- src/component/Uploader/core/api/index.ts | 66 +- src/component/Uploader/core/errors/index.ts | 34 +- src/component/Uploader/core/index.ts | 36 +- src/component/Uploader/core/logger.ts | 52 +- src/component/Uploader/core/uploader/base.ts | 25 +- src/component/Uploader/core/uploader/chunk.ts | 21 +- src/component/Uploader/core/uploader/cos.ts | 22 +- src/component/Uploader/core/uploader/obs.ts | 6 +- .../Uploader/core/uploader/onedrive.ts | 34 +- src/component/Uploader/core/uploader/oss.ts | 14 +- .../Uploader/core/uploader/placeholder.ts | 25 +- src/component/Uploader/core/uploader/s3.ts | 19 +- src/component/Uploader/core/utils/pool.ts | 111 +- .../Uploader/core/utils/validator.ts | 12 +- src/component/Viewers/DrawIO/DrawIOViewer.tsx | 41 +- src/component/Viewers/DrawIO/drawio.ts | 4 +- src/component/Viewers/EpubViewer/Epub.tsx | 11 +- .../Viewers/Excalidraw/excalidraw.css | 2 +- src/component/Viewers/ImageViewer/editor.css | 10 +- .../react-photo-view/PhotoProvider.tsx | 12 +- .../react-photo-view/PhotoSlider.less | 4 +- .../react-photo-view/PhotoView.tsx | 18 +- .../react-photo-view/components/ArrowLeft.tsx | 2 +- .../components/ArrowRight.tsx | 2 +- .../react-photo-view/components/CloseIcon.tsx | 2 +- .../components/SlidePortal.tsx | 6 +- .../react-photo-view/components/Spinner.tsx | 6 +- .../hooks/useAdjacentImages.ts | 4 +- .../hooks/useAnimationOrigin.tsx | 14 +- .../hooks/useAnimationPosition.ts | 30 +- .../hooks/useAnimationVisible.tsx | 6 +- .../hooks/useContinuousTap.ts | 4 +- .../hooks/useDebounceCallback.ts | 2 +- .../hooks/useEventListener.ts | 2 +- .../hooks/useForkedVariable.ts | 2 +- .../react-photo-view/hooks/useInitial.ts | 2 +- .../hooks/useIsomorphicLayoutEffect.ts | 4 +- .../react-photo-view/hooks/useMethods.ts | 2 +- .../react-photo-view/hooks/useMountedRef.ts | 2 +- .../hooks/useScrollPosition.ts | 63 +- .../react-photo-view/hooks/useSetState.ts | 4 +- .../react-photo-view/hooks/useTargetScale.ts | 8 +- .../ImageViewer/react-photo-view/index.ts | 6 +- .../react-photo-view/photo-context.ts | 4 +- .../ImageViewer/react-photo-view/types.ts | 11 +- .../react-photo-view/utils/edgeHandle.ts | 10 +- .../utils/getMultipleTouchPosition.ts | 2 +- .../utils/getPositionOnMoveOrScale.ts | 9 +- .../utils/getSuitableImageSize.ts | 6 +- .../react-photo-view/utils/isTouchDevice.ts | 2 +- .../react-photo-view/utils/limitTarget.ts | 2 +- .../ImageViewer/react-photo-view/variables.ts | 2 +- .../Viewers/MarkdownEditor/editor.css | 1911 +++++++++-------- .../Viewers/MusicPlayer/Playlist.tsx | 19 +- .../Viewers/Photopea/SaveAsNewFormat.tsx | 10 +- src/component/Viewers/Video/Artplayer.tsx | 34 +- .../Viewers/Video/SubtitleStyleDialog.tsx | 17 +- src/component/Viewers/Video/artplayer.css | 6 +- src/hooks/delayedHover.tsx | 3 +- src/hooks/useNavigation.tsx | 13 +- src/hooks/useOverflow.tsx | 5 +- src/redux/store.ts | 7 +- src/redux/thunks/share.ts | 2 +- src/redux/thunks/site.ts | 5 +- src/router/PageTitle.tsx | 4 +- src/session/utils.ts | 10 +- src/util/filesystem.ts | 13 +- src/util/zip.js | 46 +- 193 files changed, 2576 insertions(+), 4514 deletions(-) diff --git a/src/api/api.ts b/src/api/api.ts index 4e9018f..0fd5974 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -1973,7 +1973,6 @@ export function sendImport(req: ImportWorkflowService): ThunkResponse { return async (dispatch, _getState) => { return await dispatch( diff --git a/src/component/Admin/Common/SharesInput.tsx b/src/component/Admin/Common/SharesInput.tsx index 7c52cf4..b0b7f5e 100644 --- a/src/component/Admin/Common/SharesInput.tsx +++ b/src/component/Admin/Common/SharesInput.tsx @@ -8,15 +8,13 @@ import { DenseAutocomplete, DenseFilledTextField, NoWrapBox, SquareChip } from " import FileTypeIcon from "../../FileManager/Explorer/FileTypeIcon.tsx"; import LinkDismiss from "../../Icons/LinkDismiss.tsx"; -export interface SharesInputProps { -} +export interface SharesInputProps {} const SharesInput = (props: SharesInputProps) => { const theme = useTheme(); const { t } = useTranslation(); const [options, setOptions] = useState([]); - return ( { {!fileParentLoading && ( <> {fileParent && ( - + )} {!fileParent && "-"} diff --git a/src/component/Admin/Settings/Appearance/ThemeOptions.tsx b/src/component/Admin/Settings/Appearance/ThemeOptions.tsx index 9e462f5..ebed22a 100644 --- a/src/component/Admin/Settings/Appearance/ThemeOptions.tsx +++ b/src/component/Admin/Settings/Appearance/ThemeOptions.tsx @@ -14,7 +14,12 @@ import { useSnackbar } from "notistack"; import { useCallback, useEffect, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { DefaultCloseAction } from "../../../Common/Snackbar/snackbar"; -import { NoWrapTableCell, SecondaryButton, StyledCheckbox, StyledTableContainerPaper } from "../../../Common/StyledComponents"; +import { + NoWrapTableCell, + SecondaryButton, + StyledCheckbox, + StyledTableContainerPaper, +} from "../../../Common/StyledComponents"; import Add from "../../../Icons/Add"; import Delete from "../../../Icons/Delete"; import Edit from "../../../Icons/Edit"; @@ -79,30 +84,39 @@ const ThemeOptions = ({ value, onChange, defaultTheme, onDefaultThemeChange }: T } }, [value]); - const handleSave = useCallback((newOptions: Record) => { - onChange(JSON.stringify(newOptions)); - }, [onChange]); + const handleSave = useCallback( + (newOptions: Record) => { + onChange(JSON.stringify(newOptions)); + }, + [onChange], + ); - const handleDelete = useCallback((id: string) => { - // Prevent deleting the default theme - if (id === defaultTheme) { - enqueueSnackbar({ - message: t("settings.cannotDeleteDefaultTheme"), - variant: "warning", - action: DefaultCloseAction, - }); - return; - } + const handleDelete = useCallback( + (id: string) => { + // Prevent deleting the default theme + if (id === defaultTheme) { + enqueueSnackbar({ + message: t("settings.cannotDeleteDefaultTheme"), + variant: "warning", + action: DefaultCloseAction, + }); + return; + } - const newOptions = { ...options }; - delete newOptions[id]; - handleSave(newOptions); - }, [options, handleSave, defaultTheme, enqueueSnackbar, t]); + const newOptions = { ...options }; + delete newOptions[id]; + handleSave(newOptions); + }, + [options, handleSave, defaultTheme, enqueueSnackbar, t], + ); - const handleEdit = useCallback((id: string) => { - setEditingOption({ id, config: options[id] }); - setIsDialogOpen(true); - }, [options]); + const handleEdit = useCallback( + (id: string) => { + setEditingOption({ id, config: options[id] }); + setIsDialogOpen(true); + }, + [options], + ); const handleAdd = useCallback(() => { // Generate a new default theme option with a random color @@ -113,16 +127,16 @@ const ThemeOptions = ({ value, onChange, defaultTheme, onDefaultThemeChange }: T light: { palette: { primary: { main: randomColor }, - secondary: { main: "#f50057" } - } + secondary: { main: "#f50057" }, + }, }, dark: { palette: { primary: { main: randomColor }, - secondary: { main: "#f50057" } - } - } - } + secondary: { main: "#f50057" }, + }, + }, + }, }); setIsDialogOpen(true); }, []); @@ -132,15 +146,58 @@ const ThemeOptions = ({ value, onChange, defaultTheme, onDefaultThemeChange }: T setEditingOption(null); }, []); - const handleDialogSave = useCallback((id: string, newId: string, config: string) => { - try { - const parsedConfig = JSON.parse(config); + const handleDialogSave = useCallback( + (id: string, newId: string, config: string) => { + try { + const parsedConfig = JSON.parse(config); + const newOptions = { ...options }; + + // If ID has changed (primary color changed), delete the old entry and create a new one + if (id !== newId) { + // Check if the new ID already exists + if (newOptions[newId]) { + enqueueSnackbar({ + message: t("settings.duplicateThemeColor"), + variant: "warning", + action: DefaultCloseAction, + }); + return; + } + + // If we're changing the ID of the default theme, update the default theme reference + if (id === defaultTheme) { + onDefaultThemeChange(newId); + } + + delete newOptions[id]; + } + + newOptions[newId] = parsedConfig; + handleSave(newOptions); + setIsDialogOpen(false); + setEditingOption(null); + } catch (e) { + // Handle error + enqueueSnackbar({ + message: t("settings.invalidThemeConfig"), + variant: "warning", + action: DefaultCloseAction, + }); + } + }, + [options, handleSave, enqueueSnackbar, defaultTheme, onDefaultThemeChange, t], + ); + + const handleColorChange = useCallback( + (id: string, type: "primary" | "secondary", mode: "light" | "dark", color: string) => { const newOptions = { ...options }; - // If ID has changed (primary color changed), delete the old entry and create a new one - if (id !== newId) { + if (type === "primary" && mode === "light") { + // If changing the primary color (which is the ID), we need to create a new entry + const newId = color; + // Check if the new ID already exists - if (newOptions[newId]) { + if (newOptions[newId] && newId !== id) { enqueueSnackbar({ message: t("settings.duplicateThemeColor"), variant: "warning", @@ -149,67 +206,33 @@ const ThemeOptions = ({ value, onChange, defaultTheme, onDefaultThemeChange }: T return; } + const config = { ...newOptions[id] }; + config[mode].palette[type].main = color; + + // Delete old entry and create new one with the updated ID + delete newOptions[id]; + newOptions[newId] = config; + // If we're changing the ID of the default theme, update the default theme reference if (id === defaultTheme) { onDefaultThemeChange(newId); } - - delete newOptions[id]; + } else { + // For other colors, just update the value + newOptions[id][mode].palette[type].main = color; } - newOptions[newId] = parsedConfig; handleSave(newOptions); - setIsDialogOpen(false); - setEditingOption(null); - } catch (e) { - // Handle error - enqueueSnackbar({ - message: t("settings.invalidThemeConfig"), - variant: "warning", - action: DefaultCloseAction, - }); - } - }, [options, handleSave, enqueueSnackbar, defaultTheme, onDefaultThemeChange, t]); + }, + [options, handleSave, enqueueSnackbar, t, defaultTheme, onDefaultThemeChange], + ); - const handleColorChange = useCallback((id: string, type: 'primary' | 'secondary', mode: 'light' | 'dark', color: string) => { - const newOptions = { ...options }; - - if (type === 'primary' && mode === 'light') { - // If changing the primary color (which is the ID), we need to create a new entry - const newId = color; - - // Check if the new ID already exists - if (newOptions[newId] && newId !== id) { - enqueueSnackbar({ - message: t("settings.duplicateThemeColor"), - variant: "warning", - action: DefaultCloseAction, - }); - return; - } - - const config = { ...newOptions[id] }; - config[mode].palette[type].main = color; - - // Delete old entry and create new one with the updated ID - delete newOptions[id]; - newOptions[newId] = config; - - // If we're changing the ID of the default theme, update the default theme reference - if (id === defaultTheme) { - onDefaultThemeChange(newId); - } - } else { - // For other colors, just update the value - newOptions[id][mode].palette[type].main = color; - } - - handleSave(newOptions); - }, [options, handleSave, enqueueSnackbar, t, defaultTheme, onDefaultThemeChange]); - - const handleDefaultThemeChange = useCallback((id: string) => { - onDefaultThemeChange(id); - }, [onDefaultThemeChange]); + const handleDefaultThemeChange = useCallback( + (id: string) => { + onDefaultThemeChange(id); + }, + [onDefaultThemeChange], + ); const optionsArray = useMemo(() => { return Object.entries(options).map(([id, config]) => ({ @@ -229,8 +252,7 @@ const ThemeOptions = ({ value, onChange, defaultTheme, onDefaultThemeChange }: T {optionsArray.length > 0 && ( - +
{t("settings.defaultTheme")} @@ -255,25 +277,25 @@ const ThemeOptions = ({ value, onChange, defaultTheme, onDefaultThemeChange }: T handleColorChange(option.id, 'primary', 'light', color)} + onColorChange={(color) => handleColorChange(option.id, "primary", "light", color)} /> handleColorChange(option.id, 'secondary', 'light', color)} + onColorChange={(color) => handleColorChange(option.id, "secondary", "light", color)} /> handleColorChange(option.id, 'primary', 'dark', color)} + onColorChange={(color) => handleColorChange(option.id, "primary", "dark", color)} /> handleColorChange(option.id, 'secondary', 'dark', color)} + onColorChange={(color) => handleColorChange(option.id, "secondary", "dark", color)} /> @@ -295,12 +317,7 @@ const ThemeOptions = ({ value, onChange, defaultTheme, onDefaultThemeChange }: T )} - } - onClick={handleAdd} - sx={{ mt: 2 }} - > + } onClick={handleAdd} sx={{ mt: 2 }}> {t("settings.addThemeOption")} @@ -317,4 +334,4 @@ const ThemeOptions = ({ value, onChange, defaultTheme, onDefaultThemeChange }: T ); }; -export default ThemeOptions; \ No newline at end of file +export default ThemeOptions; diff --git a/src/component/Admin/Settings/Captcha/CapCaptcha.tsx b/src/component/Admin/Settings/Captcha/CapCaptcha.tsx index 4b8eedf..d6c27dd 100644 --- a/src/component/Admin/Settings/Captcha/CapCaptcha.tsx +++ b/src/component/Admin/Settings/Captcha/CapCaptcha.tsx @@ -32,13 +32,7 @@ const CapCaptcha = ({ values, setSettings }: CapCaptchaProps) => { , - ]} + components={[]} /> @@ -58,13 +52,7 @@ const CapCaptcha = ({ values, setSettings }: CapCaptchaProps) => { , - ]} + components={[]} /> @@ -85,13 +73,7 @@ const CapCaptcha = ({ values, setSettings }: CapCaptchaProps) => { , - ]} + components={[]} /> @@ -100,4 +82,4 @@ const CapCaptcha = ({ values, setSettings }: CapCaptchaProps) => { ); }; -export default CapCaptcha; \ No newline at end of file +export default CapCaptcha; diff --git a/src/component/Admin/Settings/Captcha/Captcha.tsx b/src/component/Admin/Settings/Captcha/Captcha.tsx index 1dc78b0..4e37f1e 100644 --- a/src/component/Admin/Settings/Captcha/Captcha.tsx +++ b/src/component/Admin/Settings/Captcha/Captcha.tsx @@ -2,21 +2,8 @@ import { useTranslation } from "react-i18next"; import * as React from "react"; import { useContext } from "react"; import { SettingContext } from "../SettingWrapper.tsx"; -import { - Box, - Collapse, - FormControl, - FormControlLabel, - ListItemText, - Stack, - Switch, - Typography, -} from "@mui/material"; -import { - NoMarginHelperText, - SettingSection, - SettingSectionContent, -} from "../Settings.tsx"; +import { Box, Collapse, FormControl, FormControlLabel, ListItemText, Stack, Switch, Typography } from "@mui/material"; +import { NoMarginHelperText, SettingSection, SettingSectionContent } from "../Settings.tsx"; import SettingForm from "../../../Pages/Setting/SettingForm.tsx"; import { isTrueVal } from "../../../../session/utils.ts"; import { DenseSelect } from "../../../Common/StyledComponents.tsx"; @@ -54,9 +41,7 @@ const Captcha = () => { } label={t("settings.captchaForLogin")} /> - - {t("settings.captchaForLoginDes")} - + {t("settings.captchaForLoginDes")} @@ -74,9 +59,7 @@ const Captcha = () => { } label={t("settings.captchaForSignup")} /> - - {t("settings.captchaForSignupDes")} - + {t("settings.captchaForSignupDes")} @@ -94,9 +77,7 @@ const Captcha = () => { } label={t("settings.captchaForReset")} /> - - {t("settings.captchaForResetDes")} - + {t("settings.captchaForResetDes")} @@ -117,61 +98,55 @@ const Captcha = () => { value={values.captcha_type} > - + {t("settings.plainCaptcha")} - + {t("settings.reCaptchaV2")} - + {t("settings.turnstile")} - + {t("settings.cap")} - - {t("settings.captchaTypeDes")} - + {t("settings.captchaTypeDes")} - + - + - + - + diff --git a/src/component/Admin/Settings/Captcha/GraphicCaptcha.tsx b/src/component/Admin/Settings/Captcha/GraphicCaptcha.tsx index 3652dfb..83cc131 100644 --- a/src/component/Admin/Settings/Captcha/GraphicCaptcha.tsx +++ b/src/component/Admin/Settings/Captcha/GraphicCaptcha.tsx @@ -1,11 +1,5 @@ import { useTranslation } from "react-i18next"; -import { - FormControl, - FormControlLabel, - ListItemText, - Stack, - Switch, -} from "@mui/material"; +import { FormControl, FormControlLabel, ListItemText, Stack, Switch } from "@mui/material"; import SettingForm from "../../../Pages/Setting/SettingForm.tsx"; import { DenseSelect } from "../../../Common/StyledComponents.tsx"; import { SquareMenuItem } from "../../../FileManager/ContextMenu/ContextMenu.tsx"; @@ -33,16 +27,13 @@ const GraphicCaptcha = ({ values, setSettings }: GraphicCaptchaProps) => { } value={values.captcha_mode} > - {[ - "captchaModeNumber", - "captchaModeLetter", - "captchaModeMath", - "captchaModeNumberLetter", - ].map((k, i) => ( + {["captchaModeNumber", "captchaModeLetter", "captchaModeMath", "captchaModeNumberLetter"].map((k, i) => ( - + {t(`settings.${k}`)} diff --git a/src/component/Admin/Settings/Captcha/ReCaptcha.tsx b/src/component/Admin/Settings/Captcha/ReCaptcha.tsx index d97e17f..5a22d76 100644 --- a/src/component/Admin/Settings/Captcha/ReCaptcha.tsx +++ b/src/component/Admin/Settings/Captcha/ReCaptcha.tsx @@ -31,13 +31,7 @@ const ReCaptcha = ({ values, setSettings }: ReCaptchaProps) => { , - ]} + components={[]} /> @@ -57,13 +51,7 @@ const ReCaptcha = ({ values, setSettings }: ReCaptchaProps) => { , - ]} + components={[]} /> diff --git a/src/component/Admin/Settings/Captcha/TurnstileCaptcha.tsx b/src/component/Admin/Settings/Captcha/TurnstileCaptcha.tsx index 616e26f..d1ced86 100644 --- a/src/component/Admin/Settings/Captcha/TurnstileCaptcha.tsx +++ b/src/component/Admin/Settings/Captcha/TurnstileCaptcha.tsx @@ -31,13 +31,7 @@ const Turnstile = ({ values, setSettings }: TurnstileCaptchaProps) => { , - ]} + components={[]} /> @@ -57,13 +51,7 @@ const Turnstile = ({ values, setSettings }: TurnstileCaptchaProps) => { , - ]} + components={[]} /> diff --git a/src/component/Admin/Settings/Email/Email.tsx b/src/component/Admin/Settings/Email/Email.tsx index 09606e7..0dc38f4 100644 --- a/src/component/Admin/Settings/Email/Email.tsx +++ b/src/component/Admin/Settings/Email/Email.tsx @@ -1,12 +1,4 @@ -import { - Box, - DialogContent, - FormControl, - FormControlLabel, - Stack, - Switch, - Typography -} from "@mui/material"; +import { Box, DialogContent, FormControl, FormControlLabel, Stack, Switch, Typography } from "@mui/material"; import { useSnackbar } from "notistack"; import { useContext, useState } from "react"; import { useTranslation } from "react-i18next"; @@ -18,11 +10,7 @@ import { DenseFilledTextField, SecondaryButton } from "../../../Common/StyledCom import DraggableDialog, { StyledDialogContentText } from "../../../Dialogs/DraggableDialog.tsx"; import MailOutlined from "../../../Icons/MailOutlined.tsx"; import SettingForm from "../../../Pages/Setting/SettingForm.tsx"; -import { - NoMarginHelperText, - SettingSection, - SettingSectionContent, -} from "../Settings.tsx"; +import { NoMarginHelperText, SettingSection, SettingSectionContent } from "../Settings.tsx"; import { SettingContext } from "../SettingWrapper.tsx"; import EmailTemplates from "./EmailTemplates.tsx"; @@ -38,10 +26,12 @@ const Email = () => { const handleTestEmail = async () => { setSending(true); try { - await dispatch(sendTestSMTP({ - to: testEmailAddress, - settings: values, - })); + await dispatch( + sendTestSMTP({ + to: testEmailAddress, + settings: values, + }), + ); enqueueSnackbar({ message: t("settings.testMailSent"), variant: "success", @@ -69,9 +59,7 @@ const Email = () => { title={t("settings.testSMTPSettings")} > - - {t("settings.testSMTPTooltip")} - + {t("settings.testSMTPTooltip")} { - {t("settings.smtp")} + + {t("settings.smtp")} + @@ -95,9 +85,7 @@ const Email = () => { value={values.fromName ?? ""} onChange={(e) => setSettings({ fromName: e.target.value })} /> - - {t("settings.senderNameDes")} - + {t("settings.senderNameDes")} @@ -109,9 +97,7 @@ const Email = () => { value={values.fromAdress ?? ""} onChange={(e) => setSettings({ fromAdress: e.target.value })} /> - - {t("settings.senderAddressDes")} - + {t("settings.senderAddressDes")} @@ -122,9 +108,7 @@ const Email = () => { value={values.smtpHost ?? ""} onChange={(e) => setSettings({ smtpHost: e.target.value })} /> - - {t("settings.smtpServerDes")} - + {t("settings.smtpServerDes")} @@ -137,9 +121,7 @@ const Email = () => { value={values.smtpPort ?? ""} onChange={(e) => setSettings({ smtpPort: e.target.value })} /> - - {t("settings.smtpPortDes")} - + {t("settings.smtpPortDes")} @@ -150,9 +132,7 @@ const Email = () => { value={values.smtpUser ?? ""} onChange={(e) => setSettings({ smtpUser: e.target.value })} /> - - {t("settings.smtpUsernameDes")} - + {t("settings.smtpUsernameDes")} @@ -164,9 +144,7 @@ const Email = () => { value={values.smtpPass ?? ""} onChange={(e) => setSettings({ smtpPass: e.target.value })} /> - - {t("settings.smtpPasswordDes")} - + {t("settings.smtpPasswordDes")} @@ -177,9 +155,7 @@ const Email = () => { value={values.replyTo ?? ""} onChange={(e) => setSettings({ replyTo: e.target.value })} /> - - {t("settings.replyToAddressDes")} - + {t("settings.replyToAddressDes")} @@ -189,16 +165,12 @@ const Email = () => { control={ - setSettings({ smtpEncryption: e.target.checked ? "1" : "0" }) - } + onChange={(e) => setSettings({ smtpEncryption: e.target.checked ? "1" : "0" })} /> } label={t("settings.enforceSSL")} /> - - {t("settings.enforceSSLDes")} - + {t("settings.enforceSSLDes")} @@ -211,18 +183,12 @@ const Email = () => { value={values.mail_keepalive ?? "30"} onChange={(e) => setSettings({ mail_keepalive: e.target.value })} /> - - {t("settings.smtpTTLDes")} - + {t("settings.smtpTTLDes")} - } - onClick={() => setTestEmailOpen(true)} - > + } onClick={() => setTestEmailOpen(true)}> {t("settings.sendTestEmail")} @@ -236,4 +202,4 @@ const Email = () => { ); }; -export default Email; \ No newline at end of file +export default Email; diff --git a/src/component/Admin/Settings/Filesystem/FileIconList.tsx b/src/component/Admin/Settings/Filesystem/FileIconList.tsx index 8d37c86..f68432d 100644 --- a/src/component/Admin/Settings/Filesystem/FileIconList.tsx +++ b/src/component/Admin/Settings/Filesystem/FileIconList.tsx @@ -1,18 +1,7 @@ -import { - Box, - IconButton, - Table, - TableBody, - TableContainer, - TableHead, - TableRow, -} from "@mui/material"; +import { Box, IconButton, Table, TableBody, TableContainer, TableHead, TableRow } from "@mui/material"; import * as React from "react"; import { memo, useMemo, useState } from "react"; -import { - builtInIcons, - FileTypeIconSetting, -} from "../../../FileManager/Explorer/FileTypeIcon.tsx"; +import { builtInIcons, FileTypeIconSetting } from "../../../FileManager/Explorer/FileTypeIcon.tsx"; import { DenseFilledTextField, NoWrapCell, @@ -71,52 +60,28 @@ const IconPreview = ({ icon }: { icon: FileTypeIconSetting }) => { const FileIconList = memo(({ config, onChange }: FileIconListProps) => { const { t } = useTranslation("dashboard"); - const configParsed = useMemo( - (): FileTypeIconSetting[] => JSON.parse(config), - [config], - ); + const configParsed = useMemo((): FileTypeIconSetting[] => JSON.parse(config), [config]); const [inputCache, setInputCache] = useState<{ [key: number]: string | undefined; }>({}); return ( {configParsed?.length > 0 && ( - -
+ +
- - {t("settings.icon")} - - - {t("settings.iconUrl")} - - - {t("settings.iconColor")} - - - {t("settings.iconColorDark")} - - - {t("settings.exts")} - + {t("settings.icon")} + {t("settings.iconUrl")} + {t("settings.iconColor")} + {t("settings.iconColorDark")} + {t("settings.exts")} {configParsed.map((r, i) => ( - + @@ -215,13 +180,7 @@ const FileIconList = memo(({ config, onChange }: FileIconListProps) => { {!r.icon && ( - onChange( - JSON.stringify( - configParsed.filter((_, index) => index !== i), - ), - ) - } + onClick={() => onChange(JSON.stringify(configParsed.filter((_, index) => index !== i)))} size={"small"} > diff --git a/src/component/Admin/Settings/Filesystem/HexColorInput.tsx b/src/component/Admin/Settings/Filesystem/HexColorInput.tsx index e32eb63..849c10f 100644 --- a/src/component/Admin/Settings/Filesystem/HexColorInput.tsx +++ b/src/component/Admin/Settings/Filesystem/HexColorInput.tsx @@ -11,11 +11,7 @@ export interface HexColorInputProps { required?: boolean; } -const HexColorInput = ({ - currentColor, - onColorChange, - ...rest -}: HexColorInputProps) => { +const HexColorInput = ({ currentColor, onColorChange, ...rest }: HexColorInputProps) => { return ( ) => void; } -const FileViewerRow = memo( - ({ viewer, onChange, onDelete }: FileViewerRowProps) => { - const { t } = useTranslation("dashboard"); - const [extCached, setExtCached] = useState(""); - const [editOpen, setEditOpen] = useState(false); - const onClose = useCallback(() => { - setEditOpen(false); - }, [setEditOpen]); - return ( - - { + const { t } = useTranslation("dashboard"); + const [extCached, setExtCached] = useState(""); + const [editOpen, setEditOpen] = useState(false); + const onClose = useCallback(() => { + setEditOpen(false); + }, [setEditOpen]); + return ( + + + + + + {t(`settings.${viewer.type}ViewerType`)} + + {t(viewer.display_name, { + ns: "application", + })} + + + { + onChange({ + ...viewer, + exts: extCached == "" ? viewer.exts : extCached?.split(",")?.map((ext) => ext.trim()), + }); + setExtCached(""); + }} + onChange={(e) => setExtCached(e.target.value)} /> - - - - {t(`settings.${viewer.type}ViewerType`)} - - {t(viewer.display_name, { - ns: "application", - })} - - - { - onChange({ - ...viewer, - exts: - extCached == "" - ? viewer.exts - : extCached?.split(",")?.map((ext) => ext.trim()), - }); - setExtCached(""); - }} - onChange={(e) => setExtCached(e.target.value)} - /> - - - {viewer.templates?.length - ? t("settings.nMapping", { num: viewer.templates?.length }) - : t("share.none")} - - - - onChange({ - ...viewer, - disabled: !e.target.checked, - }) - } - /> - - - setEditOpen(true)}> - + + + {viewer.templates?.length ? t("settings.nMapping", { num: viewer.templates?.length }) : t("share.none")} + + + + onChange({ + ...viewer, + disabled: !e.target.checked, + }) + } + /> + + + setEditOpen(true)}> + + + {viewer.type != ViewerType.builtin && ( + + - {viewer.type != ViewerType.builtin && ( - - - - )} - - - ); - }, -); + )} + + + ); +}); export default FileViewerRow; diff --git a/src/component/Admin/Settings/Media/Extractors.tsx b/src/component/Admin/Settings/Media/Extractors.tsx index 046c558..1c644bc 100644 --- a/src/component/Admin/Settings/Media/Extractors.tsx +++ b/src/component/Admin/Settings/Media/Extractors.tsx @@ -18,16 +18,10 @@ import { useAppDispatch } from "../../../../redux/hooks.ts"; import { isTrueVal } from "../../../../session/utils.ts"; import SizeInput from "../../../Common/SizeInput.tsx"; import { DefaultCloseAction } from "../../../Common/Snackbar/snackbar.tsx"; -import { - DenseFilledTextField, - StyledCheckbox, -} from "../../../Common/StyledComponents.tsx"; +import { DenseFilledTextField, StyledCheckbox } from "../../../Common/StyledComponents.tsx"; import SettingForm from "../../../Pages/Setting/SettingForm.tsx"; import { NoMarginHelperText, SettingSectionContent } from "../Settings.tsx"; -import { - AccordionSummary, - StyledAccordion, -} from "../UserSession/SSOSettings.tsx"; +import { AccordionSummary, StyledAccordion } from "../UserSession/SSOSettings.tsx"; export interface ExtractorsProps { values: { @@ -90,12 +84,11 @@ const Extractors = ({ values, setSetting }: ExtractorsProps) => { const [testing, setTesting] = useState(false); const { enqueueSnackbar } = useSnackbar(); - const handleEnableChange = - (name: string) => (e: React.ChangeEvent) => { - setSetting({ - [name]: e.target.checked ? "1" : "0", - }); - }; + const handleEnableChange = (name: string) => (e: React.ChangeEvent) => { + setSetting({ + [name]: e.target.checked ? "1" : "0", + }); + }; const doTest = (name: string, executable: string) => { setTesting(true); @@ -150,12 +143,7 @@ const Extractors = ({ values, setSetting }: ExtractorsProps) => { endAdornment: ( - doTest( - e.name, - values[e.executableSetting ?? ""], - ) - } + onClick={() => doTest(e.name, values[e.executableSetting ?? ""])} loading={testing} color="primary" > @@ -170,9 +158,7 @@ const Extractors = ({ values, setSetting }: ExtractorsProps) => { }) } /> - - {t("settings.executableDes")} - + {t("settings.executableDes")} )} @@ -189,9 +175,7 @@ const Extractors = ({ values, setSetting }: ExtractorsProps) => { }) } /> - - {t("settings.maxSizeLocalDes")} - + {t("settings.maxSizeLocalDes")} )} @@ -208,17 +192,12 @@ const Extractors = ({ values, setSetting }: ExtractorsProps) => { }) } /> - - {t("settings.maxSizeRemoteDes")} - + {t("settings.maxSizeRemoteDes")} )} {e.additionalSettings?.map((setting) => ( - + {setting.type === "switch" ? ( { } /> )} - - {t(`settings.${setting.des}`)} - + {t(`settings.${setting.des}`)} ))} @@ -259,4 +236,4 @@ const Extractors = ({ values, setSetting }: ExtractorsProps) => { ); }; -export default Extractors; \ No newline at end of file +export default Extractors; diff --git a/src/component/Admin/Settings/Media/Generators.tsx b/src/component/Admin/Settings/Media/Generators.tsx index e2bbf38..eb5d987 100644 --- a/src/component/Admin/Settings/Media/Generators.tsx +++ b/src/component/Admin/Settings/Media/Generators.tsx @@ -1,22 +1,9 @@ import { useTranslation } from "react-i18next"; -import { - AccordionDetails, - Box, - FormControl, - FormControlLabel, - InputAdornment, - Typography, -} from "@mui/material"; +import { AccordionDetails, Box, FormControl, FormControlLabel, InputAdornment, Typography } from "@mui/material"; import { isTrueVal } from "../../../../session/utils.ts"; -import { - AccordionSummary, - StyledAccordion, -} from "../UserSession/SSOSettings.tsx"; +import { AccordionSummary, StyledAccordion } from "../UserSession/SSOSettings.tsx"; import { ExpandMoreRounded } from "@mui/icons-material"; -import { - DenseFilledTextField, - StyledCheckbox, -} from "../../../Common/StyledComponents.tsx"; +import { DenseFilledTextField, StyledCheckbox } from "../../../Common/StyledComponents.tsx"; import { useSnackbar } from "notistack"; import { DefaultCloseAction } from "../../../Common/Snackbar/snackbar.tsx"; import { NoMarginHelperText, SettingSectionContent } from "../Settings.tsx"; @@ -131,25 +118,23 @@ const Generators = ({ values, setSetting }: GeneratorsProps) => { const [testing, setTesting] = useState(false); const { enqueueSnackbar } = useSnackbar(); - const handleEnableChange = - (name: string) => (e: React.ChangeEvent) => { - setSetting({ - [name]: e.target.checked ? "1" : "0", + const handleEnableChange = (name: string) => (e: React.ChangeEvent) => { + setSetting({ + [name]: e.target.checked ? "1" : "0", + }); + const newValues = { ...values, [name]: e.target.checked ? "1" : "0" }; + if ( + (newValues["thumb_libreoffice_enabled"] === "1" || newValues["thumb_music_cover_enabled"] === "1") && + newValues["thumb_builtin_enabled"] === "0" && + newValues["thumb_vips_enabled"] === "0" + ) { + enqueueSnackbar({ + message: t("settings.thumbDependencyWarning"), + variant: "warning", + action: DefaultCloseAction, }); - const newValues = { ...values, [name]: e.target.checked ? "1" : "0" }; - if ( - (newValues["thumb_libreoffice_enabled"] === "1" || - newValues["thumb_music_cover_enabled"] === "1") && - newValues["thumb_builtin_enabled"] === "0" && - newValues["thumb_vips_enabled"] === "0" - ) { - enqueueSnackbar({ - message: t("settings.thumbDependencyWarning"), - variant: "warning", - action: DefaultCloseAction, - }); - } - }; + } + }; const doTest = (name: string, executable: string) => { setTesting(true); @@ -205,12 +190,7 @@ const Generators = ({ values, setSetting }: GeneratorsProps) => { endAdornment: ( - doTest( - g.name, - values[g.executableSetting ?? ""], - ) - } + onClick={() => doTest(g.name, values[g.executableSetting ?? ""])} loading={testing} color="primary" > @@ -225,9 +205,7 @@ const Generators = ({ values, setSetting }: GeneratorsProps) => { }) } /> - - {t("settings.executableDes")} - + {t("settings.executableDes")} )} @@ -245,18 +223,12 @@ const Generators = ({ values, setSetting }: GeneratorsProps) => { }) } /> - - {t("settings.thumbMaxSizeDes")} - + {t("settings.thumbMaxSizeDes")} )} {g.inputs?.map((input) => ( - + { } required={!!input.required} /> - - {t(`settings.${input.des}`)} - + {t(`settings.${input.des}`)} ))} diff --git a/src/component/Admin/Settings/Queue/Queue.tsx b/src/component/Admin/Settings/Queue/Queue.tsx index e48065e..3495104 100644 --- a/src/component/Admin/Settings/Queue/Queue.tsx +++ b/src/component/Admin/Settings/Queue/Queue.tsx @@ -21,7 +21,8 @@ const Queue = () => { dispatch(getQueueMetrics()) .then((res) => { setMetrics(res); - }).finally(() => { + }) + .finally(() => { setLoading(false); }); }; @@ -30,26 +31,32 @@ const Queue = () => { fetchQueueMetrics(); }, []); - return - - } - > - {t("node.refresh")} - - - - {!loading && metrics.map((metric) => ( - - ))} - {loading && Array.from(Array(5)).map((_, index) => ( - - ))} - - ; + return ( + + + }> + {t("node.refresh")} + + + + {!loading && + metrics.map((metric) => ( + + ))} + {loading && + Array.from(Array(5)).map((_, index) => ( + + ))} + + + ); }; -export default Queue; \ No newline at end of file +export default Queue; diff --git a/src/component/Admin/Settings/Queue/QueueCard.tsx b/src/component/Admin/Settings/Queue/QueueCard.tsx index f098e48..9b0da7a 100644 --- a/src/component/Admin/Settings/Queue/QueueCard.tsx +++ b/src/component/Admin/Settings/Queue/QueueCard.tsx @@ -34,11 +34,7 @@ export const QueueCard = ({ queue, settings, metrics, setSettings, loading }: Qu - + {Array.from(Array(5)).map((_, index) => ( ))} @@ -48,115 +44,116 @@ export const QueueCard = ({ queue, settings, metrics, setSettings, loading }: Qu ); } - return - - - {t(`queue.queueName_${queue}`)} - setSettingDialogOpen(true)}> - - - - {t(`queue.queueName_${queue}Des`)} - - {metrics && <> - - theme.palette.success.light, - width: `${(metrics.success_tasks / metrics.submitted_tasks) * 100}%`, - }} - /> - theme.palette.error.light, - width: `${(metrics.failure_tasks / metrics.submitted_tasks) * 100}%`, - }} - /> - theme.palette.action.active, - width: `${(metrics.suspending_tasks / metrics.submitted_tasks) * 100}%`, - }} - /> - theme.palette.info.light, - width: `${(metrics.busy_workers / metrics.submitted_tasks) * 100}%`, - }} - /> - - - - theme.palette.success.light, - }} - /> - {t("queue.success", { - count: metrics.success_tasks, - })} + return ( + + + + + {t(`queue.queueName_${queue}`)} - - theme.palette.error.light, - }} - /> - {t("queue.failed", { - count: metrics.failure_tasks, - })} - - - theme.palette.info.light, - }} - /> - {t("queue.busyWorker", { - count: metrics.busy_workers, - })} - - - theme.palette.action.active, - }} - /> - {t("queue.suspending", { - count: metrics.suspending_tasks, - })} - - - - theme.palette.grey[ - theme.palette.mode === "light" ? 200 : 800 - ], - }} - /> - {t("queue.submited", { - count: metrics.submitted_tasks, - })} - - - } + setSettingDialogOpen(true)}> + + + + + {t(`queue.queueName_${queue}Des`)} + + + {metrics && ( + <> + + theme.palette.success.light, + width: `${(metrics.success_tasks / metrics.submitted_tasks) * 100}%`, + }} + /> + theme.palette.error.light, + width: `${(metrics.failure_tasks / metrics.submitted_tasks) * 100}%`, + }} + /> + theme.palette.action.active, + width: `${(metrics.suspending_tasks / metrics.submitted_tasks) * 100}%`, + }} + /> + theme.palette.info.light, + width: `${(metrics.busy_workers / metrics.submitted_tasks) * 100}%`, + }} + /> + + + + theme.palette.success.light, + }} + /> + {t("queue.success", { + count: metrics.success_tasks, + })} + + + theme.palette.error.light, + }} + /> + {t("queue.failed", { + count: metrics.failure_tasks, + })} + + + theme.palette.info.light, + }} + /> + {t("queue.busyWorker", { + count: metrics.busy_workers, + })} + + + theme.palette.action.active, + }} + /> + {t("queue.suspending", { + count: metrics.suspending_tasks, + })} + + + theme.palette.grey[theme.palette.mode === "light" ? 200 : 800], + }} + /> + {t("queue.submited", { + count: metrics.submitted_tasks, + })} + + + + )} - {queue && ( - setSettingDialogOpen(false)} - queue={queue} - settings={settings} - setSettings={setSettings} - /> - )} - - ; + {queue && ( + setSettingDialogOpen(false)} + queue={queue} + settings={settings} + setSettings={setSettings} + /> + )} + + + ); }; -export default QueueCard; \ No newline at end of file +export default QueueCard; diff --git a/src/component/Admin/Settings/Queue/QueueSettingDialog.tsx b/src/component/Admin/Settings/Queue/QueueSettingDialog.tsx index 56e215d..5d21ea7 100644 --- a/src/component/Admin/Settings/Queue/QueueSettingDialog.tsx +++ b/src/component/Admin/Settings/Queue/QueueSettingDialog.tsx @@ -27,13 +27,7 @@ const NoMarginHelperText = (props: any) => ( /> ); -const QueueSettingDialog = ({ - open, - onClose, - queue, - settings, - setSettings, -}: QueueSettingDialogProps) => { +const QueueSettingDialog = ({ open, onClose, queue, settings, setSettings }: QueueSettingDialogProps) => { const { t } = useTranslation("dashboard"); const formRef = useRef(null); const [localSettings, setLocalSettings] = useState<{ [key: string]: string }>({}); @@ -48,10 +42,10 @@ const QueueSettingDialog = ({ "backoff_factor", "backoff_max_duration", "max_retry", - "retry_delay" + "retry_delay", ]; - settingKeys.forEach(key => { + settingKeys.forEach((key) => { const fullKey = `queue_${queue}_${key}`; queueSettings[key] = settings[fullKey] || ""; }); @@ -76,7 +70,7 @@ const QueueSettingDialog = ({ const updateLocalSetting = (key: string, value: string) => { setLocalSettings((prev: { [key: string]: string }) => ({ ...prev, - [key]: value + [key]: value, })); }; @@ -95,25 +89,25 @@ const QueueSettingDialog = ({ maxWidth: "sm", }} > - + updateLocalSetting("worker_num", e.target.value)} type="number" - slotProps={ - { - htmlInput: { - min: 1, - } - } - } + slotProps={{ + htmlInput: { + min: 1, + }, + }} required /> - - {t("queue.workerNumDes")} - + {t("queue.workerNumDes")} @@ -128,9 +122,7 @@ const QueueSettingDialog = ({ }} required /> - - {t("queue.maxExecutionDes")} - + {t("queue.maxExecutionDes")} @@ -140,19 +132,15 @@ const QueueSettingDialog = ({ value={localSettings.backoff_factor || ""} onChange={(e) => updateLocalSetting("backoff_factor", e.target.value)} type="number" - slotProps={ - { - htmlInput: { - min: 1, - step: 0.1, - } - } - } + slotProps={{ + htmlInput: { + min: 1, + step: 0.1, + }, + }} required /> - - {t("queue.backoffFactorDes")} - + {t("queue.backoffFactorDes")} @@ -162,18 +150,14 @@ const QueueSettingDialog = ({ value={localSettings.backoff_max_duration || ""} onChange={(e) => updateLocalSetting("backoff_max_duration", e.target.value)} type="number" - slotProps={ - { - htmlInput: { - min: 1, - } - } - } + slotProps={{ + htmlInput: { + min: 1, + }, + }} required /> - - {t("queue.backoffMaxDurationDes")} - + {t("queue.backoffMaxDurationDes")} @@ -183,18 +167,14 @@ const QueueSettingDialog = ({ value={localSettings.max_retry || ""} onChange={(e) => updateLocalSetting("max_retry", e.target.value)} type="number" - slotProps={ - { - htmlInput: { - min: 0, - } - } - } + slotProps={{ + htmlInput: { + min: 0, + }, + }} required /> - - {t("queue.maxRetryDes")} - + {t("queue.maxRetryDes")} @@ -204,18 +184,14 @@ const QueueSettingDialog = ({ value={localSettings.retry_delay || ""} onChange={(e) => updateLocalSetting("retry_delay", e.target.value)} type="number" - slotProps={ - { - htmlInput: { - min: 0, - } - } - } + slotProps={{ + htmlInput: { + min: 0, + }, + }} required /> - - {t("queue.retryDelayDes")} - + {t("queue.retryDelayDes")} @@ -223,4 +199,4 @@ const QueueSettingDialog = ({ ); }; -export default QueueSettingDialog; \ No newline at end of file +export default QueueSettingDialog; diff --git a/src/component/Admin/Settings/SiteInformation/SiteURLInput.tsx b/src/component/Admin/Settings/SiteInformation/SiteURLInput.tsx index 081b535..9bb734d 100644 --- a/src/component/Admin/Settings/SiteInformation/SiteURLInput.tsx +++ b/src/component/Admin/Settings/SiteInformation/SiteURLInput.tsx @@ -1,17 +1,7 @@ import { useTranslation } from "react-i18next"; import { useMemo } from "react"; -import { - Box, - Collapse, - Divider, - IconButton, - InputAdornment, - Stack, -} from "@mui/material"; -import { - DenseFilledTextField, - SecondaryButton, -} from "../../../Common/StyledComponents.tsx"; +import { Box, Collapse, Divider, IconButton, InputAdornment, Stack } from "@mui/material"; +import { DenseFilledTextField, SecondaryButton } from "../../../Common/StyledComponents.tsx"; import FormControl from "@mui/material/FormControl"; import Dismiss from "../../../Icons/Dismiss.tsx"; import Add from "../../../Icons/Add.tsx"; @@ -29,12 +19,11 @@ const SiteURLInput = ({ urls, onChange }: SiteURLInputProps) => { return urls.split(",").map((url) => url); }, [urls]); - const onUrlChange = - (index: number) => (e: React.ChangeEvent) => { - const newUrls = [...urlSplit]; - newUrls[index] = e.target.value; - onChange(newUrls.join(",")); - }; + const onUrlChange = (index: number) => (e: React.ChangeEvent) => { + const newUrls = [...urlSplit]; + newUrls[index] = e.target.value; + onChange(newUrls.join(",")); + }; const removeUrl = (index: number) => () => { const newUrls = [...urlSplit]; @@ -58,9 +47,7 @@ const SiteURLInput = ({ urls, onChange }: SiteURLInputProps) => { }} required /> - - {t("settings.primarySiteURLDes")} - + {t("settings.primarySiteURLDes")} {t("settings.secondaryDes")} @@ -93,11 +80,7 @@ const SiteURLInput = ({ urls, onChange }: SiteURLInputProps) => { ))} - } - onClick={() => onChange(`${urls},`)} - > + } onClick={() => onChange(`${urls},`)}> {t("settings.addSecondary")} diff --git a/src/component/Admin/Settings/UserSession/UserSession.tsx b/src/component/Admin/Settings/UserSession/UserSession.tsx index c8aad6e..41c7882 100644 --- a/src/component/Admin/Settings/UserSession/UserSession.tsx +++ b/src/component/Admin/Settings/UserSession/UserSession.tsx @@ -147,7 +147,7 @@ const UserSession = () => { control={} label={ <> - {t("vas.disableSubAddressEmail")} + {t("vas.disableSubAddressEmail")} } diff --git a/src/component/Admin/StoragePolicy/EditStoragePolicy/FormSections/index.ts b/src/component/Admin/StoragePolicy/EditStoragePolicy/FormSections/index.ts index 8a3d0bd..d8ddb7d 100644 --- a/src/component/Admin/StoragePolicy/EditStoragePolicy/FormSections/index.ts +++ b/src/component/Admin/StoragePolicy/EditStoragePolicy/FormSections/index.ts @@ -1,7 +1,6 @@ -export { default as BasicInfoSection } from './BasicInfoSection'; -export { default as DownloadSection } from './DownloadSection'; -export * from './magicVars'; -export { default as MediaMetadataSection } from './MediaMetadataSection'; -export { default as StorageAndUploadSection } from './StorageAndUploadSection'; -export { default as ThumbnailsSection } from './ThumbnailsSection'; - +export { default as BasicInfoSection } from "./BasicInfoSection"; +export { default as DownloadSection } from "./DownloadSection"; +export * from "./magicVars"; +export { default as MediaMetadataSection } from "./MediaMetadataSection"; +export { default as StorageAndUploadSection } from "./StorageAndUploadSection"; +export { default as ThumbnailsSection } from "./ThumbnailsSection"; diff --git a/src/component/Admin/StoragePolicy/EditStoragePolicy/FormSections/magicVars.ts b/src/component/Admin/StoragePolicy/EditStoragePolicy/FormSections/magicVars.ts index 49cf450..b9d1fa0 100644 --- a/src/component/Admin/StoragePolicy/EditStoragePolicy/FormSections/magicVars.ts +++ b/src/component/Admin/StoragePolicy/EditStoragePolicy/FormSections/magicVars.ts @@ -22,7 +22,7 @@ export const commonMagicVars: MagicVar[] = [ export const pathMagicVars: MagicVar[] = [ ...commonMagicVars, - { name: "{path}", value: "policy.magicVar.path", example: "/path/to/" } + { name: "{path}", value: "policy.magicVar.path", example: "/path/to/" }, ]; export const fileMagicVars: MagicVar[] = [ @@ -31,4 +31,4 @@ export const fileMagicVars: MagicVar[] = [ { name: "{ext}", value: "policy.magicVar.extension", example: ".jpg" }, { name: "{originname_without_ext}", value: "policy.magicVar.originFileNameNoext", example: "example" }, { name: "{uuid}", value: "policy.magicVar.uuidV4", example: "550e8400-e29b-41d4-a716-446655440000" }, -]; \ No newline at end of file +]; diff --git a/src/component/Common/BorderLinearProgress.tsx b/src/component/Common/BorderLinearProgress.tsx index c5686c3..b6cf226 100644 --- a/src/component/Common/BorderLinearProgress.tsx +++ b/src/component/Common/BorderLinearProgress.tsx @@ -5,8 +5,7 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({ height: 8, borderRadius: 5, [`&.${linearProgressClasses.colorPrimary}`]: { - backgroundColor: - theme.palette.grey[theme.palette.mode === "light" ? 200 : 800], + backgroundColor: theme.palette.grey[theme.palette.mode === "light" ? 200 : 800], }, [`& .${linearProgressClasses.bar}`]: { borderRadius: 5, diff --git a/src/component/Common/Captcha/CapCaptcha.tsx b/src/component/Common/Captcha/CapCaptcha.tsx index 82099f6..2f4d87a 100644 --- a/src/component/Common/Captcha/CapCaptcha.tsx +++ b/src/component/Common/Captcha/CapCaptcha.tsx @@ -19,14 +19,10 @@ const CapCaptcha = ({ onStateChange, generation, fullWidth, ...rest }: CapProps const scriptLoadedRef = useRef(false); const theme = useTheme(); const { t } = useTranslation("common"); - - const capInstanceURL = useAppSelector( - (state) => state.siteConfig.basic.config.captcha_cap_instance_url, - ); - const capKeyID = useAppSelector( - (state) => state.siteConfig.basic.config.captcha_cap_key_id, - ); - + + const capInstanceURL = useAppSelector((state) => state.siteConfig.basic.config.captcha_cap_instance_url); + const capKeyID = useAppSelector((state) => state.siteConfig.basic.config.captcha_cap_key_id); + // Keep callback reference up to date useEffect(() => { onStateChangeRef.current = onStateChange; @@ -36,18 +32,18 @@ const CapCaptcha = ({ onStateChange, generation, fullWidth, ...rest }: CapProps const applyFullWidthStyles = (widget: HTMLElement) => { const applyStyles = () => { // Style widget container - widget.style.width = '100%'; - widget.style.display = 'block'; - widget.style.boxSizing = 'border-box'; - + widget.style.width = "100%"; + widget.style.display = "block"; + widget.style.boxSizing = "border-box"; + // Style internal captcha element - const captchaElement = widget.shadowRoot?.querySelector('.captcha') || widget.querySelector('.captcha'); + const captchaElement = widget.shadowRoot?.querySelector(".captcha") || widget.querySelector(".captcha"); if (captchaElement) { const captchaEl = captchaElement as HTMLElement; - captchaEl.style.width = '100%'; - captchaEl.style.maxWidth = 'none'; - captchaEl.style.minWidth = '0'; - captchaEl.style.boxSizing = 'border-box'; + captchaEl.style.width = "100%"; + captchaEl.style.maxWidth = "none"; + captchaEl.style.minWidth = "0"; + captchaEl.style.boxSizing = "border-box"; return true; } return false; @@ -60,13 +56,13 @@ const CapCaptcha = ({ onStateChange, generation, fullWidth, ...rest }: CapProps observer.disconnect(); } }); - + observer.observe(widget, { childList: true, subtree: true, - attributes: true + attributes: true, }); - + // Fallback timeout setTimeout(() => { applyStyles(); @@ -85,34 +81,34 @@ const CapCaptcha = ({ onStateChange, generation, fullWidth, ...rest }: CapProps widgetRef.current.remove?.(); widgetRef.current = null; } - + // Clear container captchaRef.current.innerHTML = ""; - + if (typeof window !== "undefined" && (window as any).Cap) { const widget = document.createElement("cap-widget"); widget.setAttribute("data-cap-api-endpoint", `${capInstanceURL.replace(/\/$/, "")}/${capKeyID}/api/`); widget.id = "cap-widget"; - + // Set internationalization attributes (Cap official i18n format) widget.setAttribute("data-cap-i18n-initial-state", t("captcha.cap.human")); widget.setAttribute("data-cap-i18n-verifying-label", t("captcha.cap.verifying")); widget.setAttribute("data-cap-i18n-solved-label", t("captcha.cap.verified")); - + captchaRef.current.appendChild(widget); - + widget.addEventListener("solve", (e: any) => { const token = e.detail.token; if (token) { onStateChangeRef.current({ ticket: token }); } }); - + // Apply fullWidth styles if needed if (fullWidth) { applyFullWidthStyles(widget); } - + widgetRef.current = widget; } }; @@ -130,7 +126,7 @@ const CapCaptcha = ({ onStateChange, generation, fullWidth, ...rest }: CapProps const scriptId = "cap-widget-script"; let script = document.getElementById(scriptId) as HTMLScriptElement; - + const initWidget = () => { scriptLoadedRef.current = true; // Add a small delay to ensure DOM is ready @@ -174,11 +170,11 @@ const CapCaptcha = ({ onStateChange, generation, fullWidth, ...rest }: CapProps } return ( - { - const captchaType = useAppSelector( - (state) => state.siteConfig.basic.config.captcha_type, - ); + const captchaType = useAppSelector((state) => state.siteConfig.basic.config.captcha_type); // const recaptcha = useRecaptcha(setCaptchaLoading); // const tcaptcha = useTCaptcha(setCaptchaLoading); diff --git a/src/component/Common/Captcha/DefaultCaptcha.tsx b/src/component/Common/Captcha/DefaultCaptcha.tsx index c1d4d6d..e201ac3 100644 --- a/src/component/Common/Captcha/DefaultCaptcha.tsx +++ b/src/component/Common/Captcha/DefaultCaptcha.tsx @@ -10,11 +10,7 @@ export interface DefaultCaptchaProps { generation: number; } -const DefaultCaptcha = ({ - onStateChange, - generation, - ...rest -}: DefaultCaptchaProps) => { +const DefaultCaptcha = ({ onStateChange, generation, ...rest }: DefaultCaptchaProps) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -92,8 +88,9 @@ const DefaultCaptcha = ({ htmlInput: { name: "captcha", id: "captcha", - } - }} /> + }, + }} + /> ); }; diff --git a/src/component/Common/Captcha/ReCaptchaV2.tsx b/src/component/Common/Captcha/ReCaptchaV2.tsx index f3373c9..6c8e875 100644 --- a/src/component/Common/Captcha/ReCaptchaV2.tsx +++ b/src/component/Common/Captcha/ReCaptchaV2.tsx @@ -22,17 +22,11 @@ window.recaptchaOptions = { useRecaptchaNet: true, }; -const ReCaptchaV2 = ({ - onStateChange, - generation, - ...rest -}: ReCaptchaV2Props) => { +const ReCaptchaV2 = ({ onStateChange, generation, ...rest }: ReCaptchaV2Props) => { const theme = useTheme(); const captchaRef = useRef(); - const reCaptchaKey = useAppSelector( - (state) => state.siteConfig.basic.config.captcha_ReCaptchaKey, - ); + const reCaptchaKey = useAppSelector((state) => state.siteConfig.basic.config.captcha_ReCaptchaKey); const refreshCaptcha = async () => { captchaRef.current?.reset(); diff --git a/src/component/Common/Captcha/TurnstileCaptcha.tsx b/src/component/Common/Captcha/TurnstileCaptcha.tsx index 5d6778a..3dc506e 100644 --- a/src/component/Common/Captcha/TurnstileCaptcha.tsx +++ b/src/component/Common/Captcha/TurnstileCaptcha.tsx @@ -10,17 +10,11 @@ export interface TurnstileProps { generation: number; } -const TurnstileCaptcha = ({ - onStateChange, - generation, - ...rest -}: TurnstileProps) => { +const TurnstileCaptcha = ({ onStateChange, generation, ...rest }: TurnstileProps) => { const theme = useTheme(); const captchaRef = useRef(); - const turnstileKey = useAppSelector( - (state) => state.siteConfig.basic.config.turnstile_site_id, - ); + const turnstileKey = useAppSelector((state) => state.siteConfig.basic.config.turnstile_site_id); const refreshCaptcha = async () => { captchaRef.current?.reset(); diff --git a/src/component/Common/CircularProgress.tsx b/src/component/Common/CircularProgress.tsx index 7a58413..670ad1e 100644 --- a/src/component/Common/CircularProgress.tsx +++ b/src/component/Common/CircularProgress.tsx @@ -1,9 +1,4 @@ -import { - Box, - CircularProgress, - circularProgressClasses, - CircularProgressProps, -} from "@mui/material"; +import { Box, CircularProgress, circularProgressClasses, CircularProgressProps } from "@mui/material"; import { forwardRef } from "react"; export interface FacebookCircularProgressProps extends CircularProgressProps { @@ -11,38 +6,34 @@ export interface FacebookCircularProgressProps extends CircularProgressProps { fgColor?: string; } -const FacebookCircularProgress = forwardRef( - ({ sx, bgColor, fgColor, ...rest }: FacebookCircularProgressProps, ref) => { - return ( - - - bgColor ?? - theme.palette.grey[theme.palette.mode === "light" ? 200 : 800], - }} - size={40} - thickness={4} - {...rest} - value={100} - /> - fgColor ?? theme.palette.primary.main, - position: "absolute", - left: 0, - [`& .${circularProgressClasses.circle}`]: { - strokeLinecap: "round", - }, - }} - size={40} - thickness={4} - {...rest} - /> - - ); - }, -); +const FacebookCircularProgress = forwardRef(({ sx, bgColor, fgColor, ...rest }: FacebookCircularProgressProps, ref) => { + return ( + + bgColor ?? theme.palette.grey[theme.palette.mode === "light" ? 200 : 800], + }} + size={40} + thickness={4} + {...rest} + value={100} + /> + fgColor ?? theme.palette.primary.main, + position: "absolute", + left: 0, + [`& .${circularProgressClasses.circle}`]: { + strokeLinecap: "round", + }, + }} + size={40} + thickness={4} + {...rest} + /> + + ); +}); export default FacebookCircularProgress; diff --git a/src/component/Common/FadeTransition.css b/src/component/Common/FadeTransition.css index cfbd612..2d973af 100644 --- a/src/component/Common/FadeTransition.css +++ b/src/component/Common/FadeTransition.css @@ -1,17 +1,17 @@ .fade-enter { - opacity: 0; + opacity: 0; } .fade-enter-active { - opacity: 1; + opacity: 1; } .fade-exit { - opacity: 1; + opacity: 1; } .fade-exit-active { - opacity: 0; + opacity: 0; } .fade-enter-active, .fade-exit-active { - transition: opacity 150ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition: opacity 150ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } diff --git a/src/component/Common/Form/OutlineIconTextField.tsx b/src/component/Common/Form/OutlineIconTextField.tsx index b0b23c1..04ebb7c 100644 --- a/src/component/Common/Form/OutlineIconTextField.tsx +++ b/src/component/Common/Form/OutlineIconTextField.tsx @@ -1,19 +1,10 @@ -import { - InputAdornment, - TextField, - TextFieldProps, - useMediaQuery, - useTheme, -} from "@mui/material"; +import { InputAdornment, TextField, TextFieldProps, useMediaQuery, useTheme } from "@mui/material"; export interface OutlineIconTextFieldProps extends TextFieldProps<"outlined"> { icon: React.ReactNode; } -export const OutlineIconTextField = ({ - icon, - ...rest -}: OutlineIconTextFieldProps) => { +export const OutlineIconTextField = ({ icon, ...rest }: OutlineIconTextFieldProps) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down("sm")); return ( @@ -21,11 +12,10 @@ export const OutlineIconTextField = ({ {...rest} slotProps={{ input: { - startAdornment: !isMobile && ( - {icon} - ), + startAdornment: !isMobile && {icon}, ...rest.InputProps, - } - }} /> + }, + }} + /> ); }; diff --git a/src/component/Common/Nothing.tsx b/src/component/Common/Nothing.tsx index 182a91d..10c7099 100644 --- a/src/component/Common/Nothing.tsx +++ b/src/component/Common/Nothing.tsx @@ -9,12 +9,7 @@ export interface NothingProps { size?: number; } -export default function Nothing({ - primary, - secondary, - top = 20, - size = 1, -}: NothingProps) { +export default function Nothing({ primary, secondary, top = 20, size = 1 }: NothingProps) { return ( {secondary && ( - theme.palette.action.disabled }} - > + theme.palette.action.disabled }}> {secondary} )} diff --git a/src/component/Common/ResponsiveTabs.tsx b/src/component/Common/ResponsiveTabs.tsx index a15ef0b..27d9435 100644 --- a/src/component/Common/ResponsiveTabs.tsx +++ b/src/component/Common/ResponsiveTabs.tsx @@ -1,23 +1,10 @@ import * as React from "react"; import { useLayoutEffect, useRef, useState } from "react"; -import { - Box, - ListItemIcon, - ListItemText, - Menu, - MenuItem, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; +import { Box, ListItemIcon, ListItemText, Menu, MenuItem, Typography, useMediaQuery, useTheme } from "@mui/material"; import { StyledTab, StyledTabs } from "./StyledComponents.tsx"; import CaretDown from "../Icons/CaretDown.tsx"; import { useTranslation } from "react-i18next"; -import { - bindMenu, - bindTrigger, - usePopupState, -} from "material-ui-popup-state/hooks"; +import { bindMenu, bindTrigger, usePopupState } from "material-ui-popup-state/hooks"; export interface Tab { label: React.ReactNode; @@ -31,11 +18,7 @@ export interface ResponsiveTabsProps { onChange: (event: React.SyntheticEvent, value: T) => void; } -const ResponsiveTabs = ({ - tabs, - value, - onChange, -}: ResponsiveTabsProps) => { +const ResponsiveTabs = ({ tabs, value, onChange }: ResponsiveTabsProps) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down("sm")); const [hideTabs, setHideTabs] = useState(false); diff --git a/src/component/Common/Snackbar/snackbar.tsx b/src/component/Common/Snackbar/snackbar.tsx index 1f74ea5..325241e 100644 --- a/src/component/Common/Snackbar/snackbar.tsx +++ b/src/component/Common/Snackbar/snackbar.tsx @@ -14,78 +14,71 @@ export const DefaultCloseAction = (snackbarId: SnackbarKey | undefined) => { const { t } = useTranslation(); return ( <> - ); }; -export const ErrorListDetailAction = - (error: Response) => (snackbarId: SnackbarKey | undefined) => { - const { t } = useTranslation(); - const dispatch = useAppDispatch(); +export const ErrorListDetailAction = (error: Response) => (snackbarId: SnackbarKey | undefined) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); - const Close = DefaultCloseAction(snackbarId); + const Close = DefaultCloseAction(snackbarId); - const showDetails = useCallback(() => { - dispatch(showAggregatedErrorDialog(error)); - closeSnackbar(snackbarId); - }, [dispatch, error, snackbarId]); + const showDetails = useCallback(() => { + dispatch(showAggregatedErrorDialog(error)); + closeSnackbar(snackbarId); + }, [dispatch, error, snackbarId]); - return ( - <> - - {Close} - - ); - }; + return ( + <> + + {Close} + + ); +}; -export const ViewDstAction = - (dst: string) => (snackbarId: SnackbarKey | undefined) => { - const { t } = useTranslation(); - const dispatch = useAppDispatch(); +export const ViewDstAction = (dst: string) => (snackbarId: SnackbarKey | undefined) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); - const Close = DefaultCloseAction(snackbarId); + const Close = DefaultCloseAction(snackbarId); - const viewDst = useCallback(() => { - dispatch(navigateToPath(FileManagerIndex.main, dst)); - closeSnackbar(snackbarId); - }, [dispatch, snackbarId]); + const viewDst = useCallback(() => { + dispatch(navigateToPath(FileManagerIndex.main, dst)); + closeSnackbar(snackbarId); + }, [dispatch, snackbarId]); - return ( - <> - - {Close} - - ); - }; + return ( + <> + + {Close} + + ); +}; -export const ViewDownloadLogAction = - (downloadId: string) => (_snackbarId: SnackbarKey | undefined) => { - const { t } = useTranslation(); - const dispatch = useAppDispatch(); +export const ViewDownloadLogAction = (downloadId: string) => (_snackbarId: SnackbarKey | undefined) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); - const viewLogs = useCallback(() => { - dispatch(setBatchDownloadLogDialog({ open: true, id: downloadId })); - }, [dispatch, downloadId]); + const viewLogs = useCallback(() => { + dispatch(setBatchDownloadLogDialog({ open: true, id: downloadId })); + }, [dispatch, downloadId]); - return ( - <> - - - ); - }; + return ( + <> + + + ); +}; export const ViewTaskAction = (path: string = "/tasks") => diff --git a/src/component/Common/TimeBadge.tsx b/src/component/Common/TimeBadge.tsx index ee034c6..99684f1 100644 --- a/src/component/Common/TimeBadge.tsx +++ b/src/component/Common/TimeBadge.tsx @@ -13,12 +13,7 @@ export interface TimeBadgeProps extends TypographyProps { timeAgoThreshold?: number; } -const TimeBadge = ({ - timeAgoThreshold = defaultTimeAgoThreshold, - datetime, - sx, - ...rest -}: TimeBadgeProps) => { +const TimeBadge = ({ timeAgoThreshold = defaultTimeAgoThreshold, datetime, sx, ...rest }: TimeBadgeProps) => { const { t } = useTranslation(); const timeStr = useMemo(() => { if (typeof datetime === "string") { diff --git a/src/component/Common/User/UserBadge.tsx b/src/component/Common/User/UserBadge.tsx index f10d968..75243d2 100644 --- a/src/component/Common/User/UserBadge.tsx +++ b/src/component/Common/User/UserBadge.tsx @@ -31,13 +31,7 @@ const UserBadge = ({ textProps, user, uid, ...rest }: UserBadgeProps) => { maxWidth: "150px", }} > - setUserLoaded(u)} - uid={uid} - {...rest} - /> + setUserLoaded(u)} uid={uid} {...rest} /> {userLoaded ? ( userLoaded.id ? ( @@ -50,9 +44,7 @@ const UserBadge = ({ textProps, user, uid, ...rest }: UserBadgeProps) => { )} - {userLoaded && ( - - )} + {userLoaded && } ); }; diff --git a/src/component/Common/User/UserPopover.tsx b/src/component/Common/User/UserPopover.tsx index 05d6db2..4955509 100644 --- a/src/component/Common/User/UserPopover.tsx +++ b/src/component/Common/User/UserPopover.tsx @@ -1,11 +1,4 @@ -import { - Box, - Button, - PopoverProps, - styled, - Tooltip, - Typography, -} from "@mui/material"; +import { Box, Button, PopoverProps, styled, Tooltip, Typography } from "@mui/material"; import HoverPopover from "material-ui-popup-state/HoverPopover"; import { useCallback, useEffect, useState } from "react"; import { Trans, useTranslation } from "react-i18next"; @@ -26,15 +19,7 @@ const ActionButton = styled(Button)({ minWidth: "initial", }); -export const UserProfile = ({ - user, - open, - displayOnly, -}: { - user: User; - open: boolean; - displayOnly?: boolean; -}) => { +export const UserProfile = ({ user, open, displayOnly }: { user: User; open: boolean; displayOnly?: boolean }) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const navigate = useNavigate(); @@ -55,22 +40,14 @@ export const UserProfile = ({ display: "flex", }} > - + {user.id ? user.nickname : t("application:modals.anonymous")} {displayOnly && ( - + {loadedUser?.group ? loadedUser.group.name : ""} )} @@ -85,12 +62,7 @@ export const UserProfile = ({ , - ]} + components={[]} /> )} diff --git a/src/component/Dialogs/AggregatedErrorDetail.tsx b/src/component/Dialogs/AggregatedErrorDetail.tsx index 662bc8f..270bb48 100644 --- a/src/component/Dialogs/AggregatedErrorDetail.tsx +++ b/src/component/Dialogs/AggregatedErrorDetail.tsx @@ -1,8 +1,6 @@ import { useAppDispatch, useAppSelector } from "../../redux/hooks.ts"; import { useTranslation } from "react-i18next"; -import DraggableDialog, { - StyledDialogContentText, -} from "./DraggableDialog.tsx"; +import DraggableDialog, { StyledDialogContentText } from "./DraggableDialog.tsx"; import { useCallback, useMemo } from "react"; import { closeAggregatedErrorDialog } from "../../redux/globalStateSlice.ts"; import { @@ -44,18 +42,9 @@ const ErrorTable = (props: ErrorTableProps) => { {Object.keys(props.errors).map((id) => ( - + - {props.files[id] && ( - - )} + {props.files[id] && } {!props.files[id] && !id.startsWith(CrUriPrefix) && id} {!props.files[id] && id.startsWith(CrUriPrefix) && ( { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const open = useAppSelector( - (state) => state.globalState.aggregatedErrorDialogOpen, - ); - const files = useAppSelector( - (state) => state.globalState.aggregatedErrorFile, - ); + const open = useAppSelector((state) => state.globalState.aggregatedErrorDialogOpen); + const files = useAppSelector((state) => state.globalState.aggregatedErrorFile); const error = useAppSelector((state) => state.globalState.aggregatedError); const onClose = useCallback(() => { dispatch(closeAggregatedErrorDialog()); @@ -119,9 +104,7 @@ const AggregatedErrorDetail = () => { > - - {rootError && rootError.message} - + {rootError && rootError.message} {files && errors && } {rootError && rootError.cid && ( diff --git a/src/component/Dialogs/BatchDownloadLog.tsx b/src/component/Dialogs/BatchDownloadLog.tsx index ed380bc..9ffa2ab 100644 --- a/src/component/Dialogs/BatchDownloadLog.tsx +++ b/src/component/Dialogs/BatchDownloadLog.tsx @@ -12,15 +12,9 @@ const BatchDownloadLog = () => { const dispatch = useAppDispatch(); const logRef = useRef(null); - const open = useAppSelector( - (state) => state.globalState.batchDownloadLogDialogOpen, - ); - const downloadId = useAppSelector( - (state) => state.globalState.batchDownloadLogDialogId, - ); - const logs = useAppSelector( - (state) => state.globalState.batchDownloadLogDialogLogs?.[downloadId ?? ""], - ); + const open = useAppSelector((state) => state.globalState.batchDownloadLogDialogOpen); + const downloadId = useAppSelector((state) => state.globalState.batchDownloadLogDialogId); + const logs = useAppSelector((state) => state.globalState.batchDownloadLogDialogLogs?.[downloadId ?? ""]); const onClose = useCallback(() => { dispatch(closeBatchDownloadLogDialog()); diff --git a/src/component/Dialogs/Confirmation.tsx b/src/component/Dialogs/Confirmation.tsx index 2014b7c..9953e6f 100644 --- a/src/component/Dialogs/Confirmation.tsx +++ b/src/component/Dialogs/Confirmation.tsx @@ -2,9 +2,7 @@ import { useTranslation } from "react-i18next"; import { DialogContent, Stack } from "@mui/material"; import { useAppDispatch, useAppSelector } from "../../redux/hooks.ts"; import { useCallback } from "react"; -import DraggableDialog, { - StyledDialogContentText, -} from "./DraggableDialog.tsx"; +import DraggableDialog, { StyledDialogContentText } from "./DraggableDialog.tsx"; import { generalDialogPromisePool } from "../../redux/thunks/dialog.ts"; import { closeConfirmDialog } from "../../redux/globalStateSlice.ts"; @@ -13,12 +11,8 @@ const Confirmation = () => { const dispatch = useAppDispatch(); const open = useAppSelector((state) => state.globalState.confirmDialogOpen); - const message = useAppSelector( - (state) => state.globalState.confirmDialogMessage, - ); - const promiseId = useAppSelector( - (state) => state.globalState.confirmPromiseId, - ); + const message = useAppSelector((state) => state.globalState.confirmDialogMessage); + const promiseId = useAppSelector((state) => state.globalState.confirmPromiseId); const onClose = useCallback(() => { dispatch(closeConfirmDialog()); diff --git a/src/component/Dialogs/DialogAccordion.tsx b/src/component/Dialogs/DialogAccordion.tsx index 11b63a5..70e1f32 100644 --- a/src/component/Dialogs/DialogAccordion.tsx +++ b/src/component/Dialogs/DialogAccordion.tsx @@ -1,33 +1,29 @@ import { AccordionDetailsProps, Box, styled } from "@mui/material"; import MuiAccordion, { AccordionProps } from "@mui/material/Accordion"; -import MuiAccordionSummary, { - AccordionSummaryProps, -} from "@mui/material/AccordionSummary"; +import MuiAccordionSummary, { AccordionSummaryProps } from "@mui/material/AccordionSummary"; import MuiAccordionDetails from "@mui/material/AccordionDetails"; import { useState } from "react"; import { CaretDownIcon } from "../FileManager/TreeView/TreeFile.tsx"; import { DefaultButton } from "../Common/StyledComponents.tsx"; -const Accordion = styled((props: AccordionProps) => ( - -))(({ theme, expanded }) => ({ - borderRadius: theme.shape.borderRadius, - backgroundColor: expanded - ? theme.palette.mode == "light" - ? "rgba(0, 0, 0, 0.06)" - : "rgba(255, 255, 255, 0.09)" - : "initial", - "&:not(:last-child)": { - borderBottom: 0, - }, - "&::before": { - display: "none", - }, -})); +const Accordion = styled((props: AccordionProps) => )( + ({ theme, expanded }) => ({ + borderRadius: theme.shape.borderRadius, + backgroundColor: expanded + ? theme.palette.mode == "light" + ? "rgba(0, 0, 0, 0.06)" + : "rgba(255, 255, 255, 0.09)" + : "initial", + "&:not(:last-child)": { + borderBottom: 0, + }, + "&::before": { + display: "none", + }, + }), +); -const AccordionSummary = styled((props: AccordionSummaryProps) => ( - -))(() => ({ +const AccordionSummary = styled((props: AccordionSummaryProps) => )(() => ({ flexDirection: "row-reverse", minHeight: 0, padding: 0, @@ -40,22 +36,17 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({ padding: theme.spacing(2), })); -const SummaryButton = styled(DefaultButton)<{ expanded: boolean }>( - ({ theme, expanded }) => ({ - justifyContent: "flex-start", - backgroundColor: expanded - ? "initial" - : theme.palette.mode == "light" - ? "rgba(0, 0, 0, 0.06)" - : "rgba(255, 255, 255, 0.09)", - "&:hover": { - backgroundColor: - theme.palette.mode == "light" - ? "rgba(0, 0, 0, 0.09)" - : "rgba(255, 255, 255, 0.13)", - }, - }), -); +const SummaryButton = styled(DefaultButton)<{ expanded: boolean }>(({ theme, expanded }) => ({ + justifyContent: "flex-start", + backgroundColor: expanded + ? "initial" + : theme.palette.mode == "light" + ? "rgba(0, 0, 0, 0.06)" + : "rgba(255, 255, 255, 0.09)", + "&:hover": { + backgroundColor: theme.palette.mode == "light" ? "rgba(0, 0, 0, 0.09)" : "rgba(255, 255, 255, 0.13)", + }, +})); export interface DialogAccordionProps { children?: React.ReactNode; @@ -73,17 +64,11 @@ const DialogAccordion = (props: DialogAccordionProps) => { - } - > + }> {props.title} - - {props.children} - + {props.children} ); diff --git a/src/component/Dialogs/SelectOption.tsx b/src/component/Dialogs/SelectOption.tsx index 3b036bc..74ccf89 100644 --- a/src/component/Dialogs/SelectOption.tsx +++ b/src/component/Dialogs/SelectOption.tsx @@ -1,10 +1,5 @@ import { useTranslation } from "react-i18next"; -import { - DialogContent, - List, - ListItemButton, - ListItemText, -} from "@mui/material"; +import { DialogContent, List, ListItemButton, ListItemText } from "@mui/material"; import { useAppDispatch, useAppSelector } from "../../redux/hooks.ts"; import React, { useCallback } from "react"; import DraggableDialog from "./DraggableDialog.tsx"; @@ -15,16 +10,10 @@ const SelectOption = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const open = useAppSelector( - (state) => state.globalState.selectOptionDialogOpen, - ); + const open = useAppSelector((state) => state.globalState.selectOptionDialogOpen); const title = useAppSelector((state) => state.globalState.selectOptionTitle); - const promiseId = useAppSelector( - (state) => state.globalState.selectOptionPromiseId, - ); - const options = useAppSelector( - (state) => state.globalState.selectOptionDialogOptions, - ); + const promiseId = useAppSelector((state) => state.globalState.selectOptionPromiseId); + const options = useAppSelector((state) => state.globalState.selectOptionDialogOptions); const onClose = useCallback(() => { dispatch(closeSelectOptionDialog()); @@ -65,8 +54,9 @@ const SelectOption = () => { fontWeight: "bold", }, - secondary: { variant: "body2" } - }} /> + secondary: { variant: "body2" }, + }} + /> ))} diff --git a/src/component/FileManager/ContextMenu/HoverMenu.tsx b/src/component/FileManager/ContextMenu/HoverMenu.tsx index d6a6665..321bd86 100644 --- a/src/component/FileManager/ContextMenu/HoverMenu.tsx +++ b/src/component/FileManager/ContextMenu/HoverMenu.tsx @@ -1,25 +1,23 @@ import * as React from "react"; import { Menu, type MenuProps } from "@mui/material"; -const HoverMenu: React.ComponentType = React.forwardRef( - function HoverMenu(props: MenuProps, ref): any { - return ( - = React.forwardRef(function HoverMenu(props: MenuProps, ref): any { + return ( + - ); - }, -); + }, + }} + /> + ); +}); export default HoverMenu; diff --git a/src/component/FileManager/ContextMenu/NewFileTemplateMenuItems.tsx b/src/component/FileManager/ContextMenu/NewFileTemplateMenuItems.tsx index 5b2bcb5..1527037 100644 --- a/src/component/FileManager/ContextMenu/NewFileTemplateMenuItems.tsx +++ b/src/component/FileManager/ContextMenu/NewFileTemplateMenuItems.tsx @@ -6,11 +6,7 @@ import { ViewersByID } from "../../../redux/siteConfigSlice.ts"; import { ListItemIcon, ListItemText } from "@mui/material"; import { ViewerIcon } from "../Dialogs/OpenWith.tsx"; import { SquareMenuItem } from "./ContextMenu.tsx"; -import { - CascadingContext, - CascadingMenuItem, - CascadingSubmenu, -} from "./CascadingMenu.tsx"; +import { CascadingContext, CascadingMenuItem, CascadingSubmenu } from "./CascadingMenu.tsx"; import { NewFileTemplate, Viewer } from "../../../api/explorer.ts"; import { createNew } from "../../../redux/thunks/file.ts"; import { CreateNewDialogType } from "../../../redux/globalStateSlice.ts"; @@ -72,10 +68,7 @@ const NewFileTemplateMenuItems = (props: SubMenuItemsProps) => { if (viewer.templates.length == 1) { return ( - + diff --git a/src/component/FileManager/ContextMenu/OrganizeMenuItems.tsx b/src/component/FileManager/ContextMenu/OrganizeMenuItems.tsx index b88fa84..b52fb3c 100644 --- a/src/component/FileManager/ContextMenu/OrganizeMenuItems.tsx +++ b/src/component/FileManager/ContextMenu/OrganizeMenuItems.tsx @@ -5,16 +5,10 @@ import { CascadingContext, CascadingMenuItem } from "./CascadingMenu.tsx"; import { useTranslation } from "react-i18next"; import { useAppDispatch } from "../../../redux/hooks.ts"; import { closeContextMenu } from "../../../redux/fileManagerSlice.ts"; -import { - applyIconColor, - dialogBasedMoveCopy, -} from "../../../redux/thunks/file.ts"; +import { applyIconColor, dialogBasedMoveCopy } from "../../../redux/thunks/file.ts"; import { ListItemIcon, ListItemText } from "@mui/material"; import FolderArrowRightOutlined from "../../Icons/FolderArrowRightOutlined.tsx"; -import { - setChangeIconDialog, - setPinFileDialog, -} from "../../../redux/globalStateSlice.ts"; +import { setChangeIconDialog, setPinFileDialog } from "../../../redux/globalStateSlice.ts"; import { getFileLinkedUri } from "../../../util"; import PinOutlined from "../../Icons/PinOutlined.tsx"; import EmojiEdit from "../../Icons/EmojiEdit.tsx"; @@ -45,16 +39,11 @@ const OrganizeMenuItems = ({ displayOpt, targets }: SubMenuItemsProps) => { [dispatch, targets], ); const showDivider = - (displayOpt.showMove || displayOpt.showPin || displayOpt.showChangeIcon) && - displayOpt.showChangeFolderColor; + (displayOpt.showMove || displayOpt.showPin || displayOpt.showChangeIcon) && displayOpt.showChangeFolderColor; return ( <> {displayOpt.showMove && ( - - dispatch(dialogBasedMoveCopy(0, targets, false)), - )} - > + dispatch(dialogBasedMoveCopy(0, targets, false)))}> @@ -92,18 +81,14 @@ const OrganizeMenuItems = ({ displayOpt, targets }: SubMenuItemsProps) => { - - {t("application:fileManager.customizeIcon")} - + {t("application:fileManager.customizeIcon")} )} {showDivider && } {displayOpt.showChangeFolderColor && ( - onClick(() => dispatch(applyIconColor(0, targets, color, true)))() - } + onColorChange={(color) => onClick(() => dispatch(applyIconColor(0, targets, color, true)))()} sx={{ maxWidth: "204px", margin: (theme) => `0 ${theme.spacing(0.5)}`, diff --git a/src/component/FileManager/ContextMenu/TagMenuItems.tsx b/src/component/FileManager/ContextMenu/TagMenuItems.tsx index 38875f6..712e3aa 100644 --- a/src/component/FileManager/ContextMenu/TagMenuItems.tsx +++ b/src/component/FileManager/ContextMenu/TagMenuItems.tsx @@ -8,11 +8,7 @@ import { closeContextMenu } from "../../../redux/fileManagerSlice.ts"; import { setTagsDialog } from "../../../redux/globalStateSlice.ts"; import { ListItemIcon, ListItemText } from "@mui/material"; import Tags from "../../Icons/Tags.tsx"; -import { - DenseDivider, - SquareMenuItem, - SubMenuItemsProps, -} from "./ContextMenu.tsx"; +import { DenseDivider, SquareMenuItem, SubMenuItemsProps } from "./ContextMenu.tsx"; import SessionManager, { UserSettings } from "../../../session"; import { UsedTags } from "../../../session/utils.ts"; import Checkmark from "../../Icons/Checkmark.tsx"; @@ -111,33 +107,20 @@ const TagMenuItems = ({ displayOpt, targets }: SubMenuItemsProps) => { {tags.length > 0 && } {tags.map((tag) => ( - onTagChange(tag, !tag.selected)} - > + onTagChange(tag, !tag.selected)}> {tag.selected && ( <> - + )} {!tag.selected && ( - + )} diff --git a/src/component/FileManager/Dialogs/ChangeIcon.tsx b/src/component/FileManager/Dialogs/ChangeIcon.tsx index 35c310c..1cd17ad 100644 --- a/src/component/FileManager/Dialogs/ChangeIcon.tsx +++ b/src/component/FileManager/Dialogs/ChangeIcon.tsx @@ -1,14 +1,5 @@ import { useTranslation } from "react-i18next"; -import { - Box, - Button, - DialogContent, - Skeleton, - styled, - Tab, - Tabs, - useTheme, -} from "@mui/material"; +import { Box, Button, DialogContent, Skeleton, styled, Tab, Tabs, useTheme } from "@mui/material"; import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; import { useCallback, useEffect, useMemo, useState } from "react"; import DraggableDialog from "../../Dialogs/DraggableDialog.tsx"; @@ -73,18 +64,10 @@ const ChangeIcon = () => { const [tabValue, setTabValue] = useState(0); const [loading, setLoading] = useState(false); - const open = useAppSelector( - (state) => state.globalState.changeIconDialogOpen, - ); - const targets = useAppSelector( - (state) => state.globalState.changeIconDialogFile, - ); - const emojiStr = useAppSelector( - (state) => state.siteConfig.emojis.config.emoji_preset, - ); - const emojiStrLoaded = useAppSelector( - (state) => state.siteConfig.emojis.loaded, - ); + const open = useAppSelector((state) => state.globalState.changeIconDialogOpen); + const targets = useAppSelector((state) => state.globalState.changeIconDialogFile); + const emojiStr = useAppSelector((state) => state.siteConfig.emojis.config.emoji_preset); + const emojiStrLoaded = useAppSelector((state) => state.siteConfig.emojis.loaded); const emojiSetting = useMemo((): EmojiSetting => { if (!emojiStr) return {}; @@ -163,9 +146,7 @@ const ChangeIcon = () => { onChange={handleTabChange} > {emojiStrLoaded ? ( - Object.keys(emojiSetting).map((key) => ( - - )) + Object.keys(emojiSetting).map((key) => ) ) : ( } /> )} @@ -177,9 +158,7 @@ const ChangeIcon = () => { {emojiSetting[key].map((emoji) => ( - - {emoji} - + {emoji} ))} diff --git a/src/component/FileManager/Dialogs/CreateNew.tsx b/src/component/FileManager/Dialogs/CreateNew.tsx index ad3a485..87e1b8b 100644 --- a/src/component/FileManager/Dialogs/CreateNew.tsx +++ b/src/component/FileManager/Dialogs/CreateNew.tsx @@ -6,10 +6,7 @@ import { setRenameFileModalError } from "../../../redux/fileManagerSlice.ts"; import DraggableDialog from "../../Dialogs/DraggableDialog.tsx"; import { createNewDialogPromisePool } from "../../../redux/thunks/dialog.ts"; import { FilledTextField } from "../../Common/StyledComponents.tsx"; -import { - closeCreateNewDialog, - CreateNewDialogType, -} from "../../../redux/globalStateSlice.ts"; +import { closeCreateNewDialog, CreateNewDialogType } from "../../../redux/globalStateSlice.ts"; import { submitCreateNew } from "../../../redux/thunks/file.ts"; import { FileType } from "../../../api/explorer.ts"; @@ -24,15 +21,10 @@ const CreateNew = () => { const inputRef = useRef(null); const open = useAppSelector((state) => state.globalState.createNewDialogOpen); - const promiseId = useAppSelector( - (state) => state.globalState.createNewPromiseId, - ); + const promiseId = useAppSelector((state) => state.globalState.createNewPromiseId); const type = useAppSelector((state) => state.globalState.createNewDialogType); - const defaultName = useAppSelector( - (state) => state.globalState.createNewDialogDefault, - ); - const fmIndex = - useAppSelector((state) => state.globalState.createNewDialogFmIndex) ?? 0; + const defaultName = useAppSelector((state) => state.globalState.createNewDialogDefault); + const fmIndex = useAppSelector((state) => state.globalState.createNewDialogFmIndex) ?? 0; useEffect(() => { if (open) { @@ -54,13 +46,7 @@ const CreateNew = () => { } setLoading(true); - dispatch( - submitCreateNew( - fmIndex, - name, - type == CreateNewDialogType.folder ? FileType.folder : FileType.file, - ), - ) + dispatch(submitCreateNew(fmIndex, name, type == CreateNewDialogType.folder ? FileType.folder : FileType.file)) .then((f) => { if (promiseId) { createNewDialogPromisePool[promiseId]?.resolve(f); @@ -86,12 +72,7 @@ const CreateNew = () => { if (open) { const lastDot = name.lastIndexOf("."); setTimeout( - () => - inputRef.current && - inputRef.current.setSelectionRange( - 0, - lastDot > 0 ? lastDot : name.length, - ), + () => inputRef.current && inputRef.current.setSelectionRange(0, lastDot > 0 ? lastDot : name.length), 200, ); } @@ -110,9 +91,7 @@ const CreateNew = () => { return ( { helperText={error} margin="dense" label={t( - type == CreateNewDialogType.folder - ? "application:modals.folderName" - : "application:modals.fileName", + type == CreateNewDialogType.folder ? "application:modals.folderName" : "application:modals.fileName", )} type="text" value={name} diff --git a/src/component/FileManager/Dialogs/DirectLinks.tsx b/src/component/FileManager/Dialogs/DirectLinks.tsx index 25ac56a..d9c9bf4 100644 --- a/src/component/FileManager/Dialogs/DirectLinks.tsx +++ b/src/component/FileManager/Dialogs/DirectLinks.tsx @@ -13,9 +13,7 @@ const DirectLinks = () => { const [showFileName, setShowFileName] = useState(false); - const open = useAppSelector( - (state) => state.globalState.directLinkDialogOpen, - ); + const open = useAppSelector((state) => state.globalState.directLinkDialogOpen); const targets = useAppSelector((state) => state.globalState.directLinkRes); const contents = useMemo(() => { @@ -86,7 +84,7 @@ const DirectLinks = () => { variant="outlined" fullWidth slotProps={{ - htmlInput: { readonly: true } + htmlInput: { readonly: true }, }} /> diff --git a/src/component/FileManager/Dialogs/Rename.tsx b/src/component/FileManager/Dialogs/Rename.tsx index 307435e..10137e3 100644 --- a/src/component/FileManager/Dialogs/Rename.tsx +++ b/src/component/FileManager/Dialogs/Rename.tsx @@ -1,21 +1,9 @@ import { Trans, useTranslation } from "react-i18next"; import { DialogContent, Stack } from "@mui/material"; import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; -import { - ChangeEvent, - useCallback, - useContext, - useEffect, - useRef, - useState, -} from "react"; -import { - closeRenameFileModal, - setRenameFileModalError, -} from "../../../redux/fileManagerSlice.ts"; -import DraggableDialog, { - StyledDialogContentText, -} from "../../Dialogs/DraggableDialog.tsx"; +import { ChangeEvent, useCallback, useContext, useEffect, useRef, useState } from "react"; +import { closeRenameFileModal, setRenameFileModalError } from "../../../redux/fileManagerSlice.ts"; +import DraggableDialog, { StyledDialogContentText } from "../../Dialogs/DraggableDialog.tsx"; import { renameDialogPromisePool } from "../../../redux/thunks/dialog.ts"; import { validateFileName } from "../../../redux/thunks/file.ts"; import { FileType } from "../../../api/explorer.ts"; @@ -33,21 +21,11 @@ const Rename = () => { const fmIndex = useContext(FmIndexContext); - const open = useAppSelector( - (state) => state.fileManager[0].renameFileModalOpen, - ); - const targets = useAppSelector( - (state) => state.fileManager[0].renameFileModalSelected, - ); - const promiseId = useAppSelector( - (state) => state.fileManager[0].renameFileModalPromiseId, - ); - const loading = useAppSelector( - (state) => state.fileManager[0].renameFileModalLoading, - ); - const error = useAppSelector( - (state) => state.fileManager[0].renameFileModalError, - ); + const open = useAppSelector((state) => state.fileManager[0].renameFileModalOpen); + const targets = useAppSelector((state) => state.fileManager[0].renameFileModalSelected); + const promiseId = useAppSelector((state) => state.fileManager[0].renameFileModalPromiseId); + const loading = useAppSelector((state) => state.fileManager[0].renameFileModalLoading); + const error = useAppSelector((state) => state.fileManager[0].renameFileModalError); const onClose = useCallback(() => { dispatch( @@ -67,13 +45,7 @@ const Rename = () => { e.preventDefault(); } if (promiseId) { - dispatch( - validateFileName( - 0, - renameDialogPromisePool[promiseId]?.resolve, - name, - ), - ); + dispatch(validateFileName(0, renameDialogPromisePool[promiseId]?.resolve, name)); } }, [promiseId, name], @@ -95,12 +67,8 @@ const Rename = () => { useEffect(() => { if (targets && open && inputRef.current) { - const lastDot = - targets.type == FileType.folder ? 0 : targets.name.lastIndexOf("."); - inputRef.current.setSelectionRange( - 0, - lastDot > 0 ? lastDot : targets.name.length, - ); + const lastDot = targets.type == FileType.folder ? 0 : targets.name.lastIndexOf("."); + inputRef.current.setSelectionRange(0, lastDot > 0 ? lastDot : targets.name.length); } }, [inputRef.current, open]); diff --git a/src/component/FileManager/Dialogs/StaleVersionConfirm.tsx b/src/component/FileManager/Dialogs/StaleVersionConfirm.tsx index 6d380a8..3d2eb8a 100644 --- a/src/component/FileManager/Dialogs/StaleVersionConfirm.tsx +++ b/src/component/FileManager/Dialogs/StaleVersionConfirm.tsx @@ -2,13 +2,8 @@ import { Trans, useTranslation } from "react-i18next"; import { Button, DialogContent, Stack } from "@mui/material"; import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; import { useCallback } from "react"; -import DraggableDialog, { - StyledDialogContentText, -} from "../../Dialogs/DraggableDialog.tsx"; -import { - askSaveAs, - staleVersionDialogPromisePool, -} from "../../../redux/thunks/dialog.ts"; +import DraggableDialog, { StyledDialogContentText } from "../../Dialogs/DraggableDialog.tsx"; +import { askSaveAs, staleVersionDialogPromisePool } from "../../../redux/thunks/dialog.ts"; import { closeStaleVersionDialog } from "../../../redux/globalStateSlice.ts"; import CrUri from "../../../util/uri.ts"; @@ -16,13 +11,9 @@ const StaleVersionConfirm = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const open = useAppSelector( - (state) => state.globalState.staleVersionDialogOpen, - ); + const open = useAppSelector((state) => state.globalState.staleVersionDialogOpen); const uri = useAppSelector((state) => state.globalState.staleVersionUri); - const promiseId = useAppSelector( - (state) => state.globalState.staleVersionPromiseId, - ); + const promiseId = useAppSelector((state) => state.globalState.staleVersionPromiseId); const onClose = useCallback(() => { dispatch(closeStaleVersionDialog()); @@ -88,11 +79,7 @@ const StaleVersionConfirm = () => { {t("modals.conflictDes1")}
    - ,
  • ]} - /> + ,
  • ]} />
diff --git a/src/component/FileManager/Dnd/DragLayer.tsx b/src/component/FileManager/Dnd/DragLayer.tsx index de38e10..292263e 100644 --- a/src/component/FileManager/Dnd/DragLayer.tsx +++ b/src/component/FileManager/Dnd/DragLayer.tsx @@ -55,8 +55,7 @@ const DragPreview = ({ pointerOffset, files, ...rest }: DragPreviewProps) => { zIndex: 1610 - i - 1, top: (i + 1) * 4, left: (i + 1) * 4, - transition: (theme) => - theme.transitions.create(["width", "height"]), + transition: (theme) => theme.transitions.create(["width", "height"]), }} elevation={3} /> @@ -68,14 +67,12 @@ const DragPreview = ({ pointerOffset, files, ...rest }: DragPreviewProps) => { const DragLayer = () => { DisableDropDelay(); - const { itemType, isDragging, item, pointerOffset } = useDragLayer( - (monitor) => ({ - item: monitor.getItem(), - itemType: monitor.getItemType(), - pointerOffset: monitor.getClientOffset(), - isDragging: monitor.isDragging(), - }), - ); + const { itemType, isDragging, item, pointerOffset } = useDragLayer((monitor) => ({ + item: monitor.getItem(), + itemType: monitor.getItemType(), + pointerOffset: monitor.getClientOffset(), + isDragging: monitor.isDragging(), + })); const selected = useAppSelector((state) => state.fileManager[0].selected); const draggingFiles = useMemo(() => { diff --git a/src/component/FileManager/Dnd/useDndScrolling.ts b/src/component/FileManager/Dnd/useDndScrolling.ts index 7a7764f..42d987d 100644 --- a/src/component/FileManager/Dnd/useDndScrolling.ts +++ b/src/component/FileManager/Dnd/useDndScrolling.ts @@ -5,9 +5,7 @@ const threshold = 0.1; const useDragScrolling = (containers: string[]) => { const isScrolling = useRef(false); - const targets = containers.map( - (id) => document.querySelector(id) as HTMLElement, - ); + const targets = containers.map((id) => document.querySelector(id) as HTMLElement); const rects = useRef([]); const goDown = (target: HTMLElement) => { @@ -41,16 +39,10 @@ const useDragScrolling = (containers: string[]) => { } const height = rect.bottom - rect.top; - if ( - event.clientY > rect.top && - event.clientY < rect.top + threshold * height - ) { + if (event.clientY > rect.top && event.clientY < rect.top + threshold * height) { isScrolling.current = true; window.requestAnimationFrame(goUp(targets[index])); - } else if ( - event.clientY < rect.bottom && - event.clientY > rect.bottom - threshold * height - ) { + } else if (event.clientY < rect.bottom && event.clientY > rect.bottom - threshold * height) { isScrolling.current = true; window.requestAnimationFrame(goDown(targets[index])); } else { diff --git a/src/component/FileManager/Explorer/FileTag.tsx b/src/component/FileManager/Explorer/FileTag.tsx index c14acf7..633c483 100644 --- a/src/component/FileManager/Explorer/FileTag.tsx +++ b/src/component/FileManager/Explorer/FileTag.tsx @@ -1,20 +1,11 @@ -import { - Chip, - ChipProps, - darken, - styled, - Tooltip, - useTheme, -} from "@mui/material"; +import { Chip, ChipProps, darken, styled, Tooltip, useTheme } from "@mui/material"; import { useCallback, useContext } from "react"; import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; import { Metadata } from "../../../api/explorer.ts"; import { searchMetadata } from "../../../redux/thunks/filemanager.ts"; import { FmIndexContext } from "../FmIndexContext.tsx"; -export const TagChip = styled(Chip)<{ defaultStyle?: boolean }>(({ - defaultStyle, -}) => { +export const TagChip = styled(Chip)<{ defaultStyle?: boolean }>(({ defaultStyle }) => { const base = { "& .MuiChip-deleteIcon": {}, }; @@ -30,16 +21,7 @@ export interface FileTagProps extends ChipProps { disableClick?: boolean; } -const FileTag = ({ - disableClick, - tagColor, - sx, - label, - defaultStyle, - spacing, - openInNewTab, - ...rest -}: FileTagProps) => { +const FileTag = ({ disableClick, tagColor, sx, label, defaultStyle, spacing, openInNewTab, ...rest }: FileTagProps) => { const theme = useTheme(); const fmIndex = useContext(FmIndexContext); const dispatch = useAppDispatch(); @@ -56,23 +38,13 @@ const FileTag = ({ return; } e.stopPropagation(); - dispatch( - searchMetadata( - fmIndex, - Metadata.tag_prefix + label, - tagColor, - openInNewTab, - ), - ); + dispatch(searchMetadata(fmIndex, Metadata.tag_prefix + label, tagColor, openInNewTab)); }, [root, dispatch, fmIndex, disableClick], ); const hackColor = - !!tagColor && - theme.palette.getContrastText(tagColor) != theme.palette.text.primary - ? "error" - : undefined; + !!tagColor && theme.palette.getContrastText(tagColor) != theme.palette.text.primary ? "error" : undefined; return ( { - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down("md")); - const popupState = usePopupState({ - variant: "popover", - popupId: "demoMenu", - }); +const FileTagSummary = memo(({ tags, sx, max = 1, ...restProps }: FileTagSummaryProps) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + const popupState = usePopupState({ + variant: "popover", + popupId: "demoMenu", + }); - const { open, ...rest } = bindPopover(popupState); - const stopPropagation = useCallback((e: any) => e.stopPropagation(), []); - const [shown, hidden] = useMemo(() => { - if (tags.length <= max) { - return [tags, []]; - } - return [tags.slice(0, max), tags.slice(max)]; - }, [tags, max]); + const { open, ...rest } = bindPopover(popupState); + const stopPropagation = useCallback((e: any) => e.stopPropagation(), []); + const [shown, hidden] = useMemo(() => { + if (tags.length <= max) { + return [tags, []]; + } + return [tags.slice(0, max), tags.slice(max)]; + }, [tags, max]); - const { onClick, ...triggerProps } = bindTrigger(popupState); - const onMobileClick = (e: React.MouseEvent) => { - e.stopPropagation(); - onClick(e); - }; + const { onClick, ...triggerProps } = bindTrigger(popupState); + const onMobileClick = (e: React.MouseEvent) => { + e.stopPropagation(); + onClick(e); + }; - const PopoverComponent = isMobile ? Popover : HoverPopover; + const PopoverComponent = isMobile ? Popover : HoverPopover; - return ( - - {shown.map((tag) => ( - - ))} - {hidden.length > 0 && ( - - )} + return ( + + {shown.map((tag) => ( + + ))} + {hidden.length > 0 && ( + + )} - {open && ( - - - {hidden.map((tag, i) => ( - - ))} - - - )} - - ); - }, -); + {open && ( + + + {hidden.map((tag, i) => ( + + ))} + + + )} + + ); +}); export default FileTagSummary; diff --git a/src/component/FileManager/Explorer/GridView/GridView.tsx b/src/component/FileManager/Explorer/GridView/GridView.tsx index b6d8847..6229c24 100644 --- a/src/component/FileManager/Explorer/GridView/GridView.tsx +++ b/src/component/FileManager/Explorer/GridView/GridView.tsx @@ -44,21 +44,11 @@ export const loadingPlaceHolderNumb = 3; const GridView = React.forwardRef(({ ...rest }: GridViewProps, ref) => { const { t } = useTranslation("application"); const fmIndex = useContext(FmIndexContext); - const files = useAppSelector( - (state) => state.fileManager[fmIndex].list?.files, - ); - const mixedType = useAppSelector( - (state) => state.fileManager[fmIndex].list?.mixed_type, - ); - const pagination = useAppSelector( - (state) => state.fileManager[fmIndex].list?.pagination, - ); - const showThumb = useAppSelector( - (state) => state.fileManager[fmIndex].showThumb, - ); - const search_params = useAppSelector( - (state) => state.fileManager[fmIndex]?.search_params, - ); + const files = useAppSelector((state) => state.fileManager[fmIndex].list?.files); + const mixedType = useAppSelector((state) => state.fileManager[fmIndex].list?.mixed_type); + const pagination = useAppSelector((state) => state.fileManager[fmIndex].list?.pagination); + const showThumb = useAppSelector((state) => state.fileManager[fmIndex].showThumb); + const search_params = useAppSelector((state) => state.fileManager[fmIndex]?.search_params); const list = useMemo(() => { const list: listComponents = { Files: [], @@ -115,9 +105,7 @@ const GridView = React.forwardRef(({ ...rest }: GridViewProps, ref) => { ); const _ = - list.Files.length > 0 - ? list.Files.push(loadingPlaceholder) - : list.Folders?.push(loadingPlaceholder); + list.Files.length > 0 ? list.Files.push(loadingPlaceholder) : list.Folders?.push(loadingPlaceholder); } } } diff --git a/src/component/FileManager/Explorer/ListView/ListBody.tsx b/src/component/FileManager/Explorer/ListView/ListBody.tsx index 9ec6376..2d76ec7 100644 --- a/src/component/FileManager/Explorer/ListView/ListBody.tsx +++ b/src/component/FileManager/Explorer/ListView/ListBody.tsx @@ -13,18 +13,10 @@ export interface ListBodyProps { const ListBody = ({ columns }: ListBodyProps) => { const fmIndex = useContext(FmIndexContext); - const files = useAppSelector( - (state) => state.fileManager[fmIndex].list?.files, - ); - const mixedType = useAppSelector( - (state) => state.fileManager[fmIndex].list?.mixed_type, - ); - const pagination = useAppSelector( - (state) => state.fileManager[fmIndex].list?.pagination, - ); - const search_params = useAppSelector( - (state) => state.fileManager[fmIndex]?.search_params, - ); + const files = useAppSelector((state) => state.fileManager[fmIndex].list?.files); + const mixedType = useAppSelector((state) => state.fileManager[fmIndex].list?.mixed_type); + const pagination = useAppSelector((state) => state.fileManager[fmIndex].list?.pagination); + const search_params = useAppSelector((state) => state.fileManager[fmIndex]?.search_params); const list = useMemo(() => { const list: FmFile[] = []; diff --git a/src/component/FileManager/FileBadge.tsx b/src/component/FileManager/FileBadge.tsx index c819fd4..0341c28 100644 --- a/src/component/FileManager/FileBadge.tsx +++ b/src/component/FileManager/FileBadge.tsx @@ -23,13 +23,7 @@ export interface FileBadgeProps extends ButtonProps { clickable?: boolean; } -const FileBadge = ({ - file, - clickable, - simplifiedFile, - unknown, - ...rest -}: FileBadgeProps) => { +const FileBadge = ({ file, clickable, simplifiedFile, unknown, ...rest }: FileBadgeProps) => { const { t } = useTranslation(); const popupState = usePopupState({ variant: "popover", @@ -131,9 +125,7 @@ const FileBadge = ({ /> )} - - {name == "" ? displayName : name} - + {name == "" ? displayName : name} diff --git a/src/component/FileManager/FileInfo/ColorCircle/CircleColorSelector.tsx b/src/component/FileManager/FileInfo/ColorCircle/CircleColorSelector.tsx index ae31fd4..8dc319d 100644 --- a/src/component/FileManager/FileInfo/ColorCircle/CircleColorSelector.tsx +++ b/src/component/FileManager/FileInfo/ColorCircle/CircleColorSelector.tsx @@ -1,12 +1,4 @@ -import { - Box, - Button, - Divider, - Popover, - styled, - Tooltip, - useTheme, -} from "@mui/material"; +import { Box, Button, Divider, Popover, styled, Tooltip, useTheme } from "@mui/material"; import { useTranslation } from "react-i18next"; import { CSSProperties, useCallback, useState } from "react"; import { bindTrigger, usePopupState } from "material-ui-popup-state/hooks"; @@ -72,11 +64,7 @@ const ColorCircleBox = styled("div")(({ }; }); -const ColorCircleBoxChild = styled("div")(({ - selected, -}: { - selected: boolean; -}) => { +const ColorCircleBoxChild = styled("div")(({ selected }: { selected: boolean }) => { const theme = useTheme(); return { "--circle-point-background-color": theme.palette.background.default, @@ -90,14 +78,7 @@ const ColorCircleBoxChild = styled("div")(({ }; }); -export const ColorCircle = ({ - color, - selected, - isCustomization, - onClick, - size, - noMb, -}: ColorCircleProps) => { +export const ColorCircle = ({ color, selected, isCustomization, onClick, size, noMb }: ColorCircleProps) => { const { t } = useTranslation(); const displayColor = isCustomization ? "conic-gradient(red, yellow, lime, aqua, blue, magenta, red)" @@ -105,16 +86,8 @@ export const ColorCircle = ({ ? "linear-gradient(45deg, rgba(217,217,217,1) 46%, rgba(217,217,217,1) 47%, rgba(128,128,128,1) 47%)" : color; return ( - - + + @@ -124,9 +97,7 @@ export const ColorCircle = ({ const CircleColorSelector = (props: CircleColorSelectorProps) => { const theme = useTheme(); const { t } = useTranslation(); - const [customizeColor, setCustomizeColor] = useState( - props.selectedColor, - ); + const [customizeColor, setCustomizeColor] = useState(props.selectedColor); const popupState = usePopupState({ variant: "popover", popupId: "color-picker", @@ -152,13 +123,8 @@ const CircleColorSelector = (props: CircleColorSelectorProps) => { {props.colors.map((color) => ( { /> - diff --git a/src/component/FileManager/FileInfo/FolderColorQuickAction.tsx b/src/component/FileManager/FileInfo/FolderColorQuickAction.tsx index f1b8efc..80b7d0d 100644 --- a/src/component/FileManager/FileInfo/FolderColorQuickAction.tsx +++ b/src/component/FileManager/FileInfo/FolderColorQuickAction.tsx @@ -1,17 +1,8 @@ -import { - Box, - BoxProps, - Stack, - styled, - Typography, - useTheme, -} from "@mui/material"; +import { Box, BoxProps, Stack, styled, Typography, useTheme } from "@mui/material"; import { useTranslation } from "react-i18next"; import { useMemo, useState } from "react"; import { FileResponse, Metadata } from "../../../api/explorer.ts"; -import CircleColorSelector, { - customizeMagicColor, -} from "./ColorCircle/CircleColorSelector.tsx"; +import CircleColorSelector, { customizeMagicColor } from "./ColorCircle/CircleColorSelector.tsx"; import SessionManager, { UserSettings } from "../../../session"; import { defaultColors } from "../../../constants"; @@ -25,23 +16,16 @@ export interface FolderColorQuickActionProps extends BoxProps { onColorChange: (color?: string) => void; } -const FolderColorQuickAction = ({ - file, - onColorChange, - ...rest -}: FolderColorQuickActionProps) => { +const FolderColorQuickAction = ({ file, onColorChange, ...rest }: FolderColorQuickActionProps) => { const { t } = useTranslation(); const theme = useTheme(); const [hex, setHex] = useState( - (file.metadata && file.metadata[Metadata.icon_color]) ?? - theme.palette.action.active, + (file.metadata && file.metadata[Metadata.icon_color]) ?? theme.palette.action.active, ); const presetColors = useMemo(() => { const colors = new Set(defaultColors); - const recentColors = SessionManager.get( - UserSettings.UsedCustomizedIconColors, - ) as string[] | undefined; + const recentColors = SessionManager.get(UserSettings.UsedCustomizedIconColors) as string[] | undefined; if (recentColors) { recentColors.forEach((color) => { @@ -54,20 +38,12 @@ const FolderColorQuickAction = ({ return ( - - {t("application:fileManager.folderColor")} - + {t("application:fileManager.folderColor")} { - onColorChange( - color == theme.palette.action.active ? undefined : color, - ); + onColorChange(color == theme.palette.action.active ? undefined : color); setHex(color); }} /> diff --git a/src/component/FileManager/FmIndexContext.tsx b/src/component/FileManager/FmIndexContext.tsx index 47b7864..77bd986 100644 --- a/src/component/FileManager/FmIndexContext.tsx +++ b/src/component/FileManager/FmIndexContext.tsx @@ -1,3 +1,3 @@ import { createContext } from "react"; -export const FmIndexContext = createContext(0); \ No newline at end of file +export const FmIndexContext = createContext(0); diff --git a/src/component/FileManager/NewButton.tsx b/src/component/FileManager/NewButton.tsx index 0b23b18..f7101d7 100644 --- a/src/component/FileManager/NewButton.tsx +++ b/src/component/FileManager/NewButton.tsx @@ -13,9 +13,7 @@ const NewButton = () => { if (isMobile) { return ( - dispatch(openNewContextMenu(FileManagerIndex.main, e))} - > + dispatch(openNewContextMenu(FileManagerIndex.main, e))}> ); diff --git a/src/component/FileManager/Pagination/PaginationFooter.tsx b/src/component/FileManager/Pagination/PaginationFooter.tsx index d0015a8..1ef1d25 100644 --- a/src/component/FileManager/Pagination/PaginationFooter.tsx +++ b/src/component/FileManager/Pagination/PaginationFooter.tsx @@ -1,12 +1,5 @@ import { RadiusFrame } from "../../Frame/RadiusFrame.tsx"; -import { - Box, - Pagination, - Slide, - styled, - useMediaQuery, - useTheme, -} from "@mui/material"; +import { Box, Pagination, Slide, styled, useMediaQuery, useTheme } from "@mui/material"; import { forwardRef, useContext } from "react"; import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; import { MinPageSize } from "../TopBar/ViewOptionPopover.tsx"; @@ -29,25 +22,20 @@ export interface PaginationState { } export const usePaginationState = (fmIndex: number) => { - const pagination = useAppSelector( - (state) => state.fileManager[fmIndex].list?.pagination, - ); + const pagination = useAppSelector((state) => state.fileManager[fmIndex].list?.pagination); const totalItems = pagination?.total_items; const page = pagination?.page; const pageSize = pagination?.page_size; const currentPage = (page ?? 0) + 1; - const totalPages = Math.ceil( - (totalItems ?? 1) / (pageSize && pageSize > 0 ? pageSize : MinPageSize), - ); + const totalPages = Math.ceil((totalItems ?? 1) / (pageSize && pageSize > 0 ? pageSize : MinPageSize)); const usePagination = totalPages > 1; return { currentPage, totalPages, usePagination, useEndlessLoading: !usePagination, - moreItems: - pagination?.next_token || (usePagination && currentPage < totalPages), + moreItems: pagination?.next_token || (usePagination && currentPage < totalPages), nextToken: pagination?.next_token, } as PaginationState; }; @@ -64,10 +52,7 @@ const PaginationFooter = forwardRef((_props, ref) => { return ( - + } diff --git a/src/component/FileManager/Pagination/PaginationItem.tsx b/src/component/FileManager/Pagination/PaginationItem.tsx index e57c4d1..22dc0c2 100644 --- a/src/component/FileManager/Pagination/PaginationItem.tsx +++ b/src/component/FileManager/Pagination/PaginationItem.tsx @@ -5,22 +5,15 @@ import { mergeRefs } from "../../../util"; let timeOut: ReturnType | undefined = undefined; -const StyledPaginationItem = styled(PaginationItem)<{ isDropOver?: boolean }>( - ({ theme, isDropOver }) => ({ - transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important", - transitionProperty: "background-color,opacity,box-shadow", - boxShadow: isDropOver - ? `inset 0 0 0 2px ${theme.palette.primary.light}` - : "none", - }), -); +const StyledPaginationItem = styled(PaginationItem)<{ isDropOver?: boolean }>(({ theme, isDropOver }) => ({ + transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important", + transitionProperty: "background-color,opacity,box-shadow", + boxShadow: isDropOver ? `inset 0 0 0 2px ${theme.palette.primary.light}` : "none", +})); const CustomPaginationItem = (props: PaginationItemProps) => { const [drag, drop, isOver, isDragging] = useFileDrag({ - dropUri: - props.type !== "start-ellipsis" && props.type !== "end-ellipsis" - ? NoOpDropUri - : undefined, + dropUri: props.type !== "start-ellipsis" && props.type !== "end-ellipsis" ? NoOpDropUri : undefined, }); const buttonRef = useRef(); @@ -47,9 +40,7 @@ const CustomPaginationItem = (props: PaginationItemProps) => { [drop, buttonRef], ); - return ( - - ); + return ; }; export default CustomPaginationItem; diff --git a/src/component/FileManager/Search/AdvanceSearch/AddCondition.tsx b/src/component/FileManager/Search/AdvanceSearch/AddCondition.tsx index cb806b1..01f1918 100644 --- a/src/component/FileManager/Search/AdvanceSearch/AddCondition.tsx +++ b/src/component/FileManager/Search/AdvanceSearch/AddCondition.tsx @@ -2,11 +2,7 @@ import { useTranslation } from "react-i18next"; import { SecondaryButton } from "../../../Common/StyledComponents.tsx"; import Add from "../../../Icons/Add.tsx"; -import { - bindMenu, - bindTrigger, - usePopupState, -} from "material-ui-popup-state/hooks"; +import { bindMenu, bindTrigger, usePopupState } from "material-ui-popup-state/hooks"; import { ListItemIcon, ListItemText, Menu } from "@mui/material"; import { Condition, ConditionType } from "./ConditionBox.tsx"; import React from "react"; @@ -154,20 +150,13 @@ const AddCondition = (props: AddConditionProps) => { const onConditionAdd = (condition: Condition) => { props.onConditionAdd({ ...condition, - id: - condition.type == ConditionType.metadata && !condition.id - ? Math.random().toString() - : condition.id, + id: condition.type == ConditionType.metadata && !condition.id ? Math.random().toString() : condition.id, }); onClose(); }; return ( <> - } - sx={{ px: "15px" }} - > + } sx={{ px: "15px" }}> {t("navbar.addCondition")} { {...menuProps} > {options.map((option, index) => ( - onConditionAdd(option.condition)} - > + onConditionAdd(option.condition)}> {option.icon} {t(option.name)} @@ -198,14 +183,12 @@ const AddCondition = (props: AddConditionProps) => { title={t("application:fileManager.mediaInfo")} > {mediaMetaOptions.map((option, index) => ( - onConditionAdd(option.condition)} - > - + onConditionAdd(option.condition)}> + {t(option.name)} diff --git a/src/component/FileManager/Search/AdvanceSearch/AdvanceSearch.tsx b/src/component/FileManager/Search/AdvanceSearch/AdvanceSearch.tsx index 3e91d8b..a0b5c8d 100644 --- a/src/component/FileManager/Search/AdvanceSearch/AdvanceSearch.tsx +++ b/src/component/FileManager/Search/AdvanceSearch/AdvanceSearch.tsx @@ -15,10 +15,7 @@ import { defaultPath } from "../../../../hooks/useNavigation.tsx"; import { advancedSearch } from "../../../../redux/thunks/filemanager.ts"; import { Metadata } from "../../../../api/explorer.ts"; -const searchParamToConditions = ( - search_params: SearchParam, - base: string, -): Condition[] => { +const searchParamToConditions = (search_params: SearchParam, base: string): Condition[] => { const applied: Condition[] = [ { type: ConditionType.base, @@ -41,10 +38,7 @@ const searchParamToConditions = ( }); } - if ( - search_params.size_gte != undefined || - search_params.size_lte != undefined - ) { + if (search_params.size_gte != undefined || search_params.size_lte != undefined) { applied.push({ type: ConditionType.size, size_gte: search_params.size_gte, @@ -52,10 +46,7 @@ const searchParamToConditions = ( }); } - if ( - search_params.created_at_gte != undefined || - search_params.created_at_lte != undefined - ) { + if (search_params.created_at_gte != undefined || search_params.created_at_lte != undefined) { applied.push({ type: ConditionType.created, created_gte: search_params.created_at_gte, @@ -63,10 +54,7 @@ const searchParamToConditions = ( }); } - if ( - search_params.updated_at_gte != undefined || - search_params.updated_at_lte != undefined - ) { + if (search_params.updated_at_gte != undefined || search_params.updated_at_lte != undefined) { applied.push({ type: ConditionType.modified, updated_gte: search_params.updated_at_gte, @@ -106,18 +94,10 @@ const AdvanceSearch = () => { const [conditions, setConditions] = useState([]); const open = useAppSelector((state) => state.globalState.advanceSearchOpen); - const base = useAppSelector( - (state) => state.globalState.advanceSearchBasePath, - ); - const initialNames = useAppSelector( - (state) => state.globalState.advanceSearchInitialNameCondition, - ); - const search_params = useAppSelector( - (state) => state.fileManager[FileManagerIndex.main].search_params, - ); - const current_base = useAppSelector( - (state) => state.fileManager[FileManagerIndex.main].pure_path, - ); + const base = useAppSelector((state) => state.globalState.advanceSearchBasePath); + const initialNames = useAppSelector((state) => state.globalState.advanceSearchInitialNameCondition); + const search_params = useAppSelector((state) => state.fileManager[FileManagerIndex.main].search_params); + const current_base = useAppSelector((state) => state.fileManager[FileManagerIndex.main].pure_path); const onClose = useCallback(() => { dispatch(closeAdvanceSearch()); @@ -141,10 +121,7 @@ const AdvanceSearch = () => { } if (search_params) { - const existedConditions = searchParamToConditions( - search_params, - current_base ?? defaultPath, - ); + const existedConditions = searchParamToConditions(search_params, current_base ?? defaultPath); if (existedConditions.length > 0) { setConditions(existedConditions); } @@ -157,9 +134,7 @@ const AdvanceSearch = () => { }; const onConditionAdd = (condition: Condition) => { - if ( - conditions.find((c) => c.type === condition.type && c.id === condition.id) - ) { + if (conditions.find((c) => c.type === condition.type && c.id === condition.id)) { enqueueSnackbar(t("application:navbar.conditionDuplicate"), { variant: "warning", action: DefaultCloseAction, @@ -194,11 +169,7 @@ const AdvanceSearch = () => { 2 && condition.type != ConditionType.base - ? onConditionRemove - : undefined - } + onRemove={conditions.length > 2 && condition.type != ConditionType.base ? onConditionRemove : undefined} condition={condition} onChange={(condition) => { const new_conditions = [...conditions]; diff --git a/src/component/FileManager/Search/AdvanceSearch/ConditionBox.tsx b/src/component/FileManager/Search/AdvanceSearch/ConditionBox.tsx index e8a1d0e..01bf13b 100644 --- a/src/component/FileManager/Search/AdvanceSearch/ConditionBox.tsx +++ b/src/component/FileManager/Search/AdvanceSearch/ConditionBox.tsx @@ -137,49 +137,25 @@ const ConditionBox = forwardRef((props: ConditionProps, ref) => { {title} - onRemove(condition) : undefined} - > + onRemove(condition) : undefined}> {condition.type == ConditionType.name && ( - - )} - {condition.type == ConditionType.type && ( - - )} - {condition.type == ConditionType.base && ( - - )} - {condition.type == ConditionType.tag && ( - - )} - {condition.type == ConditionType.metadata && ( - - )} - {condition.type == ConditionType.size && ( - + )} + {condition.type == ConditionType.type && } + {condition.type == ConditionType.base && } + {condition.type == ConditionType.tag && } + {condition.type == ConditionType.metadata && } + {condition.type == ConditionType.size && } {condition.type == ConditionType.created && ( - + )} {condition.type == ConditionType.modified && ( - + )} diff --git a/src/component/FileManager/Search/AdvanceSearch/FileNameCondition.tsx b/src/component/FileManager/Search/AdvanceSearch/FileNameCondition.tsx index 5a5e0b9..6e37dc4 100644 --- a/src/component/FileManager/Search/AdvanceSearch/FileNameCondition.tsx +++ b/src/component/FileManager/Search/AdvanceSearch/FileNameCondition.tsx @@ -1,15 +1,6 @@ -import { - Autocomplete, - Box, - Chip, - FormControlLabel, - styled, -} from "@mui/material"; +import { Autocomplete, Box, Chip, FormControlLabel, styled } from "@mui/material"; import { useTranslation } from "react-i18next"; -import { - FilledTextField, - StyledCheckbox, -} from "../../../Common/StyledComponents.tsx"; +import { FilledTextField, StyledCheckbox } from "../../../Common/StyledComponents.tsx"; import { Condition } from "./ConditionBox.tsx"; export const StyledBox = styled(Box)(({ theme }) => ({ @@ -41,9 +32,7 @@ export const FileNameCondition = ({ renderTags={(value: readonly string[], getTagProps) => value.map((option: string, index: number) => { const { key, ...tagProps } = getTagProps({ index }); - return ( - - ); + return ; }) } renderInput={(params) => ( diff --git a/src/component/FileManager/Search/AdvanceSearch/FileTypeCondition.tsx b/src/component/FileManager/Search/AdvanceSearch/FileTypeCondition.tsx index 332c5a1..7bb5704 100644 --- a/src/component/FileManager/Search/AdvanceSearch/FileTypeCondition.tsx +++ b/src/component/FileManager/Search/AdvanceSearch/FileTypeCondition.tsx @@ -31,9 +31,11 @@ export const FileTypeCondition = ({ - + {t("application:fileManager.file")} @@ -41,9 +43,11 @@ export const FileTypeCondition = ({ - + {t("application:fileManager.folder")} diff --git a/src/component/FileManager/Search/AdvanceSearch/MetadataCondition.tsx b/src/component/FileManager/Search/AdvanceSearch/MetadataCondition.tsx index 1b51566..73b4ea9 100644 --- a/src/component/FileManager/Search/AdvanceSearch/MetadataCondition.tsx +++ b/src/component/FileManager/Search/AdvanceSearch/MetadataCondition.tsx @@ -22,9 +22,7 @@ export const MetadataCondition = ({ variant="filled" label={t("application:fileManager.metadataKey")} value={condition.metadata_key ?? ""} - onChange={(e) => - onChange({ ...condition, metadata_key: e.target.value }) - } + onChange={(e) => onChange({ ...condition, metadata_key: e.target.value })} disabled={condition.metadata_key_readonly} type="text" fullWidth @@ -33,9 +31,7 @@ export const MetadataCondition = ({ variant="filled" label={t("application:fileManager.metadataValue")} value={condition.metadata_value ?? ""} - onChange={(e) => - onChange({ ...condition, metadata_value: e.target.value }) - } + onChange={(e) => onChange({ ...condition, metadata_value: e.target.value })} type="text" fullWidth /> diff --git a/src/component/FileManager/Search/AdvanceSearch/TagCondition.tsx b/src/component/FileManager/Search/AdvanceSearch/TagCondition.tsx index 656cc35..d39f0eb 100644 --- a/src/component/FileManager/Search/AdvanceSearch/TagCondition.tsx +++ b/src/component/FileManager/Search/AdvanceSearch/TagCondition.tsx @@ -23,9 +23,7 @@ export const TagCondition = ({ renderTags={(value: readonly string[], getTagProps) => value.map((option: string, index: number) => { const { key, ...tagProps } = getTagProps({ index }); - return ( - - ); + return ; }) } renderInput={(params) => ( diff --git a/src/component/FileManager/Search/FullSearchOptions.tsx b/src/component/FileManager/Search/FullSearchOptions.tsx index 49b9fdf..da95a42 100644 --- a/src/component/FileManager/Search/FullSearchOptions.tsx +++ b/src/component/FileManager/Search/FullSearchOptions.tsx @@ -1,11 +1,4 @@ -import { - Box, - List, - ListItem, - ListItemAvatar, - ListItemButton, - ListItemText, -} from "@mui/material"; +import { Box, List, ListItem, ListItemAvatar, ListItemButton, ListItemText } from "@mui/material"; import { Trans, useTranslation } from "react-i18next"; import React, { useCallback } from "react"; // @ts-ignore @@ -27,8 +20,7 @@ const FullSearchOption = ({ options, keyword }: FullSearchOptionProps) => { const dispatch = useAppDispatch(); const onClick = useCallback( - (base: string) => () => - dispatch(quickSearch(FileManagerIndex.main, base, keyword)), + (base: string) => () => dispatch(quickSearch(FileManagerIndex.main, base, keyword)), [keyword, dispatch], ); @@ -56,15 +48,13 @@ const FullSearchOption = ({ options, keyword }: FullSearchOptionProps) => { values={{ keywords: keyword, }} - components={[ - , - ]} + components={[]} /> } slotProps={{ primary: { variant: "body2", - } + }, }} /> { - dispatch( - openFileContextMenu( - FileManagerIndex.main, - file, - true, - e, - ContextMenuTypes.searchResult, - ), - ) + dispatch(openFileContextMenu(FileManagerIndex.main, file, true, e, ContextMenuTypes.searchResult)) } > @@ -91,8 +77,9 @@ const FuzzySearchResult = ({ files, keyword }: FuzzySearchResultProps) => { secondary: { variant: "body2", - } - }} /> + }, + }} + /> ({ @@ -44,9 +33,7 @@ export const SearchIndicator = () => { const dispatch = useAppDispatch(); const fmIndex = useContext(FmIndexContext); - const search_params = useAppSelector( - (state) => state.fileManager[fmIndex].search_params, - ); + const search_params = useAppSelector((state) => state.fileManager[fmIndex].search_params); const searchConditionsCount = useMemo(() => { if (!search_params) { @@ -90,10 +77,7 @@ export const SearchIndicator = () => { num: searchConditionsCount, })} - dispatch(clearSearch(fmIndex))} - > + dispatch(clearSearch(fmIndex))}> diff --git a/src/component/FileManager/Search/SearchPopup.tsx b/src/component/FileManager/Search/SearchPopup.tsx index 94ef060..580c8e9 100644 --- a/src/component/FileManager/Search/SearchPopup.tsx +++ b/src/component/FileManager/Search/SearchPopup.tsx @@ -27,10 +27,7 @@ import SessionManager from "../../../session"; import { defaultPath } from "../../../hooks/useNavigation.tsx"; import FullSearchOption from "./FullSearchOptions.tsx"; import { TransitionProps } from "@mui/material/transitions"; -import { - openAdvancedSearch, - quickSearch, -} from "../../../redux/thunks/filemanager.ts"; +import { openAdvancedSearch, quickSearch } from "../../../redux/thunks/filemanager.ts"; import Options from "../../Icons/Options.tsx"; const StyledDialog = styled(Dialog)<{ @@ -66,9 +63,7 @@ const SearchPopup = () => { const [keywords, setKeywords] = useState(""); const [searchedKeyword, setSearchedKeyword] = useState(""); - const [treeSearchResults, setTreeSearchResults] = useState( - [], - ); + const [treeSearchResults, setTreeSearchResults] = useState([]); const onClose = () => { dispatch(setSearchPopup(false)); @@ -77,48 +72,36 @@ const SearchPopup = () => { }; const open = useAppSelector((state) => state.globalState.searchPopupOpen); - const tree = useAppSelector( - (state) => state.fileManager[FileManagerIndex.main]?.tree, - ); - const path = useAppSelector( - (state) => state.fileManager[FileManagerIndex.main]?.path, - ); - const single_file_view = useAppSelector( - (state) => state.fileManager[FileManagerIndex.main]?.list?.single_file_view, - ); + const tree = useAppSelector((state) => state.fileManager[FileManagerIndex.main]?.tree); + const path = useAppSelector((state) => state.fileManager[FileManagerIndex.main]?.path); + const single_file_view = useAppSelector((state) => state.fileManager[FileManagerIndex.main]?.list?.single_file_view); const searchTree = useMemo( () => - debounce( - ( - request: { input: string }, - callback: (results?: FileResponse[]) => void, - ) => { - const options = { - includeScore: true, - // Search in `author` and in `tags` array - keys: ["file.name"], - }; - const fuse = new Fuse(Object.values(tree), options); - const result = fuse.search( - request.input - .split(" ") - .filter((k) => k != "") - .join(" "), - { limit: 50 }, - ); - const res: FileResponse[] = []; - result - .filter((r) => r.item.file != undefined) - .forEach((r) => { - if (r.item.file) { - res.push(r.item.file); - } - }); - callback(res); - }, - 400, - ), + debounce((request: { input: string }, callback: (results?: FileResponse[]) => void) => { + const options = { + includeScore: true, + // Search in `author` and in `tags` array + keys: ["file.name"], + }; + const fuse = new Fuse(Object.values(tree), options); + const result = fuse.search( + request.input + .split(" ") + .filter((k) => k != "") + .join(" "), + { limit: 50 }, + ); + const res: FileResponse[] = []; + result + .filter((r) => r.item.file != undefined) + .forEach((r) => { + if (r.item.file) { + res.push(r.item.file); + } + }); + callback(res); + }, 400), [tree], ); @@ -158,10 +141,7 @@ const SearchPopup = () => { res.push(current.base()); } // my files - user login and not my fs - if ( - SessionManager.currentLoginOrNull() && - !(current.fs() == Filesystem.my) - ) { + if (SessionManager.currentLoginOrNull() && !(current.fs() == Filesystem.my)) { res.push(defaultPath); } return res; @@ -173,9 +153,7 @@ const SearchPopup = () => { e.stopPropagation(); e.preventDefault(); if (fullSearchOptions.length > 0) { - dispatch( - quickSearch(FileManagerIndex.main, fullSearchOptions[0], keywords), - ); + dispatch(quickSearch(FileManagerIndex.main, fullSearchOptions[0], keywords)); } } }, @@ -214,9 +192,7 @@ const SearchPopup = () => { height: 40, mr: 1.5, }} - onClick={() => - dispatch(openAdvancedSearch(FileManagerIndex.main, keywords)) - } + onClick={() => dispatch(openAdvancedSearch(FileManagerIndex.main, keywords))} > @@ -244,10 +220,7 @@ const SearchPopup = () => { > {t("navbar.searchFilesTitle")} - + {treeSearchResults.length > 0 && } )} @@ -264,10 +237,7 @@ const SearchPopup = () => { > {t("navbar.recentlyViewed")} - + )} diff --git a/src/component/FileManager/Sidebar/Details.tsx b/src/component/FileManager/Sidebar/Details.tsx index 16bd813..e1f38af 100644 --- a/src/component/FileManager/Sidebar/Details.tsx +++ b/src/component/FileManager/Sidebar/Details.tsx @@ -14,13 +14,7 @@ export interface DetailsProps { target: FileResponse; } -const InfoBlock = ({ - title, - children, -}: { - title: string; - children: React.ReactNode; -}) => { +const InfoBlock = ({ title, children }: { title: string; children: React.ReactNode }) => { return ( {title} @@ -35,11 +29,7 @@ const Details = ({ target, inPhotoViewer }: DetailsProps) => { const dispatch = useAppDispatch(); const [thumbSrc, setThumbSrc] = useState(null); useEffect(() => { - if ( - target.type == FileType.file && - (!target.metadata || - target.metadata[Metadata.thumbDisabled] === undefined) - ) { + if (target.type == FileType.file && (!target.metadata || target.metadata[Metadata.thumbDisabled] === undefined)) { dispatch(loadFileThumb(FileManagerIndex.main, target)).then((src) => { setThumbSrc(src); }); diff --git a/src/component/FileManager/Sidebar/Header.tsx b/src/component/FileManager/Sidebar/Header.tsx index 99ef228..3eb8989 100644 --- a/src/component/FileManager/Sidebar/Header.tsx +++ b/src/component/FileManager/Sidebar/Header.tsx @@ -12,21 +12,10 @@ const Header = ({ target }: HeaderProps) => { const dispatch = useAppDispatch(); return ( - {target !== null && ( - - )} + {target !== null && } {target !== null && ( - + {target && target.name} {!target && } diff --git a/src/component/FileManager/Sidebar/Map/MapLoader.tsx b/src/component/FileManager/Sidebar/Map/MapLoader.tsx index bcc9e4b..c6dc0b4 100644 --- a/src/component/FileManager/Sidebar/Map/MapLoader.tsx +++ b/src/component/FileManager/Sidebar/Map/MapLoader.tsx @@ -12,23 +12,11 @@ export interface MapLoaderProps extends BoxProps { } const MapLoader = (props: MapLoaderProps) => { - const mapProvider = useAppSelector( - (state) => state.siteConfig.explorer.config.map_provider, - ); - const googleTileType = useAppSelector( - (state) => state.siteConfig.explorer.config.google_map_tile_type, - ); + const mapProvider = useAppSelector((state) => state.siteConfig.explorer.config.map_provider); + const googleTileType = useAppSelector((state) => state.siteConfig.explorer.config.google_map_tile_type); return ( - - } - > - + }> + ); }; diff --git a/src/component/FileManager/Sidebar/MediaMetaCard.tsx b/src/component/FileManager/Sidebar/MediaMetaCard.tsx index 6ddf161..11d8000 100644 --- a/src/component/FileManager/Sidebar/MediaMetaCard.tsx +++ b/src/component/FileManager/Sidebar/MediaMetaCard.tsx @@ -37,14 +37,8 @@ export interface MediaMetaCardProps { } const StyledButtonBase = styled(Box)(({ theme }) => { - let bgColor = - theme.palette.mode === "light" - ? theme.palette.grey[100] - : theme.palette.grey[900]; - let bgColorHover = - theme.palette.mode === "light" - ? theme.palette.grey[300] - : theme.palette.grey[700]; + let bgColor = theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[900]; + let bgColorHover = theme.palette.mode === "light" ? theme.palette.grey[300] : theme.palette.grey[700]; return { borderRadius: theme.shape.borderRadius, backgroundColor: bgColor, @@ -69,21 +63,12 @@ export interface MediaMetaElementsProps extends LinkProps { element: MediaMetaElements; } -export const MediaMetaElements = ({ - element, - ...rest -}: MediaMetaElementsProps) => { +export const MediaMetaElements = ({ element, ...rest }: MediaMetaElementsProps) => { const dispatch = useAppDispatch(); const { t } = useTranslation(); const handleSearch = () => { - dispatch( - searchMetadata( - FileManagerIndex.main, - element.searchKey, - element.searchValue, - ), - ); + dispatch(searchMetadata(FileManagerIndex.main, element.searchKey, element.searchValue)); handleClose(); }; @@ -113,18 +98,10 @@ export const MediaMetaElements = ({ - - {t("application:fileManager.copyToClipboard")} - + {t("application:fileManager.copyToClipboard")} - setAnchorEl(e.currentTarget)} - underline="hover" - {...rest} - > + setAnchorEl(e.currentTarget)} underline="hover" {...rest}> {element.display} @@ -147,26 +124,14 @@ const MediaMetaCard = ({ contents, icon }: MediaMetaCardProps) => { > {contents.map(({ title, content }) => ( - + {title.map((element) => - typeof element === "string" ? ( - element - ) : ( - - ), + typeof element === "string" ? element : , )} {content.map((element) => - typeof element === "string" ? ( - element - ) : ( - - ), + typeof element === "string" ? element : , )} diff --git a/src/component/FileManager/Sidebar/Sidebar.tsx b/src/component/FileManager/Sidebar/Sidebar.tsx index 55687c1..b0fc8ec 100644 --- a/src/component/FileManager/Sidebar/Sidebar.tsx +++ b/src/component/FileManager/Sidebar/Sidebar.tsx @@ -13,13 +13,9 @@ export interface SideBarProps { const Sidebar = ({ inPhotoViewer }: SideBarProps) => { const dispatch = useAppDispatch(); const sidebarOpen = useAppSelector((state) => state.globalState.sidebarOpen); - const sidebarTarget = useAppSelector( - (state) => state.globalState.sidebarTarget, - ); + const sidebarTarget = useAppSelector((state) => state.globalState.sidebarTarget); // null: not valid, undefined: not loaded, FileResponse: loaded - const [target, setTarget] = useState( - undefined, - ); + const [target, setTarget] = useState(undefined); const loadExtendedInfo = useCallback( (path: string) => { @@ -72,8 +68,7 @@ const Sidebar = ({ inPhotoViewer }: SideBarProps) => { width: "300px", height: "100%", ml: 1, - borderRadius: (theme) => - inPhotoViewer ? 0 : theme.shape.borderRadius / 8, + borderRadius: (theme) => (inPhotoViewer ? 0 : theme.shape.borderRadius / 8), }} withBorder={!inPhotoViewer} > diff --git a/src/component/FileManager/Sidebar/SidebarDialog.tsx b/src/component/FileManager/Sidebar/SidebarDialog.tsx index 48c2fd7..09819cf 100644 --- a/src/component/FileManager/Sidebar/SidebarDialog.tsx +++ b/src/component/FileManager/Sidebar/SidebarDialog.tsx @@ -20,13 +20,9 @@ const Transition = forwardRef(function Transition( const SidebarDialog = ({ inPhotoViewer }: SideBarProps) => { const dispatch = useAppDispatch(); const sidebarOpen = useAppSelector((state) => state.globalState.sidebarOpen); - const sidebarTarget = useAppSelector( - (state) => state.globalState.sidebarTarget, - ); + const sidebarTarget = useAppSelector((state) => state.globalState.sidebarTarget); // null: not valid, undefined: not loaded, FileResponse: loaded - const [target, setTarget] = useState( - undefined, - ); + const [target, setTarget] = useState(undefined); const loadExtendedInfo = useCallback( (path: string) => { diff --git a/src/component/FileManager/Sidebar/Tags.tsx b/src/component/FileManager/Sidebar/Tags.tsx index b696ae6..8abf58d 100644 --- a/src/component/FileManager/Sidebar/Tags.tsx +++ b/src/component/FileManager/Sidebar/Tags.tsx @@ -37,12 +37,7 @@ const Tags = ({ target }: TagsProps) => { return ( <> - + {t("application:fileManager.tags")} diff --git a/src/component/FileManager/TopBar/BreadcrumbHiddenItem.tsx b/src/component/FileManager/TopBar/BreadcrumbHiddenItem.tsx index ac915e7..60f11c4 100644 --- a/src/component/FileManager/TopBar/BreadcrumbHiddenItem.tsx +++ b/src/component/FileManager/TopBar/BreadcrumbHiddenItem.tsx @@ -1,14 +1,5 @@ -import { - BreadcrumbButtonProps, - useBreadcrumbButtons, -} from "./BreadcrumbButton.tsx"; -import { - ListItemIcon, - ListItemText, - MenuItem, - Skeleton, - styled, -} from "@mui/material"; +import { BreadcrumbButtonProps, useBreadcrumbButtons } from "./BreadcrumbButton.tsx"; +import { ListItemIcon, ListItemText, MenuItem, Skeleton, styled } from "@mui/material"; import { useContext, useMemo } from "react"; import { useAppSelector } from "../../../redux/hooks.ts"; import FileIcon from "../Explorer/FileIcon.tsx"; @@ -20,24 +11,13 @@ export interface BreadcrumbHiddenItem extends BreadcrumbButtonProps { onClose: () => void; } -export const StyledMenuItem = styled(MenuItem)<{ isDropOver?: boolean }>( - ({ theme, isDropOver }) => ({ - transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important", - transitionProperty: "background-color,opacity,box-shadow", - boxShadow: isDropOver - ? `inset 0 0 0 2px ${theme.palette.primary.light}` - : "none", - }), -); +export const StyledMenuItem = styled(MenuItem)<{ isDropOver?: boolean }>(({ theme, isDropOver }) => ({ + transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important", + transitionProperty: "background-color,opacity,box-shadow", + boxShadow: isDropOver ? `inset 0 0 0 2px ${theme.palette.primary.light}` : "none", +})); -const BreadcrumbHiddenItem = ({ - name, - is_root, - is_latest, - path, - onClose, - ...rest -}: BreadcrumbHiddenItem) => { +const BreadcrumbHiddenItem = ({ name, is_root, is_latest, path, onClose, ...rest }: BreadcrumbHiddenItem) => { const [loading, displayName, startIcon, onClick] = useBreadcrumbButtons({ name, is_latest, @@ -70,12 +50,7 @@ const BreadcrumbHiddenItem = ({ }); return ( - + {StartIcon ? ( StartIcon @@ -91,9 +66,7 @@ const BreadcrumbHiddenItem = ({ /> )} - - {loading ? : displayName} - + {loading ? : displayName} ); }; diff --git a/src/component/FileManager/TopBar/TopActions.tsx b/src/component/FileManager/TopBar/TopActions.tsx index e3cd5a8..3f2ddaa 100644 --- a/src/component/FileManager/TopBar/TopActions.tsx +++ b/src/component/FileManager/TopBar/TopActions.tsx @@ -1,16 +1,6 @@ -import { - Button, - ButtonGroup, - styled, - useMediaQuery, - useTheme, -} from "@mui/material"; +import { Button, ButtonGroup, styled, useMediaQuery, useTheme } from "@mui/material"; import { bindPopover } from "material-ui-popup-state"; -import { - bindMenu, - bindTrigger, - usePopupState, -} from "material-ui-popup-state/hooks"; +import { bindMenu, bindTrigger, usePopupState } from "material-ui-popup-state/hooks"; import { useContext } from "react"; import { useTranslation } from "react-i18next"; import { useAppSelector } from "../../../redux/hooks.ts"; @@ -42,12 +32,8 @@ const TopActions = () => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down("sm")); const fmIndex = useContext(FmIndexContext); - const sortOptions = useAppSelector( - (state) => state.fileManager[fmIndex].list?.props.order_by_options, - ); - const isSingleFileView = useAppSelector( - (state) => state.fileManager[fmIndex].list?.single_file_view, - ); + const sortOptions = useAppSelector((state) => state.fileManager[fmIndex].list?.props.order_by_options); + const isSingleFileView = useAppSelector((state) => state.fileManager[fmIndex].list?.single_file_view); const viewPopupState = usePopupState({ variant: "popover", popupId: "viewOption", @@ -68,11 +54,7 @@ const TopActions = () => { {...bindTrigger(viewPopupState)} startIcon={!isMobile && } > - {isMobile ? ( - - ) : ( - t("application:fileManager.view") - )} + {isMobile ? : t("application:fileManager.view")} {(!(!sortOptions || isSingleFileView) || !isMobile) && ( { startIcon={!isMobile && } {...bindTrigger(sortPopupState)} > - {isMobile ? ( - - ) : ( - t("application:fileManager.sortMethod") - )} + {isMobile ? : t("application:fileManager.sortMethod")} )} {isMobile && ( diff --git a/src/component/FileManager/TreeView/Pinned.tsx b/src/component/FileManager/TreeView/Pinned.tsx index 86a14d3..6399e32 100644 --- a/src/component/FileManager/TreeView/Pinned.tsx +++ b/src/component/FileManager/TreeView/Pinned.tsx @@ -14,12 +14,8 @@ interface PinnedItem { export const usePinned = () => { const fmIndex = useContext(FmIndexContext); - const generation = useAppSelector( - (state) => state.globalState.pinedGeneration, - ); - const path_root = useAppSelector( - (state) => state.fileManager[fmIndex].path_root, - ); + const generation = useAppSelector((state) => state.globalState.pinedGeneration); + const path_root = useAppSelector((state) => state.fileManager[fmIndex].path_root); const pined = useMemo(() => { try { return SessionManager.currentLogin().user.pined?.map((p): PinnedItem => { @@ -38,9 +34,7 @@ export const usePinned = () => { const Pinned = memo(() => { const fmIndex = useContext(FmIndexContext); - const elements = useAppSelector( - (state) => state.fileManager[fmIndex].path_elements, - ); + const elements = useAppSelector((state) => state.fileManager[fmIndex].path_elements); const pined = usePinned(); return ( @@ -50,14 +44,9 @@ const Pinned = memo(() => { sx={{ mt: index == 0 ? 2 : 0 }} flatten={ p.crUri.fs() != Filesystem.share || - (p.crUri.fs() == Filesystem.share && - (!p.crUri.is_root() || p.crUri.is_search())) - } - canDrop={ - (p.crUri.fs() == Filesystem.share || - p.crUri.fs() == Filesystem.my) && - !p.crUri.is_search() + (p.crUri.fs() == Filesystem.share && (!p.crUri.is_root() || p.crUri.is_search())) } + canDrop={(p.crUri.fs() == Filesystem.share || p.crUri.fs() == Filesystem.my) && !p.crUri.is_search()} level={0} labelOverwrite={p.name} path={p.uri} diff --git a/src/component/FileManager/TreeView/TreeFile.tsx b/src/component/FileManager/TreeView/TreeFile.tsx index 9890e74..0507150 100644 --- a/src/component/FileManager/TreeView/TreeFile.tsx +++ b/src/component/FileManager/TreeView/TreeFile.tsx @@ -5,20 +5,11 @@ import { SideNavItemBase } from "../../Frame/NavBar/SideNavItem.tsx"; import clsx from "clsx"; import FileIcon from "../Explorer/FileIcon.tsx"; import { FileResponse } from "../../../api/explorer.ts"; -import { - TreeItem, - treeItemClasses, - TreeItemContentProps, - TreeItemProps, - useTreeItem, -} from "@mui/x-tree-view"; +import { TreeItem, treeItemClasses, TreeItemContentProps, TreeItemProps, useTreeItem } from "@mui/x-tree-view"; import NavIconTransition from "../../Frame/NavBar/NavIconTransition.tsx"; import { mergeRefs } from "../../../util"; import { useAppDispatch } from "../../../redux/hooks.ts"; -import { - loadChild, - navigateToPath, -} from "../../../redux/thunks/filemanager.ts"; +import { loadChild, navigateToPath } from "../../../redux/thunks/filemanager.ts"; import FacebookCircularProgress from "../../Common/CircularProgress.tsx"; import CaretDown from "../../Icons/CaretDown.tsx"; import { StartIcon } from "../TopBar/BreadcrumbButton.tsx"; @@ -41,9 +32,7 @@ const CustomContentRoot = styled(SideNavItemBase)<{ opacity: isDragging ? 0.5 : 1, transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms", transitionProperty: "opacity,box-shadow,background-color", - boxShadow: isDropOver - ? `inset 0 0 0 2px ${theme.palette.primary.light}` - : "none", + boxShadow: isDropOver ? `inset 0 0 0 2px ${theme.palette.primary.light}` : "none", height: "32px", })); @@ -56,16 +45,14 @@ const StyledTreeItemRoot = styled(TreeItem)(() => ({ }, })) as unknown as typeof TreeItem; -export const CaretDownIcon = styled(CaretDown)<{ expanded: boolean }>( - ({ theme, expanded }) => ({ - fontSize: "12px!important", - transform: `rotate(${expanded ? 0 : -90}deg)`, - transition: theme.transitions.create("transform", { - duration: theme.transitions.duration.shortest, - easing: theme.transitions.easing.easeInOut, - }), +export const CaretDownIcon = styled(CaretDown)<{ expanded: boolean }>(({ theme, expanded }) => ({ + fontSize: "12px!important", + transform: `rotate(${expanded ? 0 : -90}deg)`, + transition: theme.transitions.create("transform", { + duration: theme.transitions.duration.shortest, + easing: theme.transitions.easing.easeInOut, }), -); +})); export interface CustomContentProps extends TreeItemContentProps { parent?: string; @@ -117,12 +104,7 @@ const UnpinButton = (props: UnpinButton) => { return ( - e.stopPropagation()} - onClick={onClick} - size="small" - > + e.stopPropagation()} onClick={onClick} size="small"> @@ -136,27 +118,10 @@ const CustomContent = React.memo( const fmIndex = useContext(FmIndexContext); const [loading, setLoading] = useState(false); const [showDelete, setShowDelete] = useState(false); - const { - classes, - className, - label, - nodeId, - icon: iconProp, - expansionIcon, - displayIcon, - file, - fileIcon, - } = props; + const { classes, className, label, nodeId, icon: iconProp, expansionIcon, displayIcon, file, fileIcon } = props; - const { - disabled, - expanded, - selected, - focused, - handleExpansion, - handleSelection, - preventSelection, - } = useTreeItem(nodeId); + const { disabled, expanded, selected, focused, handleExpansion, handleSelection, preventSelection } = + useTreeItem(nodeId); const uri = useMemo(() => { // Trim 'pinedPrefix' if exist in prefix @@ -169,9 +134,7 @@ const CustomContent = React.memo( const icon = iconProp || expansionIcon || displayIcon; - const handleMouseDown = ( - event: React.MouseEvent, - ) => { + const handleMouseDown = (event: React.MouseEvent) => { preventSelection(event); }; @@ -182,13 +145,7 @@ const CustomContent = React.memo( handleExpansion(event); if (!expanded) { try { - await dispatch( - loadChild( - fmIndex, - uri, - () => (timeOutID = setTimeout(() => setLoading(true), 300)), - ), - ); + await dispatch(loadChild(fmIndex, uri, () => (timeOutID = setTimeout(() => setLoading(true), 300)))); } finally { if (timeOutID) { clearTimeout(timeOutID); @@ -211,14 +168,7 @@ const CustomContent = React.memo( const FileItemIcon = useMemo(() => { if (props.loading) { - return ( - - ); + return ; } if (fileIcon && fileIcon.Icons) { return ( @@ -320,9 +270,7 @@ const CustomContent = React.memo( {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
{icon && !loading && } - {icon && loading && ( - - )} + {icon && loading && }
{FileItemIcon} {fileName} @@ -333,23 +281,11 @@ const CustomContent = React.memo( ); const TreeFile = React.memo( - React.forwardRef(function CustomTreeItem( - props: TreeFileProps, - ref: React.Ref, - ) { + React.forwardRef(function CustomTreeItem(props: TreeFileProps, ref: React.Ref) { const contentProps = useMemo(() => { - const { level, file, notLoaded, fileIcon, loading, pinned, canDrop } = - props; + const { level, file, notLoaded, fileIcon, loading, pinned, canDrop } = props; return { level, file, notLoaded, fileIcon, loading, pinned, canDrop }; - }, [ - props.level, - props.file, - props.notLoaded, - props.fileIcon, - props.loading, - props.canDrop, - props.pinned, - ]); + }, [props.level, props.file, props.notLoaded, props.fileIcon, props.loading, props.canDrop, props.pinned]); return ( { }; const HeadlessFrame = () => { - const loading = useAppSelector( - (state) => state.globalState.loading.headlessFrame, - ); + const loading = useAppSelector((state) => state.globalState.loading.headlessFrame); const dispatch = useAppDispatch(); let navigation = useNavigation(); @@ -31,9 +29,7 @@ const HeadlessFrame = () => { - theme.palette.mode === "light" - ? theme.palette.grey[100] - : theme.palette.grey[900], + theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[900], flexGrow: 1, height: "100vh", overflow: "auto", @@ -51,8 +47,7 @@ const HeadlessFrame = () => { - `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(3)}`, + padding: (theme) => `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(3)}`, }} > {
diff --git a/src/component/Frame/NavBar/AppDrawer.tsx b/src/component/Frame/NavBar/AppDrawer.tsx index 41b41d1..ed9561d 100644 --- a/src/component/Frame/NavBar/AppDrawer.tsx +++ b/src/component/Frame/NavBar/AppDrawer.tsx @@ -1,12 +1,4 @@ -import { - Box, - Drawer, - Popover, - PopoverProps, - Stack, - useMediaQuery, - useTheme, -} from "@mui/material"; +import { Box, Drawer, Popover, PopoverProps, Stack, useMediaQuery, useTheme } from "@mui/material"; import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; import DrawerHeader from "./DrawerHeader.tsx"; import TreeNavigation from "../../FileManager/TreeView/TreeNavigation.tsx"; @@ -68,10 +60,7 @@ const AppDrawer = () => { const theme = useTheme(); const open = useAppSelector((state) => state.globalState.drawerOpen); const drawerWidth = useAppSelector((state) => state.globalState.drawerWidth); - const appBarBg = - theme.palette.mode === "light" - ? theme.palette.grey[100] - : theme.palette.grey[900]; + const appBarBg = theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[900]; return ( void; } -export const SwitchPopover = ({ - open, - anchorEl, - onClose, -}: SwitchPopoverProps) => { +export const SwitchPopover = ({ open, anchorEl, onClose }: SwitchPopoverProps) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -36,10 +26,7 @@ export const SwitchPopover = ({ } return darkMode ? "dark" : "light"; }, [darkMode]); - const handleChange = ( - _event: React.MouseEvent, - newMode: string, - ) => { + const handleChange = (_event: React.MouseEvent, newMode: string) => { let newSetting: boolean | undefined; if (newMode === "light") { newSetting = false; @@ -107,11 +94,7 @@ const DarkThemeSwitcher = () => { - setAnchorEl(null)} - /> + setAnchorEl(null)} /> ); }; diff --git a/src/component/Frame/NavBar/DrawerHeader.tsx b/src/component/Frame/NavBar/DrawerHeader.tsx index 3402a85..1f6f972 100644 --- a/src/component/Frame/NavBar/DrawerHeader.tsx +++ b/src/component/Frame/NavBar/DrawerHeader.tsx @@ -1,11 +1,4 @@ -import { - Box, - Fade, - IconButton, - styled, - useMediaQuery, - useTheme, -} from "@mui/material"; +import { Box, Fade, IconButton, styled, useMediaQuery, useTheme } from "@mui/material"; import { setDrawerOpen } from "../../../redux/globalStateSlice.ts"; import { useAppDispatch } from "../../../redux/hooks.ts"; import { ChevronLeft } from "@mui/icons-material"; @@ -29,10 +22,7 @@ const DrawerHeader = () => { const [showCollapse, setShowCollapse] = useState(false); return ( - setShowCollapse(true)} - onMouseLeave={() => setShowCollapse(false)} - > + setShowCollapse(true)} onMouseLeave={() => setShowCollapse(false)}> { - const selected = useAppSelector( - (state) => state.fileManager[FileManagerIndex.main].selected, - ); + const selected = useAppSelector((state) => state.fileManager[FileManagerIndex.main].selected); const targets = useMemo(() => { return Object.keys(selected).map((key) => selected[key]); }, [selected]); @@ -17,9 +15,7 @@ const NavBarMainActions = () => { <> - node.addEventListener("transitionend", done, false) - } + addEndListener={(node, done) => node.addEventListener("transitionend", done, false)} classNames="fade" key={`${targets.length > 0}`} > diff --git a/src/component/Frame/NavBar/NavIconTransition.tsx b/src/component/Frame/NavBar/NavIconTransition.tsx index 00e8242..8404f72 100644 --- a/src/component/Frame/NavBar/NavIconTransition.tsx +++ b/src/component/Frame/NavBar/NavIconTransition.tsx @@ -10,12 +10,7 @@ export interface NavIconTransitionProps { iconProps?: SvgIconProps; } -const NavIconTransition = ({ - fileIcon, - active, - iconProps, - ...rest -}: NavIconTransitionProps) => { +const NavIconTransition = ({ fileIcon, active, iconProps, ...rest }: NavIconTransitionProps) => { const [Active, InActive] = fileIcon; return ( @@ -30,11 +25,7 @@ const NavIconTransition = ({ {!active && ( - + )} diff --git a/src/component/Frame/NavBar/SearchBar.tsx b/src/component/Frame/NavBar/SearchBar.tsx index 9552044..9fa0e56 100644 --- a/src/component/Frame/NavBar/SearchBar.tsx +++ b/src/component/Frame/NavBar/SearchBar.tsx @@ -1,12 +1,4 @@ -import { - alpha, - Button, - IconButton, - styled, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; +import { alpha, Button, IconButton, styled, Typography, useMediaQuery, useTheme } from "@mui/material"; import { useHotkeys } from "react-hotkeys-hook"; import { Trans, useTranslation } from "react-i18next"; import { setSearchPopup } from "../../../redux/globalStateSlice.ts"; @@ -14,10 +6,7 @@ import { useAppDispatch } from "../../../redux/hooks.ts"; import Search from "../../Icons/Search.tsx"; export const KeyIndicator = styled("code")(({ theme }) => ({ - backgroundColor: - theme.palette.mode === "light" - ? theme.palette.grey[100] - : theme.palette.grey[900], + backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[900], border: `1px solid ${theme.palette.divider}`, boxShadow: theme.palette.mode === "light" @@ -36,7 +25,7 @@ const SearchButton = styled(Button)(({ theme }) => ({ " :hover": { border: `1px solid ${theme.palette.primary.main}`, backgroundColor: alpha(theme.palette.primary.main, 0.04), - } + }, })); const SearchBar = () => { diff --git a/src/component/Frame/NavBar/SplitHandle.tsx b/src/component/Frame/NavBar/SplitHandle.tsx index c6076ed..8be17bc 100644 --- a/src/component/Frame/NavBar/SplitHandle.tsx +++ b/src/component/Frame/NavBar/SplitHandle.tsx @@ -28,10 +28,7 @@ const SplitHandle = (_props: SplitHandleProps) => { function onMouseMove(e: MouseEvent) { e.preventDefault(); const newWidth = e.clientX - document.body.offsetLeft; - const cappedWidth = Math.max( - Math.min(newWidth, window.innerWidth / 2), - minDrawerWidth, - ); + const cappedWidth = Math.max(Math.min(newWidth, window.innerWidth / 2), minDrawerWidth); setCursor(cappedWidth); finalWidth.current = cappedWidth; } diff --git a/src/component/Frame/NavBar/TopAppBar.tsx b/src/component/Frame/NavBar/TopAppBar.tsx index 9428f99..6674d05 100644 --- a/src/component/Frame/NavBar/TopAppBar.tsx +++ b/src/component/Frame/NavBar/TopAppBar.tsx @@ -1,21 +1,8 @@ import { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar"; -import { - AppBar, - Box, - Collapse, - IconButton, - Stack, - Toolbar, - Tooltip, - useMediaQuery, - useTheme, -} from "@mui/material"; +import { AppBar, Box, Collapse, IconButton, Stack, Toolbar, Tooltip, useMediaQuery, useTheme } from "@mui/material"; import { Menu } from "@mui/icons-material"; import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; -import { - setDrawerOpen, - setMobileDrawerOpen, -} from "../../../redux/globalStateSlice.ts"; +import { setDrawerOpen, setMobileDrawerOpen } from "../../../redux/globalStateSlice.ts"; import NewButton from "../../FileManager/NewButton.tsx"; import UserAction from "./UserAction.tsx"; import Setting from "../../Icons/Setting.tsx"; @@ -43,19 +30,12 @@ const TopAppBar = () => { const { t } = useTranslation(); const navigate = useNavigate(); const open = useAppSelector((state) => state.globalState.drawerOpen); - const mobileDrawerOpen = useAppSelector( - (state) => state.globalState.mobileDrawerOpen, - ); + const mobileDrawerOpen = useAppSelector((state) => state.globalState.mobileDrawerOpen); const drawerWidth = useAppSelector((state) => state.globalState.drawerWidth); const musicPlayer = useAppSelector((state) => state.globalState.musicPlayer); - const [mobileMenuAnchor, setMobileMenuAnchor] = useState( - null, - ); + const [mobileMenuAnchor, setMobileMenuAnchor] = useState(null); - const appBarBg = - theme.palette.mode === "light" - ? theme.palette.grey[100] - : theme.palette.grey[900]; + const appBarBg = theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[900]; const isLogin = !!SessionManager.currentLoginOrNull(); const onMobileMenuClicked = (e: React.MouseEvent) => { @@ -94,10 +74,7 @@ const TopAppBar = () => { { color="inherit" aria-label="open drawer" // @ts-ignore - onClick={ - isMobile - ? onMobileMenuClicked - : () => dispatch(setDrawerOpen(true)) - } + onClick={isMobile ? onMobileMenuClicked : () => dispatch(setDrawerOpen(true))} edge="start" sx={{ mr: isMobile ? 1 : 2, @@ -126,11 +99,7 @@ const TopAppBar = () => { {isMobile && ( <> - + )} {!isMobile && isMainPage && ( @@ -154,10 +123,7 @@ const TopAppBar = () => { {isLogin && ( - navigate("/settings")} - > + navigate("/settings")}> diff --git a/src/component/Icons/Border.tsx b/src/component/Icons/Border.tsx index a23c718..a1a44e8 100644 --- a/src/component/Icons/Border.tsx +++ b/src/component/Icons/Border.tsx @@ -4,22 +4,10 @@ export default function Border(props: SvgIconProps) { return ( - - - - + + + + { ); }; -const ConnectionInfoDialog = ({ - onClose, - account, - ...rest -}: ConnectionInfoDialogProps) => { +const ConnectionInfoDialog = ({ onClose, account, ...rest }: ConnectionInfoDialogProps) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -70,18 +58,12 @@ const ConnectionInfoDialog = ({ > - + - + diff --git a/src/component/Pages/Devices/CreateDAVAccountDialog.tsx b/src/component/Pages/Devices/CreateDAVAccountDialog.tsx index 664a48c..67c1337 100644 --- a/src/component/Pages/Devices/CreateDAVAccountDialog.tsx +++ b/src/component/Pages/Devices/CreateDAVAccountDialog.tsx @@ -1,13 +1,5 @@ import { useTranslation } from "react-i18next"; -import { - Checkbox, - DialogContent, - DialogProps, - FormGroup, - Stack, - Typography, - useTheme, -} from "@mui/material"; +import { Checkbox, DialogContent, DialogProps, FormGroup, Stack, Typography, useTheme } from "@mui/material"; import { useAppDispatch } from "../../../redux/hooks.ts"; import DraggableDialog from "../../Dialogs/DraggableDialog.tsx"; import { useSnackbar } from "notistack"; @@ -22,10 +14,7 @@ import Boolset from "../../../util/boolset.ts"; import { GroupPermission } from "../../../api/user.ts"; import SessionManager from "../../../session"; import { SmallFormControlLabel } from "../../Common/StyledComponents.tsx"; -import { - sendCreateDavAccounts, - sendUpdateDavAccounts, -} from "../../../api/api.ts"; +import { sendCreateDavAccounts, sendUpdateDavAccounts } from "../../../api/api.ts"; import { DavAccount, DavAccountOption } from "../../../api/setting.ts"; export interface CreateDAVAccountDialogProps extends DialogProps { @@ -55,9 +44,7 @@ const CreateDAVAccountDialog = ({ const theme = useTheme(); const groupProxyEnabled = useMemo(() => { - const perm = new Boolset( - SessionManager.currentLoginOrNull()?.user.group?.permission, - ); + const perm = new Boolset(SessionManager.currentLoginOrNull()?.user.group?.permission); return perm.enabled(GroupPermission.webdav_proxy); }, []); @@ -83,11 +70,7 @@ const CreateDAVAccountDialog = ({ proxy, readonly, }; - dispatch( - editTarget - ? sendUpdateDavAccounts(editTarget.id, req) - : sendCreateDavAccounts(req), - ) + dispatch(editTarget ? sendUpdateDavAccounts(editTarget.id, req) : sendCreateDavAccounts(req)) .then((account) => { onClose && onClose({}, "escapeKeyDown"); !editTarget && onAccountAdded && onAccountAdded(account); @@ -146,39 +129,19 @@ const CreateDAVAccountDialog = ({ > setReadonly(e.target.checked)} - checked={readonly} - /> - } + control={ setReadonly(e.target.checked)} checked={readonly} />} label={t("application:setting.readonlyOn")} /> - + {t("application:setting.readonlyTooltip")} {groupProxyEnabled && ( <> setProxy(e.target.checked)} - checked={proxy} - /> - } + control={ setProxy(e.target.checked)} checked={proxy} />} label={t("application:setting.proxy")} /> - + {t("application:setting.proxyTooltip")} diff --git a/src/component/Pages/Devices/DavAccountList.tsx b/src/component/Pages/Devices/DavAccountList.tsx index a93ef6d..1b0184d 100644 --- a/src/component/Pages/Devices/DavAccountList.tsx +++ b/src/component/Pages/Devices/DavAccountList.tsx @@ -1,14 +1,6 @@ import * as React from "react"; import { useCallback, useState } from "react"; -import { - Box, - Table, - TableBody, - TableContainer, - TableHead, - TableRow, - Typography, -} from "@mui/material"; +import { Box, Table, TableBody, TableContainer, TableHead, TableRow, Typography } from "@mui/material"; import { useTranslation } from "react-i18next"; import { getDavAccounts } from "../../../api/api.ts"; import { useAppDispatch } from "../../../redux/hooks.ts"; @@ -26,19 +18,14 @@ export interface DavAccountListProps { setCreateAccountDialog: (value: boolean) => void; } -const DavAccountList = ({ - creatAccountDialog, - setCreateAccountDialog, -}: DavAccountListProps) => { +const DavAccountList = ({ creatAccountDialog, setCreateAccountDialog }: DavAccountListProps) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const [nextPageToken, setNextPageToken] = useState(""); const [accounts, setAccounts] = useState([]); const [loading, setLoading] = useState(false); - const [accountInfoTarget, setAccountInfoTarget] = useState< - DavAccount | undefined - >(); + const [accountInfoTarget, setAccountInfoTarget] = useState(); const [editTarget, setEditTarget] = useState(); const [editOpen, setEditOpen] = useState(false); @@ -75,9 +62,7 @@ const DavAccountList = ({ const onAccountDeleted = useCallback( (id: string) => { - setAccounts((accounts) => - accounts.filter((account) => account.id !== id), - ); + setAccounts((accounts) => accounts.filter((account) => account.id !== id)); }, [setAccounts], ); @@ -103,9 +88,7 @@ const DavAccountList = ({ open={editOpen} editTarget={editTarget} onClose={() => setEditOpen(false)} - onAccountUpdated={(account) => - setAccounts(accounts.map((a) => (a.id == account.id ? account : a))) - } + onAccountUpdated={(account) => setAccounts(accounts.map((a) => (a.id == account.id ? account : a)))} /> + {t("setting.annotation")} - {t("setting.annotation")} - - - - {t("setting.rootFolder")} - - - - {t("fileManager.permissions")} - - - {t("setting.proxy")} - - - {t("fileManager.createdAt")} - - - {t("fileManager.actions")} + {t("setting.rootFolder")} + {t("fileManager.permissions")} + {t("setting.proxy")} + {t("fileManager.createdAt")} + {t("fileManager.actions")} @@ -152,9 +123,7 @@ const DavAccountList = ({ <> {[...Array(4)].map((_, i) => ( void; } -const DavAccountRow = ({ - account, - onAccountDeleted, - onLoad, - loading, - onClick, - onEditClicked, -}: DavAccountRowProps) => { +const DavAccountRow = ({ account, onAccountDeleted, onLoad, loading, onClick, onEditClicked }: DavAccountRowProps) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -73,10 +56,7 @@ const DavAccountRow = ({ const [readOnly, proxy] = useMemo(() => { if (!account?.options) return [false, false] as const; const bs = new Boolset(account.options); - return [ - bs.enabled(DavAccountOption.readonly), - bs.enabled(DavAccountOption.proxy), - ] as const; + return [bs.enabled(DavAccountOption.readonly), bs.enabled(DavAccountOption.proxy)] as const; }, [account?.options]); const { onClose, ...rest } = bindMenu(actionMenuState); @@ -101,11 +81,7 @@ const DavAccountRow = ({ return ( - {loading ? ( - - ) : ( - account?.name - )} + {loading ? : account?.name} {loading ? ( @@ -126,17 +102,9 @@ const DavAccountRow = ({ {loading ? ( ) : readOnly ? ( - } - size={"small"} - label={t("setting.readonlyOn")} - /> + } size={"small"} label={t("setting.readonlyOn")} /> ) : ( - } - size={"small"} - label={t("setting.readonlyOff")} - /> + } size={"small"} label={t("setting.readonlyOff")} /> )} diff --git a/src/component/Pages/Devices/Devices.tsx b/src/component/Pages/Devices/Devices.tsx index 161d565..a7cfef0 100644 --- a/src/component/Pages/Devices/Devices.tsx +++ b/src/component/Pages/Devices/Devices.tsx @@ -26,9 +26,7 @@ const Devices = () => { const dispatch = useAppDispatch(); const [searchParams, setSearchParams] = useSearchParams(); const [creatAccountDialog, setCreateAccountDialog] = useState(false); - const appPromotion = useAppSelector( - (state) => state.siteConfig.app.config?.app_promotion, - ); + const appPromotion = useAppSelector((state) => state.siteConfig.app.config?.app_promotion); const webDavEnabled = useMemo(() => { const user = SessionManager.currentLoginOrNull(); @@ -59,8 +57,7 @@ const Devices = () => { }, [webDavEnabled, appPromotion]); const [tab, setTab] = useState( - searchParams.get(PageTabQuery) ?? - (webDavEnabled ? DevicePageTab.Dav : DevicePageTab.App), + searchParams.get(PageTabQuery) ?? (webDavEnabled ? DevicePageTab.Dav : DevicePageTab.App), ); useEffect(() => { @@ -73,33 +70,20 @@ const Devices = () => { - } title={t("application:navbar.connect")} /> - setTab(newValue)} - tabs={tabs} - /> + setTab(newValue)} tabs={tabs} /> {tab == DevicePageTab.Dav && webDavEnabled && ( - + )} {tab == DevicePageTab.App && appPromotion && } - {!webDavEnabled && !appPromotion && ( - - )} + {!webDavEnabled && !appPromotion && } ); diff --git a/src/component/Pages/Login/Activate.tsx b/src/component/Pages/Login/Activate.tsx index 717d487..cbf6194 100644 --- a/src/component/Pages/Login/Activate.tsx +++ b/src/component/Pages/Login/Activate.tsx @@ -12,9 +12,7 @@ import { sendEmailActivate } from "../../../api/api.ts"; const Activate = () => { const { t } = useTranslation(); - const { reg_captcha } = useAppSelector( - (state) => state.siteConfig.login.config, - ); + const { reg_captcha } = useAppSelector((state) => state.siteConfig.login.config); const navigate = useNavigate(); const { enqueueSnackbar } = useSnackbar(); const dispatch = useAppDispatch(); @@ -72,11 +70,7 @@ const Activate = () => {