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

Add focus management #295

Merged
merged 1 commit into from
Jun 13, 2020
Merged

Add focus management #295

merged 1 commit into from
Jun 13, 2020

Conversation

vadimdemedes
Copy link
Owner

This PR adds a simple focus management mechanism to Ink. It's based on @jdeniau's work in #262 and Focus Management RFC in React.

You can check out the documentation for changes made here in https://github.com/vadimdemedes/ink/tree/focus#usefocusoptions, but the gist is that components can call useFocus() hook to notify Ink that they can be focused and when user presses Tab, Ink is going to move focus between focusable components.

import {useFocus} from 'ink';

const FocusableComponent = () => {
  const {isFocused} = useFocus();
  // `isFocused` will equal `true` after user presses Tab and this component receives focus

  return <Text>{isFocused ? 'I am focused' : 'I am not focused'}</Text>;
};

@vadimdemedes
Copy link
Owner Author

@jdeniau @taras Let me know what you think!

Copy link
Contributor

@jdeniau jdeniau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me.

focusNext: this.focusNext,
focusPrevious: this.focusPrevious
}}
>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally, I'd move this context provider and all the following methods into a separate file because this file becomes more complicated with those 200 supplementary lines. (ie. someone that want to improve ink might be lost in those lines whereas he does not need to understand focus management)

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree and this is what I wanted to do initially, but decided to leave it in App.tsx for now to reuse the data event handler on stdin stream, instead of having two separate ones. I think a better move here is to rewrite this file using hooks and extract individual functionality (focus management, exiting, raw mode) into hooks, which will clean this whole thing up.

@vadimdemedes vadimdemedes merged commit 706fdb2 into master Jun 13, 2020
@vadimdemedes vadimdemedes deleted the focus branch June 13, 2020 13:56
@vadimdemedes vadimdemedes restored the focus branch June 13, 2020 13:56
@vadimdemedes vadimdemedes deleted the focus branch June 13, 2020 13:56
@vadimdemedes vadimdemedes mentioned this pull request Jun 13, 2020
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.

2 participants