import React from 'react' ; import { Box , Text } from 'ink' ; import config from '@config' ; import { OVERFLOWING_ROWS_TOP , OVERFLOWING_ROWS_BOTTOM , } from '@progress-logger' ; import { useScannedRepositoriesCount , useStdoutHeight , useScroll , } from '../hooks' ; const CONTENT_PADDING = 2 ; /**
 * Box for managing scrolling of messages
 * - Keeps track of how many messages can fit to the screen
 *   and hides the overflowing ones. Renders scroll indicators
 *   on top and bottom of the box.
 * - Scrolling is handled via `useScroll`
 * - Displayed only on CLI mode
 */ const MessagesScrollBox = ( { children } ) => { const terminalHeight = useStdoutHeight ( ) ; const scannedRepositories = useScannedRepositoriesCount ( ) ; const messages = React . Children . toArray ( children ) ; const repositoriesLeft = config . repositories . length - scannedRepositories ; const tasks = Math . min ( repositoriesLeft , config . concurrentTasks ) ; const maxHeight = terminalHeight - tasks - CONTENT_PADDING ; const maxScroll = messages . length - maxHeight ; const scrollTop = useScroll ( maxScroll , maxHeight ) ; const messagesOverflowing = messages . length - scrollTop > maxHeight ; const areaHeight = messagesOverflowing ? maxHeight : undefined ; const visibleMessages = messages . slice ( scrollTop , scrollTop + maxHeight ) ; if ( scrollTop ) { visibleMessages . splice ( 0 , 1 , < Text key = 'scroll-top' color = 'yellow' wrap = 'truncate-end' > { OVERFLOWING_ROWS_TOP ( scrollTop ) } < /Text>); } if ( messagesOverflowing ) { visibleMessages . splice ( - 1 , 1 , < Text key = 'scroll-bottom' color = 'yellow' wrap = 'truncate-end' > { OVERFLOWING_ROWS_BOTTOM ( maxScroll - scrollTop ) } < /Text>); } return ( < Box flexDirection = 'column' marginTop = { 1 } height = { areaHeight } > { visibleMessages } < /Box>); } ; export default MessagesScrollBox ;