Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix border re-rendering #345

Merged
merged 1 commit into from
Jul 31, 2020
Merged

Fix border re-rendering #345

merged 1 commit into from
Jul 31, 2020

Conversation

vadimdemedes
Copy link
Owner

Fixes #340.

In the following scenario, border wouldn't be rendered after the update happens:

const Test = () => {
	const [borderColor, setBorderColor] = useState();

	useEffect(() => {
		setBorderColor('green');
	}, []);

	return (
		<Box borderStyle="round" borderColor={borderColor}>
			<Text>Hello World</Text>
		</Box>
	);
};

It was happening because Ink's reconciler passes down only props that were changed during an update (https://github.com/vadimdemedes/ink/blob/master/src/reconciler.ts#L160) and in this case, borderStyle remained unchanged so it was missing when Ink drew a layout. If Ink doesn't see borderStyle, it's not going to render the border - https://github.com/vadimdemedes/ink/blob/master/src/render-border.ts#L7.

To fix it, I modified reconciler's prepareUpdate function to always include borderStyle and borderColor if at least one of them is present. Now if borderStyle stays unchanged, but borderColor changes, both props will be included in the update.

@vadimdemedes vadimdemedes merged commit 7077188 into master Jul 31, 2020
@vadimdemedes vadimdemedes deleted the fix-border-rerendering branch July 31, 2020 20:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Border color not applying with nested ternary
1 participant