jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-11-13 20:29:27 +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

126
arduino-ide-extension/src/browser/theia/messages/notification-component.tsx
View File

@@ -1,44 +1,80 @@
import * as React from 'react';
import { NotificationComponent as TheiaNotificationComponent } from '@theia/messages/lib/browser/notification-component'
import { NotificationComponent as TheiaNotificationComponent } from '@theia/messages/lib/browser/notification-component';
export class NotificationComponent extends TheiaNotificationComponent {
render(): React.ReactNode {
const { messageId, message, type, collapsed, expandable, source, actions } = this.props.notification;
return (<div key={messageId} className='theia-notification-list-item'>
<div className={`theia-notification-list-item-content ${collapsed ? 'collapsed' : ''}`}>
<div className='theia-notification-list-item-content-main'>
<div className={`theia-notification-icon theia-notification-icon-${type}`} />
<div className='theia-notification-message'>
<span dangerouslySetInnerHTML={{ __html: message }} onClick={this.onMessageClick} />
const {
messageId,
message,
type,
collapsed,
expandable,
source,
actions,
} = this.props.notification;
return (
<div key={messageId} className="theia-notification-list-item">
<div
className={`theia-notification-list-item-content ${
collapsed ? 'collapsed' : ''
}`}
>
<div className="theia-notification-list-item-content-main">
<div
className={`theia-notification-icon theia-notification-icon-${type}`}
/>
<div className="theia-notification-message">
<span
dangerouslySetInnerHTML={{ __html: message }}
onClick={this.onMessageClick}
/>
</div>
<ul className="theia-notification-actions">
{expandable && (
<li
className={
collapsed ? 'expand' : 'collapse'
}
title={collapsed ? 'Expand' : 'Collapse'}
data-message-id={messageId}
onClick={this.onToggleExpansion}
/>
)}
{!this.isProgress && (
<li
className="clear"
title="Clear"
data-message-id={messageId}
onClick={this.onClear}
/>
)}
</ul>
</div>
<ul className='theia-notification-actions'>
{expandable && (
<li className={collapsed ? 'expand' : 'collapse'} title={collapsed ? 'Expand' : 'Collapse'}
data-message-id={messageId} onClick={this.onToggleExpansion} />
)}
{!this.isProgress && (<li className='clear' title='Clear' data-message-id={messageId} onClick={this.onClear} />)}
</ul>
{(source || !!actions.length) && (
<div className="theia-notification-list-item-content-bottom">
<div className="theia-notification-source">
{source && <span>{source}</span>}
</div>
<div className="theia-notification-buttons">
{actions &&
actions.map((action, index) => (
<button
key={messageId + `-action-${index}`}
className="theia-button"
data-message-id={messageId}
data-action={action}
onClick={this.onAction}
>
{action}
</button>
))}
</div>
</div>
)}
</div>
{(source || !!actions.length) && (
<div className='theia-notification-list-item-content-bottom'>
<div className='theia-notification-source'>
{source && (<span>{source}</span>)}
</div>
<div className='theia-notification-buttons'>
{actions && actions.map((action, index) => (
<button key={messageId + `-action-${index}`} className='theia-button'
data-message-id={messageId} data-action={action}
onClick={this.onAction}>
{action}
</button>
))}
</div>
</div>
)}
{this.renderProgressBar()}
</div>
{this.renderProgressBar()}
</div>);
);
}
private renderProgressBar(): React.ReactNode {
@@ -46,17 +82,25 @@ export class NotificationComponent extends TheiaNotificationComponent {
return undefined;
}
if (!Number.isNaN(this.props.notification.progress)) {
return <div className='theia-notification-item-progress'>
<div className='theia-notification-item-progressbar' style={{ width: `${this.props.notification.progress}%` }} />
</div>;
return (
<div className="theia-notification-item-progress">
<div
className="theia-notification-item-progressbar"
style={{
width: `${this.props.notification.progress}%`,
}}
/>
</div>
);
}
return <div className='theia-progress-bar-container'>
<div className='theia-progress-bar' />
</div>
return (
<div className="theia-progress-bar-container">
<div className="theia-progress-bar" />
</div>
);
}
private get isProgress(): boolean {
return typeof this.props.notification.progress === 'number';
}
}