const { onClick, selected, boards, onEditBoardClick, onChangeShowEditBoardDialog, createBoardStatus } = props; const BoardList = styled.div` display: flex; flex-direction: column; justify-content: center; width: 100%; padding-left: 0; `; State.init( { hoverId: -1, } ); const updateHoverId = ( id ) => { State.update( { hoverId: id, } ); }; return ( <BoardList> { ( boards || [] ).map((board) => { const boardStatus = props.createBoardStatus.find(b => b.name === props.name); return ( <Widget src="calimero.testnet/widget/Calimero.TaskChain.SideMenu.BoardItem" props={{ id: board[0], name: board[1], onClick: () => { if(!board[0] || !(boardStatus === "Saving..." && boardsStatus === "Error saving")) { onClick(board[0]); } }, onMouseEnter: () => updateHoverId(board[0]), onMouseLeave: () => updateHoverId(-1), onSettingsClick: () => { if(!(boardStatus === "Saving..." || boardsStatus === "Error saving")) { onChangeShowEditBoardDialog(true, board[0], board[1]); } }, hoverId: state.hoverId, selected, boardStatus }} /> ) } ) } </BoardList> );