Generalized the list item renderers.

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

View File

@@ -1,58 +0,0 @@
import * as React from 'react';
import { injectable } from 'inversify';
import { Library } from '../../common/protocol/library-service';
import { Installable } from '../../common/protocol/installable';
import { ListItemRenderer } from '../components/component-list/list-item-renderer';
import { ComponentListItem } from '../components/component-list/component-list-item';
@injectable()
export class LibraryItemRenderer extends ListItemRenderer<Library> {
renderItem(
input: ComponentListItem.State & { item: Library },
install: (item: Library, version: Installable.Version) => Promise<void>): React.ReactNode {
const { item } = input;
const name = <span className='name'>{item.name}</span>;
const author = <span className='author'>by {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 moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onMoreInfoClick}>More info</a>;
const installButton = item.installable && !item.installedVersion &&
<button className='install' onClick={install.bind(this, item)}>INSTALL</button>;
const versions = (() => {
const { availableVersions } = item;
if (!!item.installedVersion || availableVersions.length === 0) {
return undefined;
} else if (availableVersions.length === 1) {
return <label>{availableVersions[0]}</label>
} else {
return <select>{item.availableVersions.map(version => <option value={version} key={version}>{version}</option>)}</select>;
}
})();
return <div className='component-list-item noselect'>
<div className='header'>
<span>{name} {author}</span>
{installedVersion}
</div>
<div className='content'>
{summary}
</div>
<div className='info'>
{moreInfo}
</div>
<div className='footer'>
{installButton}
{versions}
</div>
</div>;
}
}

View File

@@ -1,7 +1,7 @@
import { inject, injectable } from 'inversify';
import { Library, LibraryService } from '../../common/protocol/library-service';
import { ListWidget } from '../components/component-list/list-widget';
import { LibraryItemRenderer } from './library-item-renderer';
import { ListItemRenderer } from '../components/component-list/list-item-renderer';
@injectable()
export class LibraryListWidget extends ListWidget<Library> {
@@ -11,7 +11,7 @@ export class LibraryListWidget extends ListWidget<Library> {
constructor(
@inject(LibraryService) protected service: LibraryService,
@inject(LibraryItemRenderer) protected itemRenderer: LibraryItemRenderer) {
@inject(ListItemRenderer) protected itemRenderer: ListItemRenderer<Library>) {
super({
id: LibraryListWidget.WIDGET_ID,