+ {
+
+ handleOnClick(event, () => boardList.edit(edit.params))
+ }
+ />
+ }
+
+ )}
+ {revert && (
+
+ {
+
+ handleOnClick(event, () => boardList.select(revert.params))
+ }
+ />
+ }
+
+ )}
);
}
@@ -153,26 +231,27 @@ export class BoardsToolBarItem extends React.Component<
> {
static TOOLBAR_ID: 'boards-toolbar';
- protected readonly toDispose: DisposableCollection =
- new DisposableCollection();
+ private readonly toDispose: DisposableCollection;
constructor(props: BoardsToolBarItem.Props) {
super(props);
-
- const { availableBoards } = props.boardsServiceProvider;
+ const { boardList } = props.boardsServiceProvider;
this.state = {
- availableBoards,
+ boardList,
coords: 'hidden',
};
-
- document.addEventListener('click', () => {
- this.setState({ coords: 'hidden' });
- });
+ const listener = () => this.setState({ coords: 'hidden' });
+ document.addEventListener('click', listener);
+ this.toDispose = new DisposableCollection(
+ Disposable.create(() => document.removeEventListener('click', listener))
+ );
}
override componentDidMount(): void {
- this.props.boardsServiceProvider.onAvailableBoardsChanged(
- (availableBoards) => this.setState({ availableBoards })
+ this.toDispose.push(
+ this.props.boardsServiceProvider.onBoardListDidChange((boardList) =>
+ this.setState({ boardList })
+ )
);
}
@@ -180,7 +259,7 @@ export class BoardsToolBarItem extends React.Component<
this.toDispose.dispose();
}
- protected readonly show = (event: React.MouseEvent
): void => {
+ private readonly show = (event: React.MouseEvent): void => {
const { currentTarget: element } = event;
if (element instanceof HTMLElement) {
if (this.state.coords === 'hidden') {
@@ -201,31 +280,26 @@ export class BoardsToolBarItem extends React.Component<
event.nativeEvent.stopImmediatePropagation();
};
- override render(): React.ReactNode {
- const { coords, availableBoards } = this.state;
- const { selectedBoard, selectedPort } =
- this.props.boardsServiceProvider.boardsConfig;
-
- const boardLabel =
- selectedBoard?.name ||
- nls.localize('arduino/board/selectBoard', 'Select Board');
- const selectedPortLabel = portLabel(selectedPort?.address);
+ private readonly hide = () => {
+ this.setState({ coords: 'hidden' });
+ };
- const isConnected = Boolean(selectedBoard && selectedPort);
- const protocolIcon = isConnected
- ? iconNameFromProtocol(selectedPort?.protocol || '')
+ override render(): React.ReactNode {
+ const { coords, boardList } = this.state;
+ const { boardLabel, selected, portProtocol, tooltip } = boardList.labels;
+ const protocolIcon = portProtocol
+ ? iconNameFromProtocol(portProtocol)
: null;
const protocolIconClassNames = classNames(
'arduino-boards-toolbar-item--protocol',
'fa',
protocolIcon
);
-
return (
{protocolIcon &&
}
@@ -234,57 +308,22 @@ export class BoardsToolBarItem extends React.Component<
'arduino-boards-toolbar-item--label',
'noWrapInfo',
'noselect',
- { 'arduino-boards-toolbar-item--label-connected': isConnected }
+ { 'arduino-boards-toolbar-item--label-connected': selected }
)}
>
{boardLabel}
+ boardList={boardList}
+ openBoardsConfig={() => boardList.edit({ query: '' })}
+ hide={this.hide}
+ />
);
}
-
- protected openDialog = async (
- previousBoardConfig?: BoardsConfig.Config
- ): Promise