@khanacademy/math-input 1.0.0 → 2.0.0

package/src/components/navigation-pad.tsx

@@ -6,8 +6,8 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {BorderStyles} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import {BorderStyles} from "../enums";
 import {View} from "../fake-react-native-web/index";
 
 import {

package/src/components/node-manager.ts

@@ -1,4 +1,4 @@
-import type {Border} from "../types";
+import type {Border, LayoutProps} from "../types";
 /**
  * A manager for our node-to-ID system. In particular, this class is
  * responsible for maintaing a mapping between DOM nodes and node IDs, and
@@ -122,7 +122,7 @@ class NodeManager {
      * @returns {object} - the bounding client rect for the given node, along
      *                     with its borders
      */
-    layoutPropsForId(id: string): {initialBounds: DOMRect; borders: Border} {
+    layoutPropsForId(id: string): LayoutProps {
         if (!this._cachedBoundingBoxesById[id]) {
             const node = this._nodesById[id];
 

package/src/components/popover-state-machine.ts

@@ -1,3 +1,5 @@
+import type {ActiveNodesObj} from "../types";
+
 /**
  * A state machine for the popover state. In particular, this class manages the
  * mapping of parent nodes to their children, and translates touch events that
@@ -5,16 +7,6 @@
  * is present.
  */
 
-type ActiveNodesObjPopover = {
-    parentId: string;
-    childIds: ReadonlyArray<string>;
-};
-
-type ActiveNodesObj = {
-    popover: ActiveNodesObjPopover | null;
-    focus: string | null;
-};
-
 type Handlers = {
     onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
     onClick: (keyId: string, domNodeId: string, inPopover: boolean) => void;

package/src/components/provided-keypad.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unsafe */
 import * as React from "react";
 import ReactDOM from "react-dom";
 import {Provider} from "react-redux";
@@ -9,7 +8,7 @@ import {
     configureKeypad,
     setCursor,
     setKeyHandler,
-} from "../actions/index";
+} from "../store/actions";
 import {createStore} from "../store/index";
 
 import KeypadContainer from "./keypad-container";
@@ -24,21 +23,13 @@ type Props = {
 };
 
 class ProvidedKeypad extends React.Component<Props> {
-    mounted?: boolean;
     store: any;
 
-    UNSAFE_componentWillMount() {
+    constructor(props) {
+        super(props);
         this.store = createStore();
     }
 
-    componentDidMount() {
-        this.mounted = true;
-    }
-
-    componentWillUnmount() {
-        this.mounted = false;
-    }
-
     activate: () => void = () => {
         this.store.dispatch(activateKeypad());
     };

package/src/components/touchable-keypad-button.tsx

@@ -9,27 +9,27 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
-import {KeyType, KeyTypes} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import Keys from "../data/keys";
+import {KeyType} from "../enums";
 
 import GestureManager from "./gesture-manager";
 import KeypadButton from "./keypad-button";
 
-import type {Key} from "../data/keys";
-import type {Border, Icon} from "../types";
+import type {Border, IconConfig} from "../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type Props = {
     borders: Border;
-    childKeyIds: ReadonlyArray<Key>;
+    childKeyIds: ReadonlyArray<Keys>;
     disabled: boolean;
     focused: boolean;
     gestureManager: GestureManager;
-    id: Key;
+    id: Keys;
     popoverEnabled: boolean;
     style: StyleType;
     type: KeyType;
-    icon: Icon;
+    icon: IconConfig;
 };
 
 class TouchableKeypadButton extends React.Component<Props> {
@@ -118,7 +118,7 @@ const mapStateToProps = (state, ownProps) => {
     // Override with the default child props, if the key is a multi-symbol key
     // (but not a many-symbol key, which operates under different rules).
     const useFirstChildProps =
-        type !== KeyTypes.MANY && childKeys && childKeys.length > 0;
+        type !== KeyType.MANY && childKeys && childKeys.length > 0;
 
     return {
         ...rest,

package/src/data/key-configs.ts

@@ -3,7 +3,7 @@
  */
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 
-import {DecimalSeparators, IconTypes, KeyTypes} from "../consts";
+import {DecimalSeparator, IconType, KeyType} from "../enums";
 import {decimalSeparator} from "../utils";
 
 import Keys from "./keys";
@@ -17,240 +17,240 @@ export type KeyConfig = {
 const KeyConfigs: any = {
     // Basic math keys.
     [Keys.PLUS]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a plus sign.
         ariaLabel: i18n._("Plus"),
     },
     [Keys.MINUS]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a minus sign.
         ariaLabel: i18n._("Minus"),
     },
     [Keys.NEGATIVE]: {
-        type: KeyTypes.VALUE,
+        type: KeyType.VALUE,
         // I18N: A label for a minus sign.
         ariaLabel: i18n._("Negative"),
     },
     [Keys.TIMES]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a multiplication sign (represented with an 'x').
         ariaLabel: i18n._("Multiply"),
     },
     [Keys.DIVIDE]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a division sign.
         ariaLabel: i18n._("Divide"),
     },
     [Keys.DECIMAL]: {
-        type: KeyTypes.VALUE,
+        type: KeyType.VALUE,
         // I18N: A label for a decimal symbol.
         ariaLabel: i18n._("Decimal"),
         icon:
-            decimalSeparator === DecimalSeparators.COMMA
+            decimalSeparator === DecimalSeparator.COMMA
                 ? {
                       // TODO(charlie): Get an SVG icon for the comma, or verify with
                       // design that the text-rendered version is acceptable.
-                      type: IconTypes.TEXT,
+                      type: IconType.TEXT,
                       data: ",",
                   }
                 : {
-                      type: IconTypes.SVG,
+                      type: IconType.SVG,
                       data: Keys.PERIOD,
                   },
     },
     [Keys.PERCENT]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a percent sign.
         ariaLabel: i18n._("Percent"),
     },
     [Keys.CDOT]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a multiplication sign (represented as a dot).
         ariaLabel: i18n._("Multiply"),
     },
     [Keys.EQUAL]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Equals sign"),
     },
     [Keys.NEQ]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Not-equals sign"),
     },
     [Keys.GT]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a 'greater than' sign (represented as '>').
         ariaLabel: i18n._("Greater than sign"),
     },
     [Keys.LT]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a 'less than' sign (represented as '<').
         ariaLabel: i18n._("Less than sign"),
     },
     [Keys.GEQ]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Greater than or equal to sign"),
     },
     [Keys.LEQ]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Less than or equal to sign"),
     },
     // mobile native
     [Keys.FRAC_INCLUSIVE]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a button that creates a new fraction and puts the
         // current expression in the numerator of that fraction.
         ariaLabel: i18n._("Fraction, with current expression in numerator"),
     },
     // mobile native
     [Keys.FRAC_EXCLUSIVE]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a button that creates a new fraction next to the
         // cursor.
         ariaLabel: i18n._("Fraction, excluding the current expression"),
     },
     // mobile web
     [Keys.FRAC]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a button that creates a new fraction next to the
         // cursor.
         ariaLabel: i18n._("Fraction, excluding the current expression"),
     },
     [Keys.EXP]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a button that will allow the user to input a custom
         // exponent.
         ariaLabel: i18n._("Custom exponent"),
     },
     [Keys.EXP_2]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a button that will square (take to the second
         // power) some math.
         ariaLabel: i18n._("Square"),
     },
     [Keys.EXP_3]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         // I18N: A label for a button that will cube (take to the third power)
         // some math.
         ariaLabel: i18n._("Cube"),
     },
     [Keys.SQRT]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Square root"),
     },
     [Keys.CUBE_ROOT]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Cube root"),
     },
     [Keys.RADICAL]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Radical with custom root"),
     },
     [Keys.LEFT_PAREN]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Left parenthesis"),
     },
     [Keys.RIGHT_PAREN]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Right parenthesis"),
     },
     [Keys.LN]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Natural logarithm"),
     },
     [Keys.LOG]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Logarithm with base 10"),
     },
     [Keys.LOG_N]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Logarithm with custom base"),
     },
     [Keys.SIN]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Sine"),
     },
     [Keys.COS]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Cosine"),
     },
     [Keys.TAN]: {
-        type: KeyTypes.OPERATOR,
+        type: KeyType.OPERATOR,
         ariaLabel: i18n._("Tangent"),
     },
     [Keys.PI]: {
-        type: KeyTypes.VALUE,
+        type: KeyType.VALUE,
         ariaLabel: i18n._("Pi"),
         icon: {
-            type: IconTypes.MATH,
+            type: IconType.MATH,
             data: "\\pi",
         },
     },
     [Keys.THETA]: {
-        type: KeyTypes.VALUE,
+        type: KeyType.VALUE,
         ariaLabel: i18n._("Theta"),
         icon: {
-            type: IconTypes.MATH,
+            type: IconType.MATH,
             data: "\\theta",
         },
     },
     [Keys.NOOP]: {
-        type: KeyTypes.EMPTY,
+        type: KeyType.EMPTY,
     },
 
     // Input navigation keys.
     [Keys.UP]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         ariaLabel: i18n._("Up arrow"),
     },
     [Keys.RIGHT]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         ariaLabel: i18n._("Right arrow"),
     },
     [Keys.DOWN]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         ariaLabel: i18n._("Down arrow"),
     },
     [Keys.LEFT]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         ariaLabel: i18n._("Left arrow"),
     },
     [Keys.JUMP_OUT_PARENTHESES]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         ariaLabel: i18n._("Navigate right out of a set of parentheses"),
     },
     [Keys.JUMP_OUT_EXPONENT]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         ariaLabel: i18n._("Navigate right out of an exponent"),
     },
     [Keys.JUMP_OUT_BASE]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         ariaLabel: i18n._("Navigate right out of a base"),
     },
     [Keys.JUMP_INTO_NUMERATOR]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         ariaLabel: i18n._("Navigate right into the numerator of a fraction"),
     },
     [Keys.JUMP_OUT_NUMERATOR]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         ariaLabel: i18n._(
             "Navigate right out of the numerator and into the denominator",
         ),
     },
     [Keys.JUMP_OUT_DENOMINATOR]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         ariaLabel: i18n._(
             "Navigate right out of the denominator of a fraction",
         ),
     },
     [Keys.BACKSPACE]: {
-        type: KeyTypes.INPUT_NAVIGATION,
+        type: KeyType.INPUT_NAVIGATION,
         // I18N: A label for a button that will delete some input.
         ariaLabel: i18n._("Delete"),
     },
 
     // Keypad navigation keys.
     [Keys.DISMISS]: {
-        type: KeyTypes.KEYPAD_NAVIGATION,
+        type: KeyType.KEYPAD_NAVIGATION,
         // I18N: A label for a button that will dismiss/hide a keypad.
         ariaLabel: i18n._("Dismiss"),
     },
@@ -268,7 +268,7 @@ KeyConfigs[Keys.FRAC_MULTI] = {
 
 // TODO(charlie): Use the numeral color for the 'Many' key.
 KeyConfigs[Keys.MANY] = {
-    type: KeyTypes.MANY,
+    type: KeyType.MANY,
     // childKeyIds will be configured by the client.
 };
 
@@ -280,10 +280,10 @@ for (const num of NUMBERS) {
     // would mean that we'd be using text beyond the variable key).
     const textRepresentation = `${num}`;
     KeyConfigs[`NUM_${num}`] = {
-        type: KeyTypes.VALUE,
+        type: KeyType.VALUE,
         ariaLabel: textRepresentation,
         icon: {
-            type: IconTypes.TEXT,
+            type: IconType.TEXT,
             data: textRepresentation,
         },
     };
@@ -324,10 +324,10 @@ for (const letter of LETTERS) {
 
     for (const textRepresentation of [lowerCaseVariable, upperCaseVariable]) {
         KeyConfigs[textRepresentation] = {
-            type: KeyTypes.VALUE,
+            type: KeyType.VALUE,
             ariaLabel: textRepresentation,
             icon: {
-                type: IconTypes.MATH,
+                type: IconType.MATH,
                 data: textRepresentation,
             },
         };
@@ -339,7 +339,7 @@ for (const key of Object.keys(KeyConfigs)) {
         id: key,
         // Default to an SVG icon indexed by the key name.
         icon: {
-            type: IconTypes.SVG,
+            type: IconType.SVG,
             data: key,
         },
         ...KeyConfigs[key],

package/src/data/keys.ts

@@ -3,122 +3,70 @@
  * alphanumeric characters.
  */
 
-export type Key =
-    | "PLUS"
-    | "MINUS"
-    | "NEGATIVE"
-    | "TIMES"
-    | "DIVIDE"
-    | "DECIMAL"
-    | "PERIOD"
-    | "PERCENT"
-    | "CDOT"
-    | "EQUAL"
-    | "NEQ"
-    | "GT"
-    | "LT"
-    | "GEQ"
-    | "LEQ" // mobile native only
-    | "FRAC_INCLUSIVE" // mobile native only
-    | "FRAC_EXCLUSIVE"
-    | "FRAC"
-    | "EXP"
-    | "EXP_2"
-    | "EXP_3"
-    | "SQRT"
-    | "CUBE_ROOT"
-    | "RADICAL"
-    | "LEFT_PAREN"
-    | "RIGHT_PAREN"
-    | "LN"
-    | "LOG"
-    | "LOG_N"
-    | "SIN"
-    | "COS" // TODO(charlie): Add in additional Greek letters.
-    | "TAN"
-    | "PI"
-    | "THETA"
-    | "UP"
-    | "RIGHT"
-    | "DOWN"
-    | "LEFT"
-    | "BACKSPACE"
-    | "DISMISS"
-    | "JUMP_OUT_PARENTHESES"
-    | "JUMP_OUT_EXPONENT"
-    | "JUMP_OUT_BASE"
-    | "JUMP_INTO_NUMERATOR"
-    | "JUMP_OUT_NUMERATOR"
-    | "JUMP_OUT_DENOMINATOR" // Multi-functional keys.
-    | "NOOP" // mobile native only
-    // A custom key that captures an arbitrary number of symbols but has no
-    // 'default' symbol or action.
-    | "FRAC_MULTI"
-    | "MANY";
-
 // TODO(charlie): There's duplication between this file and key-configs.js.
 // We should clean it up by removing this file and requiring clients to use the
 // `id` field on the key configurations.
-const Keys = {
-    PLUS: "PLUS",
-    MINUS: "MINUS",
-    NEGATIVE: "NEGATIVE",
-    TIMES: "TIMES",
-    DIVIDE: "DIVIDE",
-    DECIMAL: "DECIMAL",
-    PERIOD: "PERIOD",
-    PERCENT: "PERCENT",
-    CDOT: "CDOT",
-    EQUAL: "EQUAL",
-    NEQ: "NEQ",
-    GT: "GT",
-    LT: "LT",
-    GEQ: "GEQ",
-    LEQ: "LEQ",
-    FRAC_INCLUSIVE: "FRAC_INCLUSIVE", // mobile native only
-    FRAC_EXCLUSIVE: "FRAC_EXCLUSIVE", // mobile native only
-    FRAC: "FRAC",
-    EXP: "EXP",
-    EXP_2: "EXP_2",
-    EXP_3: "EXP_3",
-    SQRT: "SQRT",
-    CUBE_ROOT: "CUBE_ROOT",
-    RADICAL: "RADICAL",
-    LEFT_PAREN: "LEFT_PAREN",
-    RIGHT_PAREN: "RIGHT_PAREN",
-    LN: "LN",
-    LOG: "LOG",
-    LOG_N: "LOG_N",
-    SIN: "SIN",
-    COS: "COS",
-    TAN: "TAN",
+enum Keys {
+    PLUS = "PLUS",
+    MINUS = "MINUS",
+    NEGATIVE = "NEGATIVE",
+    TIMES = "TIMES",
+    DIVIDE = "DIVIDE",
+    DECIMAL = "DECIMAL",
+    PERIOD = "PERIOD",
+    PERCENT = "PERCENT",
+    CDOT = "CDOT",
+    EQUAL = "EQUAL",
+    NEQ = "NEQ",
+    GT = "GT",
+    LT = "LT",
+    GEQ = "GEQ",
+    LEQ = "LEQ", // mobile native only
+    FRAC_INCLUSIVE = "FRAC_INCLUSIVE", // mobile native only
+    FRAC_EXCLUSIVE = "FRAC_EXCLUSIVE", // mobile native only
+    FRAC = "FRAC",
+    EXP = "EXP",
+    EXP_2 = "EXP_2",
+    EXP_3 = "EXP_3",
+    SQRT = "SQRT",
+    CUBE_ROOT = "CUBE_ROOT",
+    RADICAL = "RADICAL",
+    LEFT_PAREN = "LEFT_PAREN",
+    RIGHT_PAREN = "RIGHT_PAREN",
+    LN = "LN",
+    LOG = "LOG",
+    LOG_N = "LOG_N",
+    SIN = "SIN",
+    COS = "COS", // TODO(charlie): Add in additional Greek letters.
+    TAN = "TAN",
 
-    // TODO(charlie): Add in additional Greek letters.
-    PI: "PI",
-    THETA: "THETA",
+    PI = "PI",
+    THETA = "THETA",
 
-    UP: "UP",
-    RIGHT: "RIGHT",
-    DOWN: "DOWN",
-    LEFT: "LEFT",
-    BACKSPACE: "BACKSPACE",
-    DISMISS: "DISMISS",
+    UP = "UP",
+    RIGHT = "RIGHT",
+    DOWN = "DOWN",
+    LEFT = "LEFT",
+    BACKSPACE = "BACKSPACE",
+    DISMISS = "DISMISS",
 
-    JUMP_OUT_PARENTHESES: "JUMP_OUT_PARENTHESES",
-    JUMP_OUT_EXPONENT: "JUMP_OUT_EXPONENT",
-    JUMP_OUT_BASE: "JUMP_OUT_BASE",
-    JUMP_INTO_NUMERATOR: "JUMP_INTO_NUMERATOR",
-    JUMP_OUT_NUMERATOR: "JUMP_OUT_NUMERATOR",
-    JUMP_OUT_DENOMINATOR: "JUMP_OUT_DENOMINATOR",
+    JUMP_OUT_PARENTHESES = "JUMP_OUT_PARENTHESES",
+    JUMP_OUT_EXPONENT = "JUMP_OUT_EXPONENT",
+    JUMP_OUT_BASE = "JUMP_OUT_BASE",
+    JUMP_INTO_NUMERATOR = "JUMP_INTO_NUMERATOR",
+    JUMP_OUT_NUMERATOR = "JUMP_OUT_NUMERATOR",
+    JUMP_OUT_DENOMINATOR = "JUMP_OUT_DENOMINATOR", // Multi-functional keys.
 
-    NOOP: "NOOP",
+    NOOP = "NOOP", // mobile native only
 
     // Multi-functional keys.
-    FRAC_MULTI: "FRAC_MULTI", // mobile native only
+    // A custom key that captures an arbitrary number of symbols but has no
+    // 'default' symbol or action.
+    FRAC_MULTI = "FRAC_MULTI", // mobile native only
 
     // A custom key that captures an arbitrary number of symbols but has no
     // 'default' symbol or action.
-    MANY: "MANY",
-} as const;
+    MANY = "MANY",
+}
 
 export default Keys;