Use eslint&prettier for code linting&formatting

arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx

@@ -5,7 +5,10 @@ import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import { Port } from '../../common/protocol';
 import { BoardsConfig } from './boards-config';
 import { ArduinoCommands } from '../arduino-commands';
-import { BoardsServiceProvider, AvailableBoard } from './boards-service-provider';
+import {
+    BoardsServiceProvider,
+    AvailableBoard,
+} from './boards-service-provider';
 
 export interface BoardsDropDownListCoords {
     readonly top: number;
@@ -17,13 +20,14 @@ export interface BoardsDropDownListCoords {
 export namespace BoardsDropDown {
     export interface Props {
         readonly coords: BoardsDropDownListCoords | 'hidden';
-        readonly items: Array<AvailableBoard & { onClick: () => void, port: Port }>;
+        readonly items: Array<
+            AvailableBoard & { onClick: () => void; port: Port }
+        >;
         readonly openBoardsConfig: () => void;
     }
 }
 
 export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
-
     protected dropdownElement: HTMLElement;
 
     constructor(props: BoardsDropDown.Props) {
@@ -47,35 +51,61 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
         if (coords === 'hidden') {
             return '';
         }
-        return <div className='arduino-boards-dropdown-list'
-            style={{
-                position: 'absolute',
-                ...coords
-            }}>
-            {this.renderItem({
-                label: 'Select Other Board & Port',
-                onClick: () => this.props.openBoardsConfig()
-            })}
-            {items.map(({ name, port, selected, onClick }) => ({ label: `${name} at ${Port.toString(port)}`, selected, onClick })).map(this.renderItem)}
-        </div>
-    }
-
-    protected renderItem({ label, selected, onClick }: { label: string, selected?: boolean, onClick: () => void }): React.ReactNode {
-        return <div key={label} className={`arduino-boards-dropdown-item ${selected ? 'selected' : ''}`} onClick={onClick}>
-            <div>
-                {label}
+        return (
+            <div
+                className="arduino-boards-dropdown-list"
+                style={{
+                    position: 'absolute',
+                    ...coords,
+                }}
+            >
+                {this.renderItem({
+                    label: 'Select Other Board & Port',
+                    onClick: () => this.props.openBoardsConfig(),
+                })}
+                {items
+                    .map(({ name, port, selected, onClick }) => ({
+                        label: `${name} at ${Port.toString(port)}`,
+                        selected,
+                        onClick,
+                    }))
+                    .map(this.renderItem)}
             </div>
-            {selected ? <span className='fa fa-check' /> : ''}
-        </div>
+        );
     }
 
+    protected renderItem({
+        label,
+        selected,
+        onClick,
+    }: {
+        label: string;
+        selected?: boolean;
+        onClick: () => void;
+    }): React.ReactNode {
+        return (
+            <div
+                key={label}
+                className={`arduino-boards-dropdown-item ${
+                    selected ? 'selected' : ''
+                }`}
+                onClick={onClick}
+            >
+                <div>{label}</div>
+                {selected ? <span className="fa fa-check" /> : ''}
+            </div>
+        );
+    }
 }
 
-export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props, BoardsToolBarItem.State> {
-
+export class BoardsToolBarItem extends React.Component<
+    BoardsToolBarItem.Props,
+    BoardsToolBarItem.State
+> {
     static TOOLBAR_ID: 'boards-toolbar';
 
-    protected readonly toDispose: DisposableCollection = new DisposableCollection();
+    protected readonly toDispose: DisposableCollection =
+        new DisposableCollection();
 
     constructor(props: BoardsToolBarItem.Props) {
         super(props);
@@ -83,7 +113,7 @@ export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props,
         const { availableBoards } = props.boardsServiceClient;
         this.state = {
             availableBoards,
-            coords: 'hidden'
+            coords: 'hidden',
         };
 
         document.addEventListener('click', () => {
@@ -92,7 +122,9 @@ export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props,
     }
 
     componentDidMount() {
-        this.props.boardsServiceClient.onAvailableBoardsChanged(availableBoards => this.setState({ availableBoards }));
+        this.props.boardsServiceClient.onAvailableBoardsChanged(
+            (availableBoards) => this.setState({ availableBoards })
+        );
     }
 
     componentWillUnmount(): void {
@@ -109,8 +141,8 @@ export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props,
                         top: rect.top,
                         left: rect.left,
                         width: rect.width,
-                        paddingTop: rect.height
-                    }
+                        paddingTop: rect.height,
+                    },
                 });
             } else {
                 this.setState({ coords: 'hidden' });
@@ -123,63 +155,76 @@ export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props,
     render(): React.ReactNode {
         const { coords, availableBoards } = this.state;
         const boardsConfig = this.props.boardsServiceClient.boardsConfig;
-        const title = BoardsConfig.Config.toString(boardsConfig, { default: 'no board selected' });
+        const title = BoardsConfig.Config.toString(boardsConfig, {
+            default: 'no board selected',
+        });
         const decorator = (() => {
-            const selectedBoard = availableBoards.find(({ selected }) => selected);
+            const selectedBoard = availableBoards.find(
+                ({ selected }) => selected
+            );
             if (!selectedBoard || !selectedBoard.port) {
-                return 'fa fa-times notAttached'
+                return 'fa fa-times notAttached';
             }
             if (selectedBoard.state === AvailableBoard.State.guessed) {
-                return 'fa fa-exclamation-triangle guessed'
+                return 'fa fa-exclamation-triangle guessed';
             }
-            return ''
+            return '';
         })();
 
-        return <React.Fragment>
-            <div className='arduino-boards-toolbar-item-container'>
-                <div className='arduino-boards-toolbar-item' title={title}>
-                    <div className='inner-container' onClick={this.show}>
-                        <span className={decorator} />
-                        <div className='label noWrapInfo'>
-                            <div className='noWrapInfo noselect'>
-                                {title}
+        return (
+            <React.Fragment>
+                <div className="arduino-boards-toolbar-item-container">
+                    <div className="arduino-boards-toolbar-item" title={title}>
+                        <div className="inner-container" onClick={this.show}>
+                            <span className={decorator} />
+                            <div className="label noWrapInfo">
+                                <div className="noWrapInfo noselect">
+                                    {title}
+                                </div>
                             </div>
+                            <span className="fa fa-caret-down caret" />
                         </div>
-                        <span className='fa fa-caret-down caret' />
                     </div>
                 </div>
-            </div>
-            <BoardsDropDown
-                coords={coords}
-                items={availableBoards.filter(AvailableBoard.hasPort).map(board => ({
-                    ...board,
-                    onClick: () => {
-                        if (board.state === AvailableBoard.State.incomplete) {
-                            this.props.boardsServiceClient.boardsConfig = {
-                                selectedPort: board.port
-                            };
-                            this.openDialog();
-                        } else {
-                            this.props.boardsServiceClient.boardsConfig = {
-                                selectedBoard: board,
-                                selectedPort: board.port
-                            }
-                        }
-                    }
-                }))}
-                openBoardsConfig={this.openDialog}>
-            </BoardsDropDown>
-        </React.Fragment>;
+                <BoardsDropDown
+                    coords={coords}
+                    items={availableBoards
+                        .filter(AvailableBoard.hasPort)
+                        .map((board) => ({
+                            ...board,
+                            onClick: () => {
+                                if (
+                                    board.state ===
+                                    AvailableBoard.State.incomplete
+                                ) {
+                                    this.props.boardsServiceClient.boardsConfig =
+                                        {
+                                            selectedPort: board.port,
+                                        };
+                                    this.openDialog();
+                                } else {
+                                    this.props.boardsServiceClient.boardsConfig =
+                                        {
+                                            selectedBoard: board,
+                                            selectedPort: board.port,
+                                        };
+                                }
+                            },
+                        }))}
+                    openBoardsConfig={this.openDialog}
+                ></BoardsDropDown>
+            </React.Fragment>
+        );
     }
 
     protected openDialog = () => {
-        this.props.commands.executeCommand(ArduinoCommands.OPEN_BOARDS_DIALOG.id);
+        this.props.commands.executeCommand(
+            ArduinoCommands.OPEN_BOARDS_DIALOG.id
+        );
         this.setState({ coords: 'hidden' });
     };
-
 }
 export namespace BoardsToolBarItem {
-
     export interface Props {
         readonly boardsServiceClient: BoardsServiceProvider;
         readonly commands: CommandRegistry;
@@ -189,5 +234,4 @@ export namespace BoardsToolBarItem {
         availableBoards: AvailableBoard[];
         coords: BoardsDropDownListCoords | 'hidden';
     }
-
 }