Give opportunity to hook on `keyup` event

[tpoisseau]

With only react-kbs it is not possible to setup an alternative mode as long as a key is pressed.

We have to hook directly on addEventListener, ex:

  useKbsGlobal([
    {
      shortcut: 'Shift',
      handler: () => {
        actions.setMode('select');

        function resetMode(event: KeyboardEvent) {
          if (event.key !== 'Shift') return;

          actions.setMode('rotate_selected');
          document.body.removeEventListener('keyup', resetMode);
        }

        document.body.addEventListener('keyup', resetMode);
      },
    },
  ]);

Inspired from useEffect with cleanup function returned by the handler, we could support a cleanup method returned by the shortcut handler:

  useKbsGlobal([
    {
      shortcut: 'Shift',
      handler: () => {
        actions.setMode('select');

        return () => actions.setMode('rotate_selected');
      },
    },
  ]);

Or we can add onKeyUp option:

  useKbsGlobal([
    {
      shortcut: 'Shift',
      handler: () => {
        actions.setMode('select');
      },
      onKeyUp: () => {
        actions.setMode('rotate_selected');
      },
    },
  ]);

[stropitek]

Inspired from useEffect with cleanup function returned by the handler, we could support a cleanup method returned by the shortcut handler

I like this approach more.

[tpoisseau]

@targos do you agree with this api, or you prefer a onKeyUp option ?

[targos]

SGTM if we only see it as a cleanup mechanism.

[tpoisseau]

It's how I see it.

Here is a bit more complex usage of this kind of API (workaround in another project waiting for this feature implemented here):

  useShortcut('Shift', () => {
    if (segmentationMode === 'linked') return;
    if (!roiState.selectedRoi) return;

    const previousMode = roiState.mode;
    actions.setMode('rotate_selected');

    return () => {
      actions.setMode(previousMode);
    };
  });

the cleanup method returned is used to restore the previous mode.