@khanacademy/math-input 1.0.1 → 3.0.0

package/src/components/{touchable-keypad-button.tsx → keypad-legacy/touchable-keypad-button.tsx}

@@ -9,31 +9,46 @@ 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 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,
+    KeyConfig,
+    NonManyKeyConfig,
+} from "../../types";
+import type {State} from "./store/types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-type Props = {
-    borders: Border;
-    childKeyIds: ReadonlyArray<Key>;
-    disabled: boolean;
-    focused: boolean;
+interface SharedProps {
+    borders?: Border;
+    disabled?: boolean;
+    style?: StyleType;
+}
+
+interface OwnProps extends SharedProps {
+    keyConfig: KeyConfig;
+}
+
+interface Props extends SharedProps {
+    childKeyIds?: ReadonlyArray<string>;
     gestureManager: GestureManager;
-    id: Key;
+    id: Keys | "MANY";
+    focused: boolean;
     popoverEnabled: boolean;
-    style: StyleType;
+    childKeys?: ReadonlyArray<NonManyKeyConfig>;
+    ariaLabel?: string;
+    icon: IconConfig;
     type: KeyType;
-    icon: Icon;
-};
+}
 
 class TouchableKeypadButton extends React.Component<Props> {
-    shouldComponentUpdate(newProps) {
+    shouldComponentUpdate(newProps: Props) {
         // We take advantage of a few different properties of our key
         // configuration system. Namely, we know that the other props flow
         // directly from the ID, and thus don't need to be checked. If a key has
@@ -89,7 +104,6 @@ class TouchableKeypadButton extends React.Component<Props> {
                         id,
                         ReactDOM.findDOMNode(node),
                         childKeyIds,
-                        borders,
                     )
                 }
                 borders={borders}
@@ -102,23 +116,28 @@ class TouchableKeypadButton extends React.Component<Props> {
     }
 }
 
-const extractProps = (keyConfig) => {
+const extractProps = (keyConfig: NonManyKeyConfig) => {
     const {ariaLabel, icon, type} = keyConfig;
     return {ariaLabel, icon, type};
 };
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state: State, ownProps: OwnProps): Props => {
     const {gestures} = state;
 
     const {keyConfig, ...rest} = ownProps;
-    const {id, childKeyIds, type} = keyConfig;
+    const {id, type} = keyConfig;
+
+    const childKeyIds =
+        "childKeyIds" in keyConfig ? keyConfig.childKeyIds : undefined;
 
-    const childKeys = childKeyIds && childKeyIds.map((id) => KeyConfigs[id]);
+    const childKeys = childKeyIds
+        ? childKeyIds.map((id) => KeyConfigs[id])
+        : undefined;
 
     // 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,
@@ -128,7 +147,7 @@ const mapStateToProps = (state, ownProps) => {
 
         // Add in some gesture state.
         focused: gestures.focus === id,
-        popoverEnabled: gestures.popover && gestures.popover.parentId === id,
+        popoverEnabled: gestures.popover?.parentId === id,
 
         // Pass down the child keys and any extracted props.
         childKeys,

package/src/components/{two-page-keypad.tsx → keypad-legacy/two-page-keypad.tsx}

@@ -6,19 +6,19 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {View} from "../fake-react-native-web/index";
-
+import {View} from "../../fake-react-native-web/index";
 import {
     innerBorderColor,
     innerBorderStyle,
     innerBorderWidthPx,
     offBlack16,
-} from "./common-style";
+} from "../common-style";
+import Tabbar from "../tabbar/tabbar";
+
 import Keypad from "./keypad";
 import Styles from "./styles";
-import Tabbar from "./tabbar/tabbar";
 
-import type {State} from "../store/types";
+import type {State} from "./store/types";
 
 const {column, row, fullWidth} = Styles;
 
@@ -27,7 +27,6 @@ interface ReduxProps {
 }
 
 interface Props extends ReduxProps {
-    currentPage: number;
     leftPage: React.ReactNode;
     rightPage: React.ReactNode;
 }

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";
@@ -14,262 +14,257 @@ export type KeyConfig = {
     ariaLabel: string;
 };
 
-const KeyConfigs: any = {
+// I tried to make the below {[key in Keys]: KeyConfig}
+// but we are doing all kinds of sneaky magic that makes it hard to
+// type this safely. Leaving it for now as a generic index signature.
+const KeyConfigs: {[key: string]: 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"),
     },
-};
 
-// Add in any multi-function buttons. By default, these keys will mix in any
-// configuration settings from their default child key (i.e., the first key in
-// the `childKeyIds` array).
-// TODO(charlie): Make the multi-function button's long-press interaction
-// accessible.
-// NOTE(kevinb): This is only used in the mobile native app.
-KeyConfigs[Keys.FRAC_MULTI] = {
-    childKeyIds: [Keys.FRAC_INCLUSIVE, Keys.FRAC_EXCLUSIVE],
-};
+    // TODO(charlie): Use the numeral color for the 'Many' key.
+    // MANY: {
+    //     type: KeyType.MANY,
+    //     // childKeyIds will be configured by the client.
+    // },
 
-// TODO(charlie): Use the numeral color for the 'Many' key.
-KeyConfigs[Keys.MANY] = {
-    type: KeyTypes.MANY,
-    // childKeyIds will be configured by the client.
+    [Keys.PERIOD]: {},
 };
 
 // Add in every numeral.
@@ -280,10 +275,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 +319,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 +334,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],