Add overflow prop to Box component

[tin-t]

Adds an overflow property to <Box> with values of "visible" (default) and "hidden". When set to "hidden", any content not inside the element's border will not be rendered.

This can be useful for making scrolling elements for arbitrary content such as the implementation posted in #222.

[prozacgod]

How close would something like this be to allowing a line start / offset prop and giving the box container the ability to scroll content?

Vertically and/or Horizontally...

[tin-t]

Here's an example of both horizontal and vertical scrolling (using the technique from #222 (comment)):

const React = require('react');
const {render, Box, Text} = require('ink');

const Scroller = ({ scrollX, scrollY, width, height, children, ...props }) => (
	<Box overflow="hidden" width={width} height={height} {...props}>
		<Box flexDirection="column" marginTop={-scrollY} marginLeft={-scrollX} flexGrow={0} flexShrink={0}>
			{children}
		</Box>
	</Box>
);

const Main = () => {
	const [scrollX, setScrollX] = React.useState(0);
	const [scrollXDir, setScrollXDir] = React.useState(1);
	const [scrollY, setScrollY] = React.useState(0);
	const [scrollYDir, setScrollYDir] = React.useState(1);
	
	React.useEffect(() => {
		if(scrollX + scrollXDir < -5 || scrollX + scrollXDir > 5){
			setScrollXDir(scrollXDir * -1);
			return;
		}
		
		setTimeout(() => setScrollX(scrollX + scrollXDir), 100);
	}, [scrollX, scrollXDir])
	
	React.useEffect(() => {
		if(scrollY + scrollYDir < -7 || scrollY + scrollYDir > 7){
			setScrollYDir(scrollYDir * -1);
			return;
		}
		
		setTimeout(() => setScrollY(scrollY + scrollYDir), 100);
	}, [scrollY, scrollYDir])
	
	return <Scroller scrollX={scrollX} scrollY={scrollY} width={24} height={12} borderColor="white" borderStyle="single">
		<Box width={10} height={5} borderColor="white" borderStyle="single" flexShrink={0}>
			<Text>box 1</Text>
		</Box>
		<Box width={20} height={10} borderColor="white" borderStyle="single" flexShrink={0}>
			<Text>box 2</Text>
		</Box>
	</Scroller>
}

render(<Main />);

[prozacgod]

Excellent, Have you seen the little snippet I made for tracking terminal size/fullscreen boxe's?

vadimdemedes/goodness-squad#5 (comment)

Give your work a try with that, and see how it goes.

I may make a fullscreen context so the terminal size is within the react ecosystem - providing size to child components.

[gnidan]

Is it possible to use this implementation to compute the unbounded overflow dimension?

To show what I mean, I want to have an inner box that exceeds the bounds of an overflow="hidden" outer box:

   .- outer
   |
   v
.-------.
|       |
|   .---+- -.
|   |###| / !
|   |###|/ /!
|   |###| / !
'---+---'/ /!
    ! / / / !
    !/ / / /!
    ! / / / !
    '- - - -'
       ^
       |
       '- inner

How can I measure the dimensions of the inner box? Is this possible at all? I've been messing around with the various methods defined by the YogaNode type (getComputedBorder(), etc.), but none of them seem to work for this. I'm following the above example, which makes use of a 100ms setTimeout, but I'm not sure if this is correct here.

Any thoughts? Thanks in advance!

[dustinlacewell]

Let's merge this

[songkeys]

Can we get this merged?

[lordofthelake]

@vadimdemedes Is there anything that can be done to help merging this? It enables several useful patterns, it would be a really nice to have

[sindresorhus]

Suggested change

	* Set this property to `hidden` to hide content overflowing the box.
	* Set this property to `hidden` to hide content overflowing the box.
	*
	* @default 'visible'

[risen228]

The most needed features are always not merged..

Here we go again

[dustinlacewell]

The most needed features are always not merged..

Here we go again

If there is enough interest, we can always create a community fork of this project and manage it that way. That said, the maintainer is probably just busy but holding out hope they will have the bandwidth to continue to maintain it. I've been in that position before, it's tough.

It really does pain me this library is not more actively developed and popular. It's fricken react on the terminal! Haha I love it.

Thanks again @vadimdemedes

[vadimdemedes]

Hey folks, I'm sorry about a silence on my end.

I realize it's been a long time, but if you're still interested, I forked this PR and submitted a simpler implementation here → #502. @tin-t Thank you for working on this! I relied heavily on your PR to implement it and will give you proper credit in the release notes.