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

Install from ExtensionCard

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-02-08 10:59:15 +03:00
parent 3f6fff3daa
commit 2464b7ac17
1 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,11 @@ import { Icon } from "../icon";
import { SearchInput } from "../input";
import { Spinner } from "../spinner";
import { Extension, getExtensions } from "./extension-list";
import { withInjectables } from "@ogre-tools/injectable-react";
import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
import installFromInputInjectable from "../+extensions/install-from-input/install-from-input.injectable";
import extensionInstallationStateStoreInjectable from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
import { observer } from "mobx-react";
export function Install() {
const [extensions, setExtensions] = useState([]);
@ -39,15 +44,15 @@ export function Install() {
return (
<section>
<h2><Icon material="add" style={{ opacity: ".3" }}/> Install Extensions</h2>
<h2>Install Extensions</h2>
<div className="mt-4">
<SearchInput/>
<SearchInput theme="round-black"/>
</div>
<hr />
<h2 style={{ marginTop: "30px" }}><Icon material="star" small style={{ opacity: ".3" }}/> Featured Extensions</h2>
<h2 style={{ marginTop: "30px", display: "flex", alignItems: "center" }}><Icon material="star" small style={{ opacity: ".3" }}/> Featured Extensions</h2>
{renderExtensionsOrSpinner()}
</section>
);
@ -61,9 +66,24 @@ function ExtensionList({ extensions }: { extensions: Extension[] }) {
);
}
function ExtensionCard({ extension }: { extension: Extension }) {
interface Dependencies {
installFromInput: (input: string) => Promise<void>;
extensionInstallationStateStore: ExtensionInstallationStateStore;
}
interface CardProps {
extension: Extension
}
function NonInjectedExtensionCard({ extension, extensionInstallationStateStore, installFromInput }: CardProps & Dependencies) {
const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl } = extension;
function onInstall() {
installFromInput(extension.binaryUrl);
}
return (
<div className={styles.extensionCard}>
<div className={styles.icon} style={{ backgroundImage: `url(${appIconUrl})` }}/>
@ -88,10 +108,30 @@ function ExtensionCard({ extension }: { extension: Extension }) {
<a href={githubRepositoryUrl} rel="noreferrer" target="_blank">{publisher.username}</a>
</div>
<div className={styles.install}>
<Button primary><Icon className={styles.installButtonIco} material="cloud_download"/> Install</Button>
<Button
primary
disabled={extensionInstallationStateStore.anyPreInstallingOrInstalling}
waiting={extensionInstallationStateStore.anyPreInstallingOrInstalling}
onClick={onInstall}
>
<Icon className={styles.installButtonIco} material="cloud_download"/>
Install
</Button>
</div>
</div>
</div>
</div>
);
}
export const ExtensionCard = withInjectables<Dependencies, CardProps>(
observer(NonInjectedExtensionCard),
{
getProps: (di, props) => ({
installFromInput: di.inject(installFromInputInjectable),
extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
...props,
}),
},
);