@khanacademy/math-input 2.0.0 → 3.0.0

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

@@ -1,4 +1,4 @@
-import Keys from "../data/keys";
+import Keys from "../../data/keys";
 
 /**
  * The state machine that backs our gesture system. In particular, this state

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

@@ -5,14 +5,14 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {IconType} from "../enums";
+import {IconType} from "../../enums";
+import {offBlack} from "../common-style";
 
-import {offBlack} from "./common-style";
 import MathIcon from "./math-icon";
 import SvgIcon from "./svg-icon";
 import TextIcon from "./text-icon";
 
-import type {IconConfig} from "../types";
+import type {IconConfig} from "../../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 const focusedColor = "#FFF";

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

@@ -6,9 +6,8 @@ import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {BorderDirection, BorderStyles, KeyType} from "../enums";
-import {View} from "../fake-react-native-web/index";
-
+import {BorderDirection, BorderStyles, KeyType} from "../../enums";
+import {View} from "../../fake-react-native-web/index";
 import {
     wonderBlocksBlue,
     innerBorderColor,
@@ -18,13 +17,14 @@ import {
     operatorGrey,
     controlGrey,
     emptyGrey,
-} from "./common-style";
+} from "../common-style";
+
 import CornerDecal from "./corner-decal";
 import Icon from "./icon";
 import MultiSymbolGrid from "./multi-symbol-grid";
 
-import type {State} from "../store/types";
-import type {Border, KeyConfig, IconConfig} from "../types";
+import type {Border, NonManyKeyConfig, IconConfig} from "../../types";
+import type {State} from "./store/types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 interface ReduxProps {
@@ -35,7 +35,7 @@ interface ReduxProps {
 interface Props extends ReduxProps {
     ariaLabel?: string;
     borders: Border;
-    childKeys: ReadonlyArray<KeyConfig>;
+    childKeys: ReadonlyArray<NonManyKeyConfig>;
     disabled: boolean;
     focused: boolean;
     popoverEnabled: boolean;
@@ -229,7 +229,7 @@ class KeypadButton extends React.PureComponent<Props> {
             };
             const icons = childKeys.map((keyConfig) => {
                 return keyConfig.icon;
-            });
+            }) as ReadonlyArray<IconConfig>;
             return (
                 <View
                     style={buttonStyle}
@@ -256,7 +256,10 @@ class KeypadButton extends React.PureComponent<Props> {
                 <View style={buttonStyle} {...eventHandlers} {...a11yMarkup}>
                     {maybeFocusBox}
                     <View style={iconWrapperStyle}>
-                        <Icon icon={icon} focused={renderFocused} />
+                        <Icon
+                            icon={icon as IconConfig}
+                            focused={renderFocused}
+                        />
                     </View>
                     {maybeCornerDecal}
                 </View>

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

@@ -2,23 +2,23 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {LayoutMode, KeypadType} from "../enums";
-import {View} from "../fake-react-native-web/index";
-import {setPageSize} from "../store/actions";
-
+import {LayoutMode, KeypadType} from "../../enums";
+import {View} from "../../fake-react-native-web/index";
 import {
     innerBorderColor,
     innerBorderStyle,
     innerBorderWidthPx,
     compactKeypadBorderRadiusPx,
-} from "./common-style";
+} from "../common-style";
+
 import ExpressionKeypad from "./expression-keypad";
 import FractionKeypad from "./fraction-keypad";
 import NavigationPad from "./navigation-pad";
+import {setPageSize} from "./store/actions";
 import Styles from "./styles";
 import * as zIndexes from "./z-indexes";
 
-import type {State as ReduxState} from "../store/types";
+import type {State as ReduxState} from "./store/types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 const {row, centered, fullWidth} = Styles;

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 KeyConfigs from "../data/key-configs";
-import Keys from "../data/keys";
-import {KeyType} from "../enums";
+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,8 +33,8 @@ class ManyKeypadButton extends React.Component<Props> {
             const keyConfig = KeyConfigs[keys[0]];
             return <TouchableKeypadButton keyConfig={keyConfig} {...rest} />;
         } else {
-            const keyConfig = {
-                id: Keys.MANY,
+            const keyConfig: KeyConfig = {
+                id: "MANY",
                 type: KeyType.MANY,
                 childKeyIds: keys,
             };

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,11 +6,11 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {IconType} from "../enums";
-import {View} from "../fake-react-native-web/index";
-import {IconConfig} from "../types";
+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";
 

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 "../enums";
-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 KeyConfigs from "../data/key-configs";
-import {BorderStyles} from "../enums";
-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,12 +1,12 @@
-import Keys 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
@@ -145,21 +145,18 @@ export const setActiveNodes = (
 type PressKeyAction = {
     type: "PressKey";
     key: Keys;
-    borders: Border;
-    initialBounds: DOMRect;
+    initialBounds: Bound;
     inPopover: boolean;
 };
 
 export const pressKey = (
     key: Keys,
-    borders: Border,
-    initialBounds: DOMRect,
+    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 KeyConfigs from "../data/key-configs";
-import {EchoAnimationType, KeyType} from "../enums";
+import KeyConfigs from "../../../data/key-configs";
+import {EchoAnimationType, KeyType} from "../../../enums";
 
 import type {Action} from "./actions";
 import type {EchoState} from "./types";
@@ -35,7 +35,6 @@ const echoReducer = function (
                             animationType: action.inPopover
                                 ? EchoAnimationType.LONG_FADE_ONLY
                                 : EchoAnimationType.FADE_ONLY,
-                            borders: action.borders,
                             id: keyConfig.id,
                             initialBounds: action.initialBounds,
                         },

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

@@ -1,17 +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 {LayoutProps, ActiveNodesObj} from "../types";
+import type {LayoutProps, ActiveNodesObj} from "../../../types";
 import type {Action} from "./actions";
 import type {GestureState} from "./types";
 
@@ -39,12 +38,7 @@ export const createStore = () => {
                     inPopover: boolean,
                 ) => {
                     store.dispatch(
-                        pressKey(
-                            key,
-                            layoutProps.borders,
-                            layoutProps.initialBounds,
-                            inPopover,
-                        ),
+                        pressKey(key, layoutProps.initialBounds, inPopover),
                     );
                 },
             },
@@ -107,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 {CursorContext} from "../components/input/cursor-contexts";
-import KeyConfigs from "../data/key-configs";
-import {KeyType} from "../enums";
+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";
 

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 {DeviceOrientation, DeviceType, LayoutMode} from "../enums";
+import {DeviceOrientation, DeviceType, LayoutMode} from "../../../enums";
+import {tabletCutoffPx} from "../../common-style";
+import {computeLayoutParameters} from "../compute-layout-parameters";
 
 import {defaultKeypadType, keypadForType} from "./shared";
 

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

@@ -1,6 +1,6 @@
-import {expressionKeypadLayout} from "../components/expression-keypad";
-import {fractionKeypadLayout} from "../components/fraction-keypad";
-import {KeypadType} from "../enums";
+import {KeypadType} from "../../../enums";
+import {expressionKeypadLayout} from "../expression-keypad";
+import {fractionKeypadLayout} from "../fraction-keypad";
 
 const defaultKeypadType = KeypadType.EXPRESSION;
 

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

@@ -1,9 +1,8 @@
-import GestureManager from "../components/gesture-manager";
-import VelocityTracker from "../components/velocity-tracker";
-import Keys from "../data/keys";
-import {LayoutMode, KeypadType} from "../enums";
+import Keys from "../../../data/keys";
+import {LayoutMode, KeypadType} from "../../../enums";
+import GestureManager from "../gesture-manager";
 
-import type {Cursor, KeyHandler, Popover, Echo} from "../types";
+import type {Cursor, KeyHandler, Popover, Echo} from "../../../types";
 
 // Interaction between keypad and input
 export interface InputState {
@@ -29,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;
+    // ?? 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;
@@ -74,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";