- {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)}
+ override render(): React.ReactNode {
+ return ReactDOM.createPortal(
+ this.renderBoardListItems(),
+ this.dropdownElement
+ );
+ }
+
+ private renderBoardListItems(): React.ReactNode {
+ const { coords, boardList } = this.props;
+ if (coords === 'hidden') {
+ return '';
+ }
+ const footerLabel = nls.localize(
+ 'arduino/board/openBoardsConfig',
+ 'Select other board and port…'
+ );
+ return (
+
+
+ {boardList.items.map((item, index) =>
+ this.renderBoardListItem({
+ item,
+ selected: index === boardList.selectedIndex,
+ })
+ )}
+
this.props.openBoardsConfig()}
+ >
+
{footerLabel}
+
+
+ );
+ }
+
+ private readonly onDefaultAction = (item: BoardListItemUI): unknown => {
+ const { boardList, hide } = this.props;
+ const { type, params } = item.defaultAction;
+ hide();
+ switch (type) {
+ case 'select-boards-config': {
+ return boardList.select(params);
+ }
+ case 'edit-boards-config': {
+ return boardList.edit(params);
+ }
+ default:
+ return assertUnreachable(type);
}
+ };
- protected renderItem({ label, selected, onClick }: { label: string, selected?: boolean, onClick: () => void }): React.ReactNode {
- return
-
- {label}
+ private renderBoardListItem({
+ item,
+ selected,
+ }: {
+ item: BoardListItemUI;
+ selected: boolean;
+ }): React.ReactNode {
+ const { boardLabel, portLabel, portProtocol, tooltip } = item.labels;
+ const port = item.port;
+ const onKeyUp = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ this.onDefaultAction(item);
+ }
+ };
+ return (
+
this.onDefaultAction(item)}
+ onKeyUp={onKeyUp}
+ tabIndex={0}
+ >
+
+
+
+
+ {boardLabel}
- {selected ?
: ''}
+
+
+ {portLabel}
+
- }
+ {this.renderActions(item)}
+
+ );
+ }
+ private renderActions(item: BoardListItemUI): React.ReactNode {
+ const { boardList, hide } = this.props;
+ const { revert, edit } = item.otherActions;
+ if (!edit && !revert) {
+ return undefined;
+ }
+ const handleOnClick = (
+ event: React.MouseEvent
,
+ callback: () => void
+ ) => {
+ event.preventDefault();
+ event.stopPropagation();
+ hide();
+ callback();
+ };
+ return (
+
+ {edit && (
+
+ {
+
+ handleOnClick(event, () => boardList.edit(edit.params))
+ }
+ />
+ }
+
+ )}
+ {revert && (
+
+ {
+
+ handleOnClick(event, () => boardList.select(revert.params))
+ }
+ />
+ }
+
+ )}
+
+ );
+ }
}
-export class BoardsToolBarItem extends React.Component
{
+export class BoardsToolBarItem extends React.Component<
+ BoardsToolBarItem.Props,
+ BoardsToolBarItem.State
+> {
+ static TOOLBAR_ID: 'boards-toolbar';
- static TOOLBAR_ID: 'boards-toolbar';
+ private readonly toDispose: DisposableCollection;
- protected readonly toDispose: DisposableCollection = new DisposableCollection();
+ constructor(props: BoardsToolBarItem.Props) {
+ super(props);
+ const { boardList } = props.boardsServiceProvider;
+ this.state = {
+ boardList,
+ coords: 'hidden',
+ };
+ const listener = () => this.setState({ coords: 'hidden' });
+ document.addEventListener('click', listener);
+ this.toDispose = new DisposableCollection(
+ Disposable.create(() => document.removeEventListener('click', listener))
+ );
+ }
- constructor(props: BoardsToolBarItem.Props) {
- super(props);
+ override componentDidMount(): void {
+ this.toDispose.push(
+ this.props.boardsServiceProvider.onBoardListDidChange((boardList) =>
+ this.setState({ boardList })
+ )
+ );
+ }
- const { availableBoards } = props.boardsServiceClient;
- this.state = {
- availableBoards,
- coords: 'hidden'
- };
+ override componentWillUnmount(): void {
+ this.toDispose.dispose();
+ }
- document.addEventListener('click', () => {
- this.setState({ coords: 'hidden' });
+ private readonly show = (event: React.MouseEvent): void => {
+ const { currentTarget: element } = event;
+ if (element instanceof HTMLElement) {
+ if (this.state.coords === 'hidden') {
+ const rect = element.getBoundingClientRect();
+ this.setState({
+ coords: {
+ top: rect.top,
+ left: rect.left,
+ width: rect.width,
+ paddingTop: rect.height,
+ },
});
+ } else {
+ this.setState({ coords: 'hidden' });
+ }
}
+ event.stopPropagation();
+ event.nativeEvent.stopImmediatePropagation();
+ };
- componentDidMount() {
- this.props.boardsServiceClient.onAvailableBoardsChanged(availableBoards => this.setState({ availableBoards }));
- }
-
- componentWillUnmount(): void {
- this.toDispose.dispose();
- }
-
- protected readonly show = (event: React.MouseEvent) => {
- const { currentTarget: element } = event;
- if (element instanceof HTMLElement) {
- if (this.state.coords === 'hidden') {
- const rect = element.getBoundingClientRect();
- this.setState({
- coords: {
- top: rect.top,
- left: rect.left,
- width: rect.width,
- paddingTop: rect.height
- }
- });
- } else {
- this.setState({ coords: 'hidden' });
- }
- }
- event.stopPropagation();
- event.nativeEvent.stopImmediatePropagation();
- };
-
- 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 decorator = (() => {
- const selectedBoard = availableBoards.find(({ selected }) => selected);
- if (!selectedBoard || !selectedBoard.port) {
- return 'fa fa-times notAttached'
- }
- if (selectedBoard.state === AvailableBoard.State.guessed) {
- return 'fa fa-exclamation-triangle guessed'
- }
- return ''
- })();
-
- return
-
- ({
- ...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}>
-
- ;
- }
-
- protected openDialog = () => {
- this.props.commands.executeCommand(ArduinoCommands.OPEN_BOARDS_DIALOG.id);
- this.setState({ coords: 'hidden' });
- };
+ private readonly hide = () => {
+ this.setState({ coords: 'hidden' });
+ };
+ 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 &&
}
+
+ {boardLabel}
+
+
+
+
+ {showPercentage && (
+
+ )}
+
-# Arduino IDE 2.x (beta)
+# Arduino IDE 2.x
-[](https://github.com/arduino/arduino-ide/actions?query=workflow%3A%22Arduino+IDE%22)
+[](https://github.com/arduino/arduino-ide/actions/workflows/build.yml)
+[](https://github.com/arduino/arduino-ide/actions/workflows/check-javascript.yml)
+[](https://github.com/arduino/arduino-ide/actions/workflows/test-javascript.yml)
-This repository contains the source code of the Arduino IDE 2.x, which is currently in beta stage. If you're looking for the stable IDE, go to the repository of the 1.x version at https://github.com/arduino/Arduino.
+This repository contains the source code of the Arduino IDE 2.x. If you're looking for the old IDE, go to the [repository of the 1.x version](https://github.com/arduino/Arduino).
The Arduino IDE 2.x is a major rewrite, sharing no code with the IDE 1.x. It is based on the [Theia IDE](https://theia-ide.org/) framework and built with [Electron](https://www.electronjs.org/). The backend operations such as compilation and uploading are offloaded to an [arduino-cli](https://github.com/arduino/arduino-cli) instance running in daemon mode. This new IDE was developed with the goal of preserving the same interface and user experience of the previous major version in order to provide a frictionless upgrade.
-> ⚠️ This is **beta** software. Help us test it!
-
## Download
-You can download the latest version from the [software download page on the Arduino website](https://www.arduino.cc/en/software#experimental-software).
-### Nightly builds
-
-These builds are generated every day at 03:00 GMT from the `main` branch and
-should be considered unstable:
-
-Platform | 32 bit | 64 bit |
---------- | ------------------------ | ------------------------------------------------------------------------------------------------------ |
-Linux | | [Nightly Linux 64 bit] |
-Linux ARM | [🚧 Work in progress...] | [🚧 Work in progress...] |
-Windows | | [Nightly Windows 64 bit installer]