@khanacademy/math-input 2.0.0 → 4.0.0

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 Key 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;
-    focus: Keys | null;
+    // ?? Maybe which key is currently focused?
+    focus: Key | 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";

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

@@ -9,31 +9,41 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
-import KeyConfigs from "../data/key-configs";
-import Keys from "../data/keys";
-import {KeyType} from "../enums";
+import KeyConfigs from "../../data/key-configs";
+import Key from "../../data/keys";
+import {KeyType} from "../../enums";
 
 import GestureManager from "./gesture-manager";
 import KeypadButton from "./keypad-button";
 
-import type {Border, IconConfig} from "../types";
+import type {Border, IconConfig, KeyConfig} from "../../types";
+import type {State} from "./store/types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-type Props = {
-    borders: Border;
-    childKeyIds: ReadonlyArray<Keys>;
-    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: Keys;
+    id: Key;
+    focused: boolean;
     popoverEnabled: boolean;
-    style: StyleType;
+    childKeys?: ReadonlyArray<KeyConfig>;
+    ariaLabel?: string;
+    icon?: IconConfig;
     type: KeyType;
-    icon: IconConfig;
-};
+}
 
 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 +99,6 @@ class TouchableKeypadButton extends React.Component<Props> {
                         id,
                         ReactDOM.findDOMNode(node),
                         childKeyIds,
-                        borders,
                     )
                 }
                 borders={borders}
@@ -102,23 +111,28 @@ class TouchableKeypadButton extends React.Component<Props> {
     }
 }
 
-const extractProps = (keyConfig) => {
+const extractProps = (keyConfig: KeyConfig) => {
     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: readonly KeyConfig[] | undefined = 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 !== KeyType.MANY && childKeys && childKeys.length > 0;
+        type !== "MANY" && childKeys && childKeys.length > 0;
 
     return {
         ...rest,
@@ -128,7 +142,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/components/tabbar/icons.tsx

@@ -28,8 +28,6 @@ const IconAsset = function ({tintColor, type}: Props): React.ReactElement {
     } else if (type === "Operators") {
         return (
             <svg
-                width="32"
-                height="32"
                 viewBox="0 0 32 32"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"