jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-11-17 14:19:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generalized the list item renderers.

Browse Source 
To support update/downgrade.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>
This commit is contained in:
Akos Kitta
2019-11-22 11:42:39 +01:00
parent 63cd2701b4
commit c3e2aa4feb
9 changed files with 84 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
arduino-ide-extension/src/browser/components/component-list/list-item-renderer.tsx
View File

@@ -6,7 +6,7 @@ import { ArduinoComponent } from '../../../common/protocol/arduino-component';
import { ComponentListItem } from './component-list-item';
@injectable()
export abstract class ListItemRenderer<T extends ArduinoComponent> {
export class ListItemRenderer<T extends ArduinoComponent> {
@inject(WindowService)
protected windowService: WindowService;
@@ -19,10 +19,71 @@ export abstract class ListItemRenderer<T extends ArduinoComponent> {
}
}
abstract renderItem(
renderItem(
input: ComponentListItem.State & { item: T },
install: (item: T) => Promise<void>,
onVersionChange: (version: Installable.Version) => void
): React.ReactNode;
): React.ReactNode {
}
const { item } = input;
const name = <span className='name'>{item.name}</span>;
const author = <span className='author'>{item.author}</span>;
const installedVersion = !!item.installedVersion && <div className='version-info'>
<span className='version'>Version {item.installedVersion}</span>
<span className='installed'>INSTALLED</span>
</div>;
const summary = <div className='summary'>{item.summary}</div>;
const description = <div className='summary'>{item.description}</div>;
const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onMoreInfoClick}>More info</a>;
const onClickInstall = () => install(item);
const installButton = item.installable &&
<button className='install' onClick={onClickInstall}>INSTALL</button>;
const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const version = event.target.value;
if (version) {
onVersionChange(version);
}
}
const versions = (() => {
const { availableVersions } = item;
if (availableVersions.length === 0) {
return undefined;
} else if (availableVersions.length === 1) {
return <label>{availableVersions[0]}</label>
} else {
return <select
value={input.selectedVersion}
onChange={onSelectChange}>
{
item.availableVersions
.filter(version => version !== item.installedVersion) // Filter the version that is currently installed.
.map(version => <option value={version} key={version}>{version}</option>)
}
</select>;
}
})();
return <div className='component-list-item noselect'>
<div className='header'>
<span>{name} by {author}</span>
{installedVersion}
</div>
<div className='content'>
{summary}
{description}
</div>
<div className='info'>
{moreInfo}
</div>
<div className='footer'>
{installButton}
{versions}
</div>
</div>;
}
}