15308555518/ frontend
1
0
Fork 0
mirror of https://github.com/cloudreve/frontend.git synced 2025-12-26 04:02:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: keywords highlight in search results

This commit is contained in:
HFO4 2022-04-29 19:55:11 +08:00
parent 16df89188a
commit 9105758d9a
6 changed files with 55 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -74,6 +74,7 @@
"react-dnd": "^9.5.1",
"react-dnd-html5-backend": "^9.5.1",
"react-dom": "^16.12.0",
"react-highlight-words": "^0.18.0",
"react-hotkeys": "^2.0.0",
"react-lazy-load-image-component": "^1.3.2",
"react-load-script": "^0.0.6",

3
src/component/FileManager/FileIcon.js
View File

@ -19,6 +19,7 @@ import TypeIcon from "./TypeIcon";
import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded";
import statusHelper from "../../utils/page";
import Grow from "@material-ui/core/Grow";
import FileName from "./FileName";
const styles = (theme) => ({
container: {},
@ -290,7 +291,7 @@ class FileIconCompoment extends Component {
[classes.shareFix]: this.props.share,
})}
>
{this.props.file.name}
<FileName name={this.props.file.name} />
</Typography>
</Tooltip>
</div>

28
src/component/FileManager/FileName.js Normal file
View File

@ -0,0 +1,28 @@
import Highlighter from "react-highlight-words";
import { trimPrefix } from "../Uploader/core/utils";
import React from "react";
import { useSelector } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
highlight: {
backgroundColor: theme.palette.warning.light,
},
}));
export default function FileName({ name }) {
const classes = useStyles();
const search = useSelector((state) => state.explorer.search);
if (!search) {
return name;
}
return (
<Highlighter
highlightClassName={classes.highlight}
searchWords={trimPrefix(search.keywords, "keywords/").split(" ")}
autoEscape={true}
textToHighlight={name}
/>
);
}

3
src/component/FileManager/SmallIcon.js
View File

@ -13,6 +13,7 @@ import TypeIcon from "./TypeIcon";
import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded";
import Grow from "@material-ui/core/Grow";
import { Folder } from "@material-ui/icons";
import FileName from "./FileName";
const styles = (theme) => ({
container: {
@ -161,7 +162,7 @@ class SmallIconCompoment extends Component {
})}
variant="body2"
>
{this.props.file.name}
<FileName name={this.props.file.name} />
</Typography>
</Tooltip>
</ButtonBase>

3
src/component/FileManager/TableRow.js
View File

@ -20,6 +20,7 @@ import KeyboardReturnIcon from "@material-ui/icons/KeyboardReturn";
import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded";
import Grow from "@material-ui/core/Grow";
import { formatLocalTime } from "../../utils/datetime";
import FileName from "./FileName";
const styles = (theme) => ({
selected: {
@ -177,7 +178,7 @@ class TableRowCompoment extends Component {
</Grow>
)}
</div>
{this.props.file.name}
<FileName name={this.props.file.name} />
</Typography>
</TableCell>
<TableCell

21
yarn.lock
View File

@ -5567,6 +5567,11 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
highlight-words-core@^1.2.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==
highlight.js@^9.13.1:
version "9.18.5"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
@ -7457,6 +7462,11 @@ media-typer@0.3.0:
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
memoize-one@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.1.0.tgz#a2387c58c03fff27ca390c31b764a79addf3f906"
integrity sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA==
memory-fs@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@ -9263,7 +9273,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -9538,6 +9548,15 @@ react-error-overlay@^6.0.3:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"
integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
react-highlight-words@^0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/react-highlight-words/-/react-highlight-words-0.18.0.tgz#ff3b3ef7cb497fa2e8fa4d54c1a1a98ac6390d0e"
integrity sha512-5z+46eLPjB4JWgOhuQ0E+6iUPTD1U3amiy5KKjzZmeJ5zyvHr91hnzBT3UHya/KlySm5KRTKpYpba9vs67oO2A==
dependencies:
highlight-words-core "^1.2.0"
memoize-one "^4.0.0"
prop-types "^15.5.8"
react-hotkeys@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"