77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
|
import { Box, List, ListItem, ListItemAvatar, ListItemButton, ListItemText } from "@mui/material";
|
||
|
|
import { Trans, useTranslation } from "react-i18next";
|
||
|
|
import React, { useCallback } from "react";
|
||
|
|
// @ts-ignore
|
||
|
|
import Highlighter from "react-highlight-words";
|
||
|
|
import { useAppDispatch } from "../../../redux/hooks.ts";
|
||
|
|
import { SearchOutlined } from "@mui/icons-material";
|
||
|
|
import { FileType } from "../../../api/explorer.ts";
|
||
|
|
import FileBadge from "../FileBadge.tsx";
|
||
|
|
import { quickSearch } from "../../../redux/thunks/filemanager.ts";
|
||
|
|
import { FileManagerIndex } from "../FileManager.tsx";
|
||
|
|
|
||
|
|
export interface FullSearchOptionProps {
|
||
|
|
options: string[];
|
||
|
|
keyword: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const FullSearchOption = ({ options, keyword }: FullSearchOptionProps) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const dispatch = useAppDispatch();
|
||
|
|
|
||
|
|
const onClick = useCallback(
|
||
|
|
(base: string) => () => dispatch(quickSearch(FileManagerIndex.main, base, keyword)),
|
||
|
|
[keyword, dispatch],
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<List sx={{ width: "100%", px: 1 }} dense>
|
||
|
|
{options.map((option) => (
|
||
|
|
<ListItem disablePadding dense>
|
||
|
|
<ListItemButton onClick={onClick(option)} sx={{ py: 0 }}>
|
||
|
|
<ListItemAvatar sx={{ minWidth: 48 }}>
|
||
|
|
<SearchOutlined
|
||
|
|
sx={{
|
||
|
|
color: (theme) => theme.palette.action.active,
|
||
|
|
width: 24,
|
||
|
|
height: 24,
|
||
|
|
mt: "7px",
|
||
|
|
ml: "5px",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</ListItemAvatar>
|
||
|
|
<ListItemText
|
||
|
|
primary={
|
||
|
|
<Trans
|
||
|
|
ns={"application"}
|
||
|
|
i18nKey={"navbar.searchIn"}
|
||
|
|
values={{
|
||
|
|
keywords: keyword,
|
||
|
|
}}
|
||
|
|
components={[<Box component={"span"} sx={{ fontWeight: 600 }} />]}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
slotProps={{
|
||
|
|
primary: {
|
||
|
|
variant: "body2",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<FileBadge
|
||
|
|
clickable
|
||
|
|
variant={"outlined"}
|
||
|
|
sx={{ px: 1, my: "4px" }}
|
||
|
|
simplifiedFile={{
|
||
|
|
path: option,
|
||
|
|
type: FileType.folder,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</ListItemButton>
|
||
|
|
</ListItem>
|
||
|
|
))}
|
||
|
|
</List>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default FullSearchOption;
|