@khanacademy/math-input 1.0.1 → 2.0.0

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;

package/src/enums.ts

@@ -0,0 +1,74 @@
+/**
+ * Constants that are shared between multiple files.
+ */
+
+export enum KeypadType {
+    FRACTION = "FRACTION",
+    EXPRESSION = "EXPRESSION",
+}
+
+export enum KeyType {
+    EMPTY = "EMPTY",
+    // For numerals, variables, and any other characters that themselves
+    // compose 'values'.
+    VALUE = "VALUE",
+    // For buttons that insert or adjust math in an input.
+    OPERATOR = "OPERATOR",
+    // For buttons that move the cursor in an input (including via
+    // deletion).
+    INPUT_NAVIGATION = "INPUT_NAVIGATION",
+    // For buttons that modify the broader keypad state (e.g., by changing
+    // the visible pane).
+    KEYPAD_NAVIGATION = "KEYPAD_NAVIGATION",
+    // For buttons that house multiple buttons and have no action
+    // themselves.
+    MANY = "MANY",
+    // For the echo animation that appears on press.
+    ECHO = "ECHO",
+}
+
+export enum DeviceOrientation {
+    LANDSCAPE = "LANDSCAPE",
+    PORTRAIT = "PORTRAIT",
+}
+
+export enum DeviceType {
+    PHONE = "PHONE",
+    TABLET = "TABLET",
+}
+
+export enum LayoutMode {
+    FULLSCREEN = "FULLSCREEN",
+    COMPACT = "COMPACT",
+}
+
+export enum BorderDirection {
+    LEFT = "LEFT",
+    BOTTOM = "BOTTOM",
+}
+
+export const BorderStyles: {
+    [style: string]: ReadonlyArray<BorderDirection>;
+} = {
+    LEFT: [BorderDirection.LEFT],
+    BOTTOM: [BorderDirection.BOTTOM],
+    ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
+    NONE: [],
+};
+
+export enum IconType {
+    MATH = "MATH",
+    SVG = "SVG",
+    TEXT = "TEXT",
+}
+
+export enum DecimalSeparator {
+    COMMA = "COMMA",
+    PERIOD = "PERIOD",
+}
+
+export enum EchoAnimationType {
+    SLIDE_AND_FADE = "SLIDE_AND_FADE",
+    FADE_ONLY = "FADE_ONLY",
+    LONG_FADE_ONLY = "LONG_FADE_ONLY",
+}

package/src/index.ts

@@ -4,16 +4,10 @@
 
 import "../less/main.less";
 
+export {CursorContext} from "./components/input/cursor-contexts";
 export {default as KeypadInput} from "./components/input/math-input";
 export {keypadElementPropType} from "./components/prop-types";
 export {default as Keypad} from "./components/provided-keypad";
-export {KeypadTypes} from "./consts";
 export {default as KeyConfigs} from "./data/key-configs";
-
-import * as CursorContexts from "./components/input/cursor-contexts";
-
-export {CursorContexts};
-
-export type {KeypadType, KeyType} from "./consts";
-export type {Key} from "./data/keys";
-export type {CursorContext} from "./components/input/cursor-contexts";
+export {default as Keys} from "./data/keys";
+export {KeyType, KeypadType} from "./enums";

package/src/math-input.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import {Keypad, KeypadInput, KeypadTypes} from "./index";
+import {Keypad, KeypadInput, KeypadType} from "./index";
 
 export default {
     title: "Full MathInput",
@@ -9,9 +9,9 @@ export default {
 export const Basic = () => {
     const [value, setValue] = React.useState("");
     const [keypadElement, setKeypadElement] = React.useState<any>(null);
-    const [keypadType, setKeypadType] = React.useState<
-        keyof typeof KeypadTypes
-    >(KeypadTypes.FRACTION);
+    const [keypadType, setKeypadType] = React.useState<KeypadType>(
+        KeypadType.FRACTION,
+    );
 
     React.useEffect(() => {
         keypadElement?.configure({
@@ -22,9 +22,9 @@ export const Basic = () => {
 
     function handleChangeKeypadType() {
         setKeypadType(
-            keypadType === KeypadTypes.FRACTION
-                ? KeypadTypes.EXPRESSION
-                : KeypadTypes.FRACTION,
+            keypadType === KeypadType.FRACTION
+                ? KeypadType.EXPRESSION
+                : KeypadType.FRACTION,
         );
     }
 
@@ -33,7 +33,7 @@ export const Basic = () => {
             <div style={{padding: "1rem 0"}}>
                 <button onClick={handleChangeKeypadType}>
                     {`Use ${
-                        keypadType === KeypadTypes.FRACTION
+                        keypadType === KeypadType.FRACTION
                             ? "Expression"
                             : "Fraction"
                     } Keypad`}

package/src/store/actions.ts

@@ -1,4 +1,5 @@
-import type {Key} from "../data/keys";
+import Keys from "../data/keys";
+
 import type {
     KeypadConfiguration,
     KeyHandler,
@@ -143,14 +144,14 @@ export const setActiveNodes = (
 
 type PressKeyAction = {
     type: "PressKey";
-    key: Key;
+    key: Keys;
     borders: Border;
     initialBounds: DOMRect;
     inPopover: boolean;
 };
 
 export const pressKey = (
-    key: Key,
+    key: Keys,
     borders: Border,
     initialBounds: DOMRect,
     inPopover: any,

package/src/store/echo-reducer.ts

@@ -1,5 +1,5 @@
-import {EchoAnimationTypes, KeyTypes} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import {EchoAnimationType, KeyType} from "../enums";
 
 import type {Action} from "./actions";
 import type {EchoState} from "./types";
@@ -23,8 +23,8 @@ const echoReducer = function (
             // Add in the echo animation if the user performs a math
             // operation.
             if (
-                keyConfig.type === KeyTypes.VALUE ||
-                keyConfig.type === KeyTypes.OPERATOR
+                keyConfig.type === KeyType.VALUE ||
+                keyConfig.type === KeyType.OPERATOR
             ) {
                 return {
                     ...state,
@@ -33,8 +33,8 @@ const echoReducer = function (
                         {
                             animationId: "" + _lastAnimationId++,
                             animationType: action.inPopover
-                                ? EchoAnimationTypes.LONG_FADE_ONLY
-                                : EchoAnimationTypes.FADE_ONLY,
+                                ? EchoAnimationType.LONG_FADE_ONLY
+                                : EchoAnimationType.FADE_ONLY,
                             borders: action.borders,
                             id: keyConfig.id,
                             initialBounds: action.initialBounds,

package/src/store/index.ts

@@ -11,7 +11,6 @@ import layoutReducer from "./layout-reducer";
 import pagerReducer from "./pager-reducer";
 import {defaultKeypadType, keypadForType} from "./shared";
 
-import type {Key} from "../data/keys";
 import type {LayoutProps, ActiveNodesObj} from "../types";
 import type {Action} from "./actions";
 import type {GestureState} from "./types";
@@ -35,7 +34,7 @@ export const createStore = () => {
                     store.dispatch(setActiveNodes(activeNodes));
                 },
                 onClick: (
-                    key: Key,
+                    key: Keys,
                     layoutProps: LayoutProps,
                     inPopover: boolean,
                 ) => {

package/src/store/input-reducer.ts

@@ -1,6 +1,6 @@
-import * as CursorContexts from "../components/input/cursor-contexts";
-import {KeyTypes} from "../consts";
+import {CursorContext} from "../components/input/cursor-contexts";
 import KeyConfigs from "../data/key-configs";
+import {KeyType} from "../enums";
 
 import type {Cursor, KeyHandler} from "../types";
 import type {Action} from "./actions";
@@ -12,7 +12,7 @@ const initialInputState: {
 } = {
     keyHandler: null,
     cursor: {
-        context: CursorContexts.NONE,
+        context: CursorContext.NONE,
     },
 };
 
@@ -29,7 +29,7 @@ const inputReducer = function (
 
         case "PressKey":
             const keyConfig = KeyConfigs[action.key];
-            if (keyConfig.type !== KeyTypes.KEYPAD_NAVIGATION) {
+            if (keyConfig.type !== KeyType.KEYPAD_NAVIGATION) {
                 // This is probably an anti-pattern but it works for the
                 // case where we don't actually control the state but we
                 // still want to communicate with the other object

package/src/store/layout-reducer.ts

@@ -1,6 +1,6 @@
 import {tabletCutoffPx} from "../components/common-style";
 import {computeLayoutParameters} from "../components/compute-layout-parameters";
-import {DeviceOrientations, DeviceTypes, LayoutModes} from "../consts";
+import {DeviceOrientation, DeviceType, LayoutMode} from "../enums";
 
 import {defaultKeypadType, keypadForType} from "./shared";
 
@@ -22,7 +22,7 @@ const initialLayoutState = {
         pageWidthPx: 0,
         pageHeightPx: 0,
     },
-    layoutMode: LayoutModes.FULLSCREEN,
+    layoutMode: LayoutMode.FULLSCREEN,
     paginationEnabled: false,
     navigationPadEnabled: false,
 } as const;
@@ -48,19 +48,19 @@ const layoutParametersForDimensions = (
     // Determine the device type and orientation.
     const deviceOrientation =
         pageWidthPx > pageHeightPx
-            ? DeviceOrientations.LANDSCAPE
-            : DeviceOrientations.PORTRAIT;
+            ? DeviceOrientation.LANDSCAPE
+            : DeviceOrientation.PORTRAIT;
     const deviceType =
         Math.min(pageWidthPx, pageHeightPx) > tabletCutoffPx
-            ? DeviceTypes.TABLET
-            : DeviceTypes.PHONE;
+            ? DeviceType.TABLET
+            : DeviceType.PHONE;
 
     // Using that information, make some decisions (or assumptions)
     // about the resulting layout.
-    const navigationPadEnabled = deviceType === DeviceTypes.TABLET;
+    const navigationPadEnabled = deviceType === DeviceType.TABLET;
     const paginationEnabled =
-        deviceType === DeviceTypes.PHONE &&
-        deviceOrientation === DeviceOrientations.PORTRAIT;
+        deviceType === DeviceType.PHONE &&
+        deviceOrientation === DeviceOrientation.PORTRAIT;
 
     const deviceInfo = {deviceOrientation, deviceType} as const;
     const layoutOptions = {

package/src/store/pager-reducer.ts

@@ -1,6 +1,6 @@
 import VelocityTracker from "../components/velocity-tracker";
-import {KeyTypes} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import {KeyType} from "../enums";
 
 import {defaultKeypadType, keypadForType} from "./shared";
 
@@ -50,8 +50,8 @@ const pagerReducer = function (
 
             // Reset the keypad page if the user performs a math operation.
             if (
-                keyConfig.type === KeyTypes.VALUE ||
-                keyConfig.type === KeyTypes.OPERATOR
+                keyConfig.type === KeyType.VALUE ||
+                keyConfig.type === KeyType.OPERATOR
             ) {
                 return {
                     ...state,

package/src/store/shared.ts

@@ -1,12 +1,12 @@
 import {expressionKeypadLayout} from "../components/expression-keypad";
 import {fractionKeypadLayout} from "../components/fraction-keypad";
-import {KeypadTypes} from "../consts";
+import {KeypadType} from "../enums";
 
-const defaultKeypadType = KeypadTypes.EXPRESSION;
+const defaultKeypadType = KeypadType.EXPRESSION;
 
 const keypadForType = {
-    [KeypadTypes.FRACTION]: fractionKeypadLayout,
-    [KeypadTypes.EXPRESSION]: expressionKeypadLayout,
+    [KeypadType.FRACTION]: fractionKeypadLayout,
+    [KeypadType.EXPRESSION]: expressionKeypadLayout,
 } as const;
 
 export {keypadForType, defaultKeypadType};

package/src/store/types.ts

@@ -1,9 +1,8 @@
 import GestureManager from "../components/gesture-manager";
 import VelocityTracker from "../components/velocity-tracker";
-import {LayoutModes} from "../consts";
+import Keys from "../data/keys";
+import {LayoutMode, KeypadType} from "../enums";
 
-import type {KeypadType} from "../consts";
-import type {Key} from "../data/keys";
 import type {Cursor, KeyHandler, Popover, Echo} from "../types";
 
 // Interaction between keypad and input
@@ -44,7 +43,7 @@ export interface PagerState {
 
 export interface GestureState {
     popover: Popover | null;
-    focus: Key | null;
+    focus: Keys | null;
     gestureManager: GestureManager;
 }
 
@@ -67,7 +66,7 @@ export interface LayoutState {
         pageWidthPx: number;
         pageHeightPx: number;
     };
-    layoutMode: keyof typeof LayoutModes;
+    layoutMode: LayoutMode;
     paginationEnabled: boolean;
     navigationPadEnabled: boolean;
 }

package/src/types.ts

@@ -1,15 +1,15 @@
+import Keys from "./data/keys";
 import {
-    BorderDirections,
-    EchoAnimationTypes,
-    KeyTypes,
-    IconTypes,
-} from "./consts";
+    BorderDirection,
+    EchoAnimationType,
+    IconType,
+    KeyType,
+    KeypadType,
+} from "./enums";
 
 import type {CursorContext} from "./components/input/cursor-contexts";
-import type {KeypadType} from "./consts";
-import type {Key} from "./data/keys";
 
-export type Border = Partial<Array<keyof typeof BorderDirections>>;
+export type Border = Partial<ReadonlyArray<BorderDirection>>;
 
 export type Bound = {
     top: number;
@@ -21,38 +21,38 @@ export type Bound = {
 };
 
 export type Popover = {
-    parentId: Key;
+    parentId: Keys;
     bounds: Partial<Bound>;
-    childKeyIds: Array<Key>;
+    childKeyIds: Array<Keys>;
 };
 
 export type Echo = {
     animationId: string;
-    animationType: keyof typeof EchoAnimationTypes;
+    animationType: EchoAnimationType;
     borders: Border;
-    id: Key;
+    id: Keys;
     initialBounds: DOMRect;
 };
 
-export type Icon = {
-    type: keyof typeof IconTypes;
+export type IconConfig = {
+    type: IconType;
     data: string;
 };
 
 export type KeyConfig = {
     ariaLabel: string;
-    id: Key;
-    type: keyof typeof KeyTypes;
-    childKeyIds: Array<Key>;
-    icon: Icon;
+    id: Keys;
+    type: KeyType;
+    childKeyIds: Array<Keys>;
+    icon: IconConfig;
 };
 
 export type KeypadConfiguration = {
     keypadType: KeypadType;
-    extraKeys?: ReadonlyArray<Key>;
+    extraKeys?: ReadonlyArray<Keys>;
 };
 
-export type KeyHandler = (key: Key) => Cursor;
+export type KeyHandler = (key: Keys) => Cursor;
 
 export type Cursor = {
     context: CursorContext;

package/src/utils.ts

@@ -1,6 +1,6 @@
 import {getDecimalSeparator} from "@khanacademy/wonder-blocks-i18n";
 
-import {DecimalSeparators} from "./consts";
+import {DecimalSeparator} from "./enums";
 
 // NOTES(kevinb):
 // - In order to get the correct decimal separator for the current locale,
@@ -10,5 +10,5 @@ import {DecimalSeparators} from "./consts";
 //   listed here.  Much of the Arab world uses U+066C.
 export const decimalSeparator: string =
     getDecimalSeparator() === ","
-        ? DecimalSeparators.COMMA
-        : DecimalSeparators.PERIOD;
+        ? DecimalSeparator.COMMA
+        : DecimalSeparator.PERIOD;