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

Move ExtensionCard to its own component

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-02-08 13:09:35 +03:00
parent 78fabc1b19
commit 9ece3618ad
3 changed files with 84 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/components/+preferences/install.module.scss → src/renderer/components/+preferences/extension-card.module.scss
View File

@ -3,10 +3,6 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
.hr {
padding: 80px 0;
}
.extensionCard {
margin-bottom: 16px;
border-radius: 4px;

83
src/renderer/components/+preferences/extension-card.tsx Normal file
View File

@ -0,0 +1,83 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import styles from "./extension-card.module.scss";
import { withInjectables } from "@ogre-tools/injectable-react";
import { observer } from "mobx-react";
import React from "react";
import installFromInputInjectable from "../+extensions/install-from-input/install-from-input.injectable";
import { Button } from "../button";
import { Icon } from "../icon";
import type { Extension } from "./extension-list";
import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
import extensionInstallationStateStoreInjectable from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
interface Dependencies {
installFromInput: (input: string) => Promise<void>;
extensionInstallationStateStore: ExtensionInstallationStateStore;
}
interface Props {
extension: Extension
}
function NonInjectedExtensionCard({ extension, extensionInstallationStateStore, installFromInput }: Props & 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})` }}/>
<div className={styles.contents}>
<div className={styles.head}>
<div className={styles.nameAndVersion}>
<div className={styles.name}>{name}</div>
<div className={styles.version}>{version}</div>
</div>
<div className={styles.downloads}>
<Icon material="cloud_download"/> {totalNumberOfInstallations}
</div>
</div>
<div className={styles.description}>
{shortDescription}
</div>
<div className={styles.footer}>
<div className={styles.author}>
<a href={githubRepositoryUrl} rel="noreferrer" target="_blank">{publisher.username}</a>
</div>
<div className={styles.install}>
<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, Props>(
observer(NonInjectedExtensionCard),
{
getProps: (di, props) => ({
installFromInput: di.inject(installFromInputInjectable),
extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
...props,
}),
},
);

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

@ -3,19 +3,12 @@
* 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 { Button } from "../button";
import { Icon } from "../icon";
import { SearchInput } from "../input";
import { Spinner } from "../spinner";
import { ExtensionCard } from "./extension-card";
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([]);
@ -65,73 +58,3 @@ function ExtensionList({ extensions }: { extensions: 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})` }}/>
<div className={styles.contents}>
<div className={styles.head}>
<div className={styles.nameAndVersion}>
<div className={styles.name}>{name}</div>
<div className={styles.version}>{version}</div>
</div>
<div className={styles.downloads}>
<Icon material="cloud_download"/> {totalNumberOfInstallations}
</div>
</div>
<div className={styles.description}>
{shortDescription}
</div>
<div className={styles.footer}>
<div className={styles.author}>
<a href={githubRepositoryUrl} rel="noreferrer" target="_blank">{publisher.username}</a>
</div>
<div className={styles.install}>
<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,
}),
},
);