@khanacademy/math-input 1.0.1 → 3.0.0

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

@@ -7,14 +7,14 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
-import {View} from "../fake-react-native-web/index";
-import {removeEcho} from "../store/actions";
+import {View} from "../../fake-react-native-web/index";
 
 import EchoManager from "./echo-manager";
 import PopoverManager from "./popover-manager";
+import {removeEcho} from "./store/actions";
 
-import type {State} from "../store/types";
-import type {Popover, Echo} from "../types";
+import type {Bound, Popover, Echo} from "../../types";
+import type {State} from "./store/types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 interface ReduxProps {
@@ -33,7 +33,7 @@ interface Props extends ReduxProps {
 class Keypad extends React.Component<Props> {
     _isMounted: boolean | undefined;
     _resizeTimeout: number | null | undefined;
-    _container: DOMRect | null | undefined;
+    _container: Bound | null | undefined;
 
     componentDidMount() {
         this._isMounted = true;

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

@@ -5,9 +5,9 @@
 
 import * as React from "react";
 
-import {KeyTypes} from "../consts";
-import KeyConfigs from "../data/key-configs";
-import Keys from "../data/keys";
+import KeyConfigs from "../../data/key-configs";
+import {KeyType} from "../../enums";
+import {KeyConfig} from "../../types";
 
 import EmptyKeypadButton from "./empty-keypad-button";
 import TouchableKeypadButton from "./touchable-keypad-button";
@@ -33,9 +33,9 @@ class ManyKeypadButton extends React.Component<Props> {
             const keyConfig = KeyConfigs[keys[0]];
             return <TouchableKeypadButton keyConfig={keyConfig} {...rest} />;
         } else {
-            const keyConfig = {
-                id: Keys.MANY,
-                type: KeyTypes.MANY,
+            const keyConfig: KeyConfig = {
+                id: "MANY",
+                type: KeyType.MANY,
                 childKeyIds: keys,
             };
             return <TouchableKeypadButton keyConfig={keyConfig} {...rest} />;

package/src/components/{math-icon.tsx → keypad-legacy/math-icon.tsx}

@@ -7,9 +7,9 @@ import katex from "katex";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-import {View} from "../fake-react-native-web/index";
+import {View} from "../../fake-react-native-web/index";
+import {iconSizeHeightPx, iconSizeWidthPx} from "../common-style";
 
-import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style";
 import Styles from "./styles";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";

package/src/components/{multi-symbol-grid.tsx → keypad-legacy/multi-symbol-grid.tsx}

@@ -6,20 +6,19 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {IconTypes} from "../consts";
-import {View} from "../fake-react-native-web/index";
+import {IconType} from "../../enums";
+import {View} from "../../fake-react-native-web/index";
+import {IconConfig} from "../../types";
+import {iconSizeHeightPx, iconSizeWidthPx} from "../common-style";
 
-import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style";
 import Icon from "./icon";
 import Styles from "./styles";
 
-import type {Icon as IconType} from "../types";
-
 const {row, column, centered, fullWidth} = Styles;
 
 type Props = {
     focused: boolean;
-    icons: ReadonlyArray<IconType>;
+    icons: ReadonlyArray<IconConfig>;
 };
 
 class MultiSymbolGrid extends React.Component<Props> {
@@ -32,7 +31,7 @@ class MultiSymbolGrid extends React.Component<Props> {
         // Supporting other types of icons is possible but would require
         // some styles coercion and doesn't seem worthwhile right now.
         icons.forEach((icon) => {
-            if (icon.type !== IconTypes.MATH) {
+            if (icon.type !== IconType.MATH) {
                 throw new Error(
                     `Received invalid icon: type=${icon.type}, ` +
                         `data=${icon.data}`,

package/src/components/{multi-symbol-popover.tsx → keypad-legacy/multi-symbol-popover.tsx}

@@ -5,9 +5,9 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {BorderStyles} from "../consts";
-import {View} from "../fake-react-native-web/index";
-import {KeyConfig} from "../types";
+import {BorderStyles} from "../../enums";
+import {View} from "../../fake-react-native-web/index";
+import {KeyConfig} from "../../types";
 
 import TouchableKeypadButton from "./touchable-keypad-button";
 import * as zIndexes from "./z-indexes";
@@ -27,7 +27,6 @@ class MultiSymbolPopover extends React.Component<Prop> {
                 {keys.map((key) => {
                     return (
                         <TouchableKeypadButton
-                            key={key.id}
                             keyConfig={key}
                             borders={BorderStyles.NONE}
                         />

package/src/components/{navigation-pad.tsx → keypad-legacy/navigation-pad.tsx}

@@ -6,16 +6,16 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {BorderStyles} from "../consts";
-import KeyConfigs from "../data/key-configs";
-import {View} from "../fake-react-native-web/index";
-
+import KeyConfigs from "../../data/key-configs";
+import {BorderStyles} from "../../enums";
+import {View} from "../../fake-react-native-web/index";
 import {
     navigationPadWidthPx,
     controlGrey,
     valueGrey,
     offBlack16,
-} from "./common-style";
+} from "../common-style";
+
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
 

package/src/components/{node-manager.ts → keypad-legacy/node-manager.ts}

@@ -1,4 +1,4 @@
-import type {Border, LayoutProps} from "../types";
+import {LayoutProps, Bound} 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
@@ -9,18 +9,13 @@ import type {Border, LayoutProps} from "../types";
 
 class NodeManager {
     _nodesById: Record<string, HTMLElement>;
-    _bordersById: Record<string, Border>;
     _orderedIds: ReadonlyArray<string>;
-    _cachedBoundingBoxesById: Record<string, DOMRect>;
+    _cachedBoundingBoxesById: Record<string, Bound>;
 
     constructor() {
         // A mapping from IDs to DOM nodes.
         this._nodesById = {};
 
-        // A mapping from IDs to the borders around the DOM nodes, which can be
-        // useful for layout purposes.
-        this._bordersById = {};
-
         // An ordered list of IDs, where DOM nodes that are "higher" on the
         // page come earlier in the list. Note that an ID may be present in
         // this ordered list but not be registered to a DOM node (i.e., if it
@@ -53,10 +48,8 @@ class NodeManager {
         id: string,
         domNode: HTMLElement,
         childIds: ReadonlyArray<string>,
-        borders: Border,
     ) {
         this._nodesById[id] = domNode;
-        this._bordersById[id] = borders;
 
         // Make sure that any children appear first.
         // TODO(charlie): This is a very simplistic system that wouldn't
@@ -133,7 +126,6 @@ class NodeManager {
 
         return {
             initialBounds: this._cachedBoundingBoxesById[id],
-            borders: this._bordersById[id],
         };
     }
 }

package/src/components/{popover-manager.tsx → keypad-legacy/popover-manager.tsx}

@@ -6,11 +6,11 @@
 import * as React from "react";
 import {CSSTransition} from "react-transition-group";
 
-import KeyConfigs from "../data/key-configs";
+import KeyConfigs from "../../data/key-configs";
 
 import MultiSymbolPopover from "./multi-symbol-popover";
 
-import type {Popover, KeyConfig} from "../types";
+import type {Popover, KeyConfig} from "../../types";
 
 // NOTE(charlie): These must be kept in sync with the transition durations and
 // classnames specified in popover.less.

package/src/components/{popover-state-machine.ts → keypad-legacy/popover-state-machine.ts}

@@ -1,4 +1,4 @@
-import type {ActiveNodesObj} from "../types";
+import type {ActiveNodesObj} from "../../types";
 
 /**
  * A state machine for the popover state. In particular, this class manages the

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

@@ -2,18 +2,17 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {Provider} from "react-redux";
 
+import KeypadContainer from "./keypad-container";
 import {
     activateKeypad,
     dismissKeypad,
     configureKeypad,
     setCursor,
     setKeyHandler,
-} from "../store/actions";
-import {createStore} from "../store/index";
-
-import KeypadContainer from "./keypad-container";
+} from "./store/actions";
+import {createStore} from "./store/index";
 
-import type {Cursor, KeypadConfiguration, KeyHandler} from "../types";
+import type {Cursor, KeypadConfiguration, KeyHandler} from "../../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type Props = {

package/src/{store → components/keypad-legacy/store}/actions.ts

@@ -1,11 +1,12 @@
-import type {Key} from "../data/keys";
+import Keys from "../../../data/keys";
+
 import type {
+    Bound,
     KeypadConfiguration,
     KeyHandler,
     Cursor,
     ActiveNodesObj,
-    Border,
-} from "../types";
+} from "../../../types";
 
 // naming convention: verb + noun
 // the noun should be one of the other properties in the object that's
@@ -143,22 +144,19 @@ export const setActiveNodes = (
 
 type PressKeyAction = {
     type: "PressKey";
-    key: Key;
-    borders: Border;
-    initialBounds: DOMRect;
+    key: Keys;
+    initialBounds: Bound;
     inPopover: boolean;
 };
 
 export const pressKey = (
-    key: Key,
-    borders: Border,
-    initialBounds: DOMRect,
+    key: Keys,
+    initialBounds: Bound,
     inPopover: any,
 ): PressKeyAction => {
     return {
         type: "PressKey",
         key,
-        borders,
         initialBounds,
         inPopover,
     };

package/src/{store → components/keypad-legacy/store}/echo-reducer.ts

@@ -1,5 +1,5 @@
-import {EchoAnimationTypes, KeyTypes} from "../consts";
-import KeyConfigs from "../data/key-configs";
+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,9 +33,8 @@ const echoReducer = function (
                         {
                             animationId: "" + _lastAnimationId++,
                             animationType: action.inPopover
-                                ? EchoAnimationTypes.LONG_FADE_ONLY
-                                : EchoAnimationTypes.FADE_ONLY,
-                            borders: action.borders,
+                                ? EchoAnimationType.LONG_FADE_ONLY
+                                : EchoAnimationType.FADE_ONLY,
                             id: keyConfig.id,
                             initialBounds: action.initialBounds,
                         },

package/src/{store → components/keypad-legacy/store}/index.ts

@@ -1,18 +1,16 @@
 import * as Redux from "redux";
 
-import GestureManager from "../components/gesture-manager";
-import Keys from "../data/keys";
+import Keys from "../../../data/keys";
+import GestureManager from "../gesture-manager";
 
 import {onSwipeChange, onSwipeEnd, setActiveNodes, pressKey} from "./actions";
 import echoReducer from "./echo-reducer";
 import inputReducer from "./input-reducer";
 import keypadReducer from "./keypad-reducer";
 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 {LayoutProps, ActiveNodesObj} from "../../../types";
 import type {Action} from "./actions";
 import type {GestureState} from "./types";
 
@@ -35,17 +33,12 @@ export const createStore = () => {
                     store.dispatch(setActiveNodes(activeNodes));
                 },
                 onClick: (
-                    key: Key,
+                    key: Keys,
                     layoutProps: LayoutProps,
                     inPopover: boolean,
                 ) => {
                     store.dispatch(
-                        pressKey(
-                            key,
-                            layoutProps.borders,
-                            layoutProps.initialBounds,
-                            inPopover,
-                        ),
+                        pressKey(key, layoutProps.initialBounds, inPopover),
                     );
                 },
             },
@@ -108,7 +101,6 @@ export const createStore = () => {
     const reducer = Redux.combineReducers({
         input: inputReducer,
         keypad: keypadReducer,
-        pager: pagerReducer,
         gestures: gestureReducer,
         echoes: echoReducer,
         layout: layoutReducer,

package/src/{store → components/keypad-legacy/store}/input-reducer.ts

@@ -1,8 +1,8 @@
-import * as CursorContexts from "../components/input/cursor-contexts";
-import {KeyTypes} from "../consts";
-import KeyConfigs from "../data/key-configs";
+import KeyConfigs from "../../../data/key-configs";
+import {KeyType} from "../../../enums";
+import {CursorContext} from "../../input/cursor-contexts";
 
-import type {Cursor, KeyHandler} from "../types";
+import type {Cursor, KeyHandler} from "../../../types";
 import type {Action} from "./actions";
 import type {InputState} from "./types";
 
@@ -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 → components/keypad-legacy/store}/keypad-reducer.ts

@@ -1,5 +1,5 @@
-import KeyConfigs from "../data/key-configs";
-import Keys from "../data/keys";
+import KeyConfigs from "../../../data/key-configs";
+import Keys from "../../../data/keys";
 
 import {defaultKeypadType} from "./shared";
 

package/src/{store → components/keypad-legacy/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 {tabletCutoffPx} from "../../common-style";
+import {computeLayoutParameters} from "../compute-layout-parameters";
 
 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/components/keypad-legacy/store/shared.ts

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

package/src/{store → components/keypad-legacy/store}/types.ts

@@ -1,10 +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 GestureManager from "../gesture-manager";
 
-import type {KeypadType} from "../consts";
-import type {Key} from "../data/keys";
-import type {Cursor, KeyHandler, Popover, Echo} from "../types";
+import type {Cursor, KeyHandler, Popover, Echo} from "../../../types";
 
 // Interaction between keypad and input
 export interface InputState {
@@ -30,28 +28,26 @@ export interface KeypadState {
     active: boolean;
 }
 
-// Pagination for keypad types with multiple pages
-export interface PagerState {
-    animateToPosition: boolean;
-    // On keypad types with multiple pages
-    // which page we are on
-    currentPage: number;
-    dx: number;
-    numPages: number;
-    pageWidthPx: number;
-    velocityTracker: VelocityTracker;
-}
-
+// Handles things like:
+// long-press: to open multikey popover
+// swipe: for pagination
+// press: regular pushing of a button
 export interface GestureState {
+    // The current multikey popover?
     popover: Popover | null;
-    focus: Key | null;
+    // ?? Maybe which key is currently focused?
+    focus: Keys | null;
+    // Complex object that interprets touches as actions
     gestureManager: GestureManager;
 }
 
+// Manages the animations for pressing keys
 export interface EchoState {
+    // Which echoes are in the process of animating
     echoes: ReadonlyArray<Echo>;
 }
 
+// Layout (size, where to put buttons, etc)
 export interface LayoutState {
     gridDimensions: {
         numRows: number;
@@ -67,7 +63,7 @@ export interface LayoutState {
         pageWidthPx: number;
         pageHeightPx: number;
     };
-    layoutMode: keyof typeof LayoutModes;
+    layoutMode: LayoutMode;
     paginationEnabled: boolean;
     navigationPadEnabled: boolean;
 }
@@ -75,7 +71,6 @@ export interface LayoutState {
 export interface State {
     input: InputState;
     keypad: KeypadState;
-    pager: PagerState;
     gestures: GestureState;
     echoes: EchoState;
     layout: LayoutState;

package/src/components/{styles.ts → keypad-legacy/styles.ts}

@@ -4,7 +4,7 @@
 
 import {StyleSheet} from "aphrodite";
 
-import {compactKeypadBorderRadiusPx} from "./common-style";
+import {compactKeypadBorderRadiusPx} from "../common-style";
 
 export default StyleSheet.create({
     row: {

package/src/components/{text-icon.tsx → keypad-legacy/text-icon.tsx}

@@ -5,9 +5,9 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {View, Text} from "../fake-react-native-web/index";
+import {View, Text} from "../../fake-react-native-web/index";
+import {iconSizeHeightPx, iconSizeWidthPx} from "../common-style";
 
-import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style";
 import Styles from "./styles";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";