jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-11-09 18:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use eslint&prettier for code linting&formatting

Browse Source
This commit is contained in:
Francesco Stasi
2021-06-16 15:08:48 +02:00
committed by Francesco Stasi
parent 2a3873a923
commit 0592199858
173 changed files with 8963 additions and 3841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
arduino-ide-extension/src/browser/widgets/component-list/list-item-renderer.tsx
View File

@@ -7,17 +7,18 @@ 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>) => {
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 },
@@ -25,78 +26,98 @@ export class ListItemRenderer<T extends ArduinoComponent> {
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>
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>;
nameAndAuthor = <span className="name">{item.name}</span>;
} else if ((item as any).id) {
nameAndAuthor = <span className='name'>{(item as any).id}</span>;
nameAndAuthor = <span className="name">{(item as any).id}</span>;
} else {
nameAndAuthor = <span className='name'>Unknown</span>;
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 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 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 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 installButton = item.installable && (
<button className="theia-button install" onClick={onClickInstall}>
INSTALL
</button>
);
const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
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>
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 (
<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}
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>
<div className='content'>
{summary}
{description}
</div>
<div className='info'>
{moreInfo}
</div>
<div className='footer'>
{installButton}
{versions}
</div>
</div>;
);
}
}