KeypadAPI: use it in more spots (#627)

* type things better * changeset
Khan · Jul 25, 2023 · 04e68d1 · 04e68d1
1 parent acafa72
commit 04e68d1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/.changeset/little-kids-know.md b/.changeset/little-kids-know.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": major
+---
+
+Change keypadElement from LegacyKeypad to KeypadAPI
diff --git a/packages/math-input/src/components/input/math-input.tsx b/packages/math-input/src/components/input/math-input.tsx
@@ -12,19 +12,18 @@ import {
     wonderBlocksBlue,
     offBlack,
 } from "../common-style";
-import LegacyKeypad from "../keypad-legacy";
 
 import CursorHandle from "./cursor-handle";
 import DragListener from "./drag-listener";
 import MathWrapper from "./math-wrapper";
 import {scrollIntoView} from "./scroll-into-view";
 
-import type {Cursor} from "../../types";
+import type {Cursor, KeypadAPI} from "../../types";
 
 const constrainingFrictionFactor = 0.8;
 
 type Props = {
-    keypadElement: LegacyKeypad;
+    keypadElement?: KeypadAPI;
     onBlur: () => void;
     onChange: (value: string, callback: any) => void;
     onFocus: () => void;
@@ -267,7 +266,7 @@ class MathInput extends React.Component<Props, State> {
     /** Gets and cache they bounds of the keypadElement */
     _getKeypadBounds: () => any = () => {
         if (!this._keypadBounds) {
-            const node = this.props.keypadElement.getDOMNode();
+            const node = this.props.keypadElement?.getDOMNode();
             this._cacheKeypadBounds(node);
         }
         return this._keypadBounds;
@@ -341,7 +340,7 @@ class MathInput extends React.Component<Props, State> {
     focus: () => void = () => {
         // Pass this component's handleKey method to the keypad so it can call
         // it whenever it needs to trigger a keypress action.
-        this.props.keypadElement.setKeyHandler((key) => {
+        this.props.keypadElement?.setKeyHandler((key) => {
             const cursor = this.mathField.pressKey(key);
 
             // Trigger an `onChange` if the value in the input changed, and hide

diff --git a/packages/math-input/src/full-math-input.stories.tsx b/packages/math-input/src/full-math-input.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import MobileKeypad from "./components/keypad/mobile-keypad";
+import {KeypadAPI} from "./types";
 
 import {KeypadInput, KeypadType, LegacyKeypad} from "./index";
 
@@ -11,19 +12,22 @@ export default {
 export const Basic = () => {
     const [value, setValue] = React.useState("");
     // Reference to the keypad
-    const [keypadElement, setKeypadElement] = React.useState<any>(null);
+    const [keypadElement, setKeypadElement] = React.useState<KeypadAPI>();
     // Whether to use Expression or Fraction keypad
     const [expression, setExpression] = React.useState<boolean>(true);
     // Whether to use v1 or v2 keypad
     const [legacyKeypad, setLegacyKeypad] = React.useState<boolean>(false);
 
     React.useEffect(() => {
-        keypadElement?.configure({
-            keypadType: expression
-                ? KeypadType.EXPRESSION
-                : KeypadType.FRACTION,
-            extraKeys: expression ? ["x", "y", "PI", "THETA"] : [],
-        });
+        keypadElement?.configure(
+            {
+                keypadType: expression
+                    ? KeypadType.EXPRESSION
+                    : KeypadType.FRACTION,
+                extraKeys: expression ? ["x", "y", "PI", "THETA"] : [],
+            },
+            () => {},
+        );
     }, [keypadElement, expression]);
 
     return (