hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Enable basic filter

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-02-09 07:39:57 +03:00
parent e899377e16
commit 74e008299a
2 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/renderer/components/+preferences/install.module.scss Normal file
View File

@ -0,0 +1,13 @@
.noResults {
display: flex;
align-items: center;
margin: 10px 0 0;
color: #bfd3f8;
border-color: #141b25;
background-color: #313a46;
padding: 16px;
}
.searchInput>label {
box-shadow: none!important;
}

23
src/renderer/components/+preferences/install.tsx
View File

@ -3,6 +3,8 @@
* Licensed under MIT License. See LICENSE in root directory for more information. * Licensed under MIT License. See LICENSE in root directory for more information.
*/ */
import styles from "./install.module.scss";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { Icon } from "../icon"; import { Icon } from "../icon";
@ -13,6 +15,8 @@ import { Extension, getExtensions } from "./extension-list";
export function Install() { export function Install() {
const [extensions, setExtensions] = useState([]); const [extensions, setExtensions] = useState([]);
const [search, setSearch] = useState<string>("");
const query = search.toLowerCase();
useEffect(() => { useEffect(() => {
async function fetchExtensions() { async function fetchExtensions() {
@ -33,7 +37,7 @@ export function Install() {
return <Spinner/>; return <Spinner/>;
} }
return <ExtensionList extensions={extensions}/>; return <ExtensionList extensions={extensions} search={query}/>;
}; };
return ( return (
@ -41,7 +45,7 @@ export function Install() {
<h2>Install Extensions</h2> <h2>Install Extensions</h2>
<div className="mt-4"> <div className="mt-4">
<SearchInput theme="round-black"/> <SearchInput theme="round-black" className={styles.searchInput} style={{ boxShadow: "none" }} value={search} onChange={setSearch}/>
</div> </div>
<hr /> <hr />
@ -52,16 +56,27 @@ export function Install() {
); );
} }
function ExtensionList({ extensions }: { extensions: Extension[] }) { function ExtensionList({ extensions, search }: { extensions: Extension[], search?: string }) {
const history = useHistory(); const history = useHistory();
const filteredExtensions = extensions.filter((extension) => (
extension.name.toLowerCase().includes(search)
));
function handleClick(extensionId: string) { function handleClick(extensionId: string) {
history.push(`extension/${extensionId}`); history.push(`extension/${extensionId}`);
} }
if (!filteredExtensions.length) {
return (
<div className={styles.noResults}>
<Icon material="search"/>&nbsp;No extension results for {search}
</div>
);
}
return ( return (
<> <>
{extensions.map(extension => ( {filteredExtensions.map(extension => (
<ExtensionCard key={extension.id} extension={extension} onClick={() => handleClick(extension.id)}/> <ExtensionCard key={extension.id} extension={extension} onClick={() => handleClick(extension.id)}/>
))} ))}
</> </>