Separate key chars from buttons
Description
The InputButtons
component currently relies on a tight coupling of UI info (characters) and business logic (tokens). An improvement would be to separate these and create a new component Keyboard
, which only deals with UI info (characters). Then any parent of Keyboard
is responsible for lexing/tokenizing the characters emitted from it.
Design
Stealing from physical keyboard design, start with a base unit (measures relative size between keys) and a number of rows and columns. Then, a grid of 1 base unit by 1 base unit cells can be created. Each key can then be allowed to specify how many "units" it covers and a directionality for growth ("row" or "column"); defaults can be set for each of these. The keys can be provided by a prop to the component allowing layout to be specified by the parent not Keyboard
itself! For communication between parent and Keyboard
, all HTML key events (keyup, keydown, etc.) should be emitted allowing parent flexibility in key listening.