[NumericInput] ❤️ (#3204)

* ref type | null

* remove <T> on react events

optional type!!

* Keys.isKeyboardClick

it's like a method on a java enum!

* total render refactor

- FIX: css class is applied when buttons=none
- renderButtons() and renderInput()
- conditionals to place buttons before or after input
- remove special-casing for buttons=none

* generate button event handlers, fix key holding

one little function to cache handler objects.
fix holding enter/space to continuously change value.

* onKeyUp handler is obsolete

Button handles enter/space click logic.
onKeyDown is actually enough - quite elegant.

* remove isButtonGroupFocused state

set but never read

* move shouldSelectAfterUpdate to state so it triggers updates

for the selection logic in cmpDidUpdate

* required state, missed a <T>

* update and refactor tests

not much needed here

* pull pure methods out to utils file

* fix tabs usage

* little things: public state, {value}

* orgainze

* missed a reset

packages/core/src/common/keys.ts

@@ -15,3 +15,8 @@ export const ARROW_UP = 38;
 export const ARROW_RIGHT = 39;
 export const ARROW_DOWN = 40;
 export const DELETE = 46;
+
+/** Returns whether the key code is `enter` or `space`, the two keys that can click a button. */
+export function isKeyboardClick(keyCode: number) {
+    return keyCode === ENTER || keyCode === SPACE;
+}

packages/core/src/components/button/abstractButton.tsx

@@ -125,7 +125,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
     // argument because it is not a supertype of candidate
     // 'KeyboardEvent<HTMLElement>'."
     protected handleKeyDown = (e: React.KeyboardEvent<any>) => {
-        if (isKeyboardClick(e.which)) {
+        if (Keys.isKeyboardClick(e.which)) {
             e.preventDefault();
             if (e.which !== this.currentKeyDown) {
                 this.setState({ isActive: true });
@@ -136,7 +136,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
     };
 
     protected handleKeyUp = (e: React.KeyboardEvent<any>) => {
-        if (isKeyboardClick(e.which)) {
+        if (Keys.isKeyboardClick(e.which)) {
             this.setState({ isActive: false });
             this.buttonRef.click();
         }
@@ -159,7 +159,3 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
         ];
     }
 }
-
-function isKeyboardClick(keyCode: number) {
-    return keyCode === Keys.ENTER || keyCode === Keys.SPACE;
-}