select-board-components.tsx

import{nls}from'@theia/core/lib/common';
importReactfrom'@theia/core/shared/react';
import{
boardListItemEquals,
typeBoardList,
typeBoardListItemWithBoard,
}from'../../../common/protocol/board-list';
import{ArduinoSelect}from'../../widgets/arduino-select';

exporttypeBoardOptionValue=BoardListItemWithBoard;
typeBoardOption={value: BoardOptionValue|undefined;label: string};

exportconstSelectBoardComponent=({
 boardList,
 updatableFqbns,
 onItemSelect,
 selectedItem,
 busy,
}: {
boardList: BoardList;
updatableFqbns: string[];
onItemSelect: (item: BoardOptionValue|null)=>void;
selectedItem: BoardOptionValue|null;
busy: boolean;
}): React.ReactElement=>{
const[selectOptions,setSelectOptions]=React.useState<BoardOption[]>([]);

const[selectItemPlaceholder,setSelectBoardPlaceholder]=React.useState('');

constselectOption=React.useCallback(
(boardOpt: BoardOption|null)=>{
onItemSelect(boardOpt?.value??null);
},
[onItemSelect]
);

React.useEffect(()=>{
// if there is activity going on, skip updating the boards (avoid flickering)
if(busy){
return;
}

letplaceholderTxt=nls.localize(
'arduino/certificate/selectBoard',
'Select a board...'
);
constupdatableBoards=boardList.boards.filter((item)=>{
constfqbn=item.board.fqbn;
returnfqbn&&updatableFqbns.includes(fqbn);
});
letselBoard=-1;

constboardOptions: BoardOption[]=updatableBoards.map((item,i)=>{
if(selectedItem===item){
selBoard=i;
}
return{
label: nls.localize(
'arduino/certificate/boardAtPort',
'{0} at {1}',
item.board.name,
item.port.address??''
),
value: item,
};
});

if(boardOptions.length===0){
placeholderTxt=nls.localize(
'arduino/certificate/noSupportedBoardConnected',
'No supported board connected'
);
}

setSelectBoardPlaceholder(placeholderTxt);
setSelectOptions(boardOptions);

if(selectedItem){
selBoard=updatableBoards.findIndex((board)=>
boardListItemEquals(board,selectedItem)
);
}

selectOption(boardOptions[selBoard]||null);
},[busy,boardList,selectOption,updatableFqbns,selectedItem]);
return(
<ArduinoSelect
id="board-select"
menuPosition="fixed"
isDisabled={selectOptions.length===0||busy}
placeholder={selectItemPlaceholder}
options={selectOptions}
value={
(selectedItem&&{
value: selectedItem,
label: nls.localize(
'arduino/certificate/boardAtPort',
'{0} at {1}',
selectedItem.board.name,
selectedItem.port.address??''
),
})||
null
}
tabSelectsValue={false}
onChange={selectOption}
/>
);
};