const { onClick, selected, boards, onEditBoardClick, onChangeShowEditBoardDialog, createBoardStatus, componentOwnerId } = 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 === board[ 1 ] ); return ( <Widget key={ board[ 0 ] } src={ `${ componentOwnerId }/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, componentOwnerId } } /> ); } ) } </BoardList> );