list-item-renderer.tsx

import * as React from 'react';
import { inject, injectable } from 'inversify';
import { WindowService } from '@theia/core/lib/browser/window/window-service';
import { Installable } from '../../../common/protocol/installable';
import { ArduinoComponent } from '../../../common/protocol/arduino-component';
import { ComponentListItem } from './component-list-item';

@injectable()
export class ListItemRenderer<T extends ArduinoComponent> {
    @inject(WindowService)
    protected windowService: WindowService;

    protected onMoreInfoClick = (
        event: React.SyntheticEvent<HTMLAnchorElement, Event>
    ) => {
        const { target } = event.nativeEvent;
        if (target instanceof HTMLAnchorElement) {
            this.windowService.openNewWindow(target.href, { external: true });
            event.nativeEvent.preventDefault();
        }
    };

    renderItem(
        input: ComponentListItem.State & { item: T },
        install: (item: T) => Promise<void>,
        uninstall: (item: T) => Promise<void>,
        onVersionChange: (version: Installable.Version) => void
    ): React.ReactNode {
        const { item } = input;
        let nameAndAuthor: JSX.Element;
        if (item.name && item.author) {
            const name = <span className="name">{item.name}</span>;
            const author = <span className="author">{item.author}</span>;
            nameAndAuthor = (
                <span>
                    {name} by {author}
                </span>
            );
        } else if (item.name) {
            nameAndAuthor = <span className="name">{item.name}</span>;
        } else if ((item as any).id) {
            nameAndAuthor = <span className="name">{(item as any).id}</span>;
        } else {
            nameAndAuthor = <span className="name">Unknown</span>;
        }
        const onClickUninstall = () => uninstall(item);
        const installedVersion = !!item.installedVersion && (
            <div className="version-info">
                <span className="version">Version {item.installedVersion}</span>
                <span className="installed" onClick={onClickUninstall} />
            </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="theia-button 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
                        className="theia-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">
                    {nameAndAuthor}
                    {installedVersion}
                </div>
                <div className="content">
                    {summary}
                    {description}
                </div>
                <div className="info">{moreInfo}</div>
                <div className="footer">
                    {installButton}
                    {versions}
                </div>
            </div>
        );
    }
}