vadimdemedes/ink-text-input

Provide different modes of submission

takecare opened this issue · 0 comments

Some apps might want to use this component to allow users to enter multi-line text. Right now this is not easily achieved as enter is hard-coded to be the "submission key".

My question/proposal would be to add an optional prop that would define what is a submission. Something like the following:

export type Props = {
  // ...

  /**
  * Function that determines if a key press constitutes a submission (which will result in `onSubmit` being called)
  */
  readonly isSubmit?: (key: Key) => boolean;

  // ...
};

function TextInput({
  value: originalValue,
  placeholder = '',
  focus = true,
  mask,
  highlightPastedText = false,
  showCursor = true,
  onChange,
  isSubmit = key => key.return,
  onSubmit
}: Props) {

  // ...

  useInput(
    (input, key) => {
      // ...
      if (isSubmit(key) && onSubmit) {
        onSubmit(originalValue);
	return;
      }
      // ...
  );
  
  // ...
};

This would allow for apps to support multiple-line input, defining what they consider to be the submission (e.g. 3 new lines in a row), all the while being backwards compatible.

Please let me know your thoughts and I can open a PR with the changes.