@khanacademy/math-input 2.0.0 → 4.0.0

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, KeyTypes} 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,12 +35,12 @@ interface ReduxProps {
 interface Props extends ReduxProps {
     ariaLabel?: string;
     borders: Border;
-    childKeys: ReadonlyArray<KeyConfig>;
+    childKeys: ReadonlyArray<NonManyKeyConfig>;
     disabled: boolean;
     focused: boolean;
     popoverEnabled: boolean;
     type: KeyType;
-    icon: IconConfig;
+    icon?: IconConfig;
     style?: StyleType;
     onTouchCancel?: (evt: React.TouchEvent<HTMLDivElement>) => void;
     onTouchEnd?: (evt: React.TouchEvent<HTMLDivElement>) => void;
@@ -101,7 +101,7 @@ class KeypadButton extends React.PureComponent<Props> {
         // object. This method must be called whenever a property that
         // influences the possible outcomes of `this._getFocusStyle` and
         // `this._getButtonStyle` changes (such as `this.buttonSizeStyle`).
-        for (const type of Object.values(KeyType)) {
+        for (const type of KeyTypes) {
             css(View.styles.initial, ...this._getFocusStyle(type));
 
             for (const borders of Object.values(BorderStyles)) {
@@ -115,10 +115,7 @@ class KeypadButton extends React.PureComponent<Props> {
 
     _getFocusStyle = (type: KeyType) => {
         let focusBackgroundStyle;
-        if (
-            type === KeyType.INPUT_NAVIGATION ||
-            type === KeyType.KEYPAD_NAVIGATION
-        ) {
+        if (type === "INPUT_NAVIGATION" || type === "KEYPAD_NAVIGATION") {
             focusBackgroundStyle = styles.light;
         } else {
             focusBackgroundStyle = styles.bright;
@@ -131,25 +128,25 @@ class KeypadButton extends React.PureComponent<Props> {
         // Select the appropriate style for the button.
         let backgroundStyle;
         switch (type) {
-            case KeyType.EMPTY:
+            case "EMPTY":
                 backgroundStyle = styles.empty;
                 break;
 
-            case KeyType.MANY:
-            case KeyType.VALUE:
+            case "MANY":
+            case "VALUE":
                 backgroundStyle = styles.value;
                 break;
 
-            case KeyType.OPERATOR:
+            case "OPERATOR":
                 backgroundStyle = styles.operator;
                 break;
 
-            case KeyType.INPUT_NAVIGATION:
-            case KeyType.KEYPAD_NAVIGATION:
+            case "INPUT_NAVIGATION":
+            case "KEYPAD_NAVIGATION":
                 backgroundStyle = styles.control;
                 break;
 
-            case KeyType.ECHO:
+            case "ECHO":
                 backgroundStyle = null;
                 break;
         }
@@ -168,7 +165,7 @@ class KeypadButton extends React.PureComponent<Props> {
             styles.buttonBase,
             backgroundStyle,
             ...borderStyle,
-            type === KeyType.ECHO && styles.echo,
+            type === "ECHO" && styles.echo,
             this.buttonSizeStyle,
             // React Native allows you to set the 'style' props on user defined
             // components.
@@ -197,7 +194,7 @@ class KeypadButton extends React.PureComponent<Props> {
         // We render in the focus state if the key is focused, or if it's an
         // echo.
         const renderFocused =
-            (!disabled && focused) || popoverEnabled || type === KeyType.ECHO;
+            (!disabled && focused) || popoverEnabled || type === "ECHO";
         const buttonStyle = this._getButtonStyle(type, borders, style);
         const focusStyle = this._getFocusStyle(type);
         const iconWrapperStyle = [
@@ -218,9 +215,9 @@ class KeypadButton extends React.PureComponent<Props> {
             childKeys &&
             childKeys.length > 0 && <CornerDecal style={styles.decalInset} />;
 
-        if (type === KeyType.EMPTY) {
+        if (type === "EMPTY") {
             return <View style={buttonStyle} {...eventHandlers} />;
-        } else if (type === KeyType.MANY) {
+        } else if (type === "MANY") {
             // TODO(charlie): Make the long-press interaction accessible. See
             // the TODO in key-configs.js for more.
             const manyButtonA11yMarkup = {
@@ -229,7 +226,7 @@ class KeypadButton extends React.PureComponent<Props> {
             };
             const icons = childKeys.map((keyConfig) => {
                 return keyConfig.icon;
-            });
+            }) as ReadonlyArray<IconConfig>;
             return (
                 <View
                     style={buttonStyle}
@@ -256,7 +253,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 {IconType} from "../../enums";
+import {KeyConfig} from "../../types";
 
 import EmptyKeypadButton from "./empty-keypad-button";
 import TouchableKeypadButton from "./touchable-keypad-button";
@@ -33,10 +33,17 @@ class ManyKeypadButton extends React.Component<Props> {
             const keyConfig = KeyConfigs[keys[0]];
             return <TouchableKeypadButton keyConfig={keyConfig} {...rest} />;
         } else {
-            const keyConfig = {
-                id: Keys.MANY,
-                type: KeyType.MANY,
+            const keyConfig: KeyConfig = {
+                id: "MANY",
+                type: "MANY",
                 childKeyIds: keys,
+                ariaLabel: keys
+                    .map((key) => KeyConfigs[key].ariaLabel)
+                    .join(", "),
+                icon: {
+                    type: IconType.SVG,
+                    data: "many",
+                },
             };
             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,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 Key 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
@@ -104,30 +104,6 @@ export const setCursor = (cursor: Cursor): SetCursorAction => {
 };
 
 // Gesture actions
-type OnSwipeChangeAction = {
-    type: "OnSwipeChange";
-    dx: number;
-};
-
-export const onSwipeChange = (dx: number): OnSwipeChangeAction => {
-    return {
-        type: "OnSwipeChange",
-        dx,
-    };
-};
-
-type OnSwipeEndAction = {
-    type: "OnSwipeEnd";
-    dx: number;
-};
-
-export const onSwipeEnd = (dx: number): OnSwipeEndAction => {
-    return {
-        type: "OnSwipeEnd",
-        dx,
-    };
-};
-
 type SetActiveNodesAction = {
     type: "SetActiveNodes";
     activeNodes: any;
@@ -144,22 +120,19 @@ export const setActiveNodes = (
 
 type PressKeyAction = {
     type: "PressKey";
-    key: Keys;
-    borders: Border;
-    initialBounds: DOMRect;
+    key: Key;
+    initialBounds: Bound;
     inPopover: boolean;
 };
 
 export const pressKey = (
-    key: Keys,
-    borders: Border,
-    initialBounds: DOMRect,
+    key: Key,
+    initialBounds: Bound,
     inPopover: any,
 ): PressKeyAction => {
     return {
         type: "PressKey",
         key,
-        borders,
         initialBounds,
         inPopover,
     };
@@ -173,7 +146,5 @@ export type Action =
     | RemoveEchoAction
     | SetKeyHandlerAction
     | SetCursorAction
-    | OnSwipeChangeAction
-    | OnSwipeEndAction
     | SetActiveNodesAction
     | PressKeyAction;

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} from "../../../enums";
 
 import type {Action} from "./actions";
 import type {EchoState} from "./types";
@@ -22,10 +22,7 @@ const echoReducer = function (
 
             // Add in the echo animation if the user performs a math
             // operation.
-            if (
-                keyConfig.type === KeyType.VALUE ||
-                keyConfig.type === KeyType.OPERATOR
-            ) {
+            if (keyConfig.type === "VALUE" || keyConfig.type === "OPERATOR") {
                 return {
                     ...state,
                     echoes: [
@@ -35,7 +32,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 Key from "../../../data/keys";
+import GestureManager from "../gesture-manager";
 
-import {onSwipeChange, onSwipeEnd, setActiveNodes, pressKey} from "./actions";
+import {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";
 
@@ -24,32 +23,21 @@ export const createStore = () => {
                 swipeEnabled,
             },
             {
-                onSwipeChange: (dx: number) => {
-                    store.dispatch(onSwipeChange(dx));
-                },
-                onSwipeEnd: (dx: number) => {
-                    store.dispatch(onSwipeEnd(dx));
-                },
                 onActiveNodesChanged: (activeNodes: ActiveNodesObj) => {
                     store.dispatch(setActiveNodes(activeNodes));
                 },
                 onClick: (
-                    key: Keys,
+                    key: Key,
                     layoutProps: LayoutProps,
                     inPopover: boolean,
                 ) => {
                     store.dispatch(
-                        pressKey(
-                            key,
-                            layoutProps.borders,
-                            layoutProps.initialBounds,
-                            inPopover,
-                        ),
+                        pressKey(key, layoutProps.initialBounds, inPopover),
                     );
                 },
             },
             [],
-            [Keys.BACKSPACE, Keys.UP, Keys.RIGHT, Keys.DOWN, Keys.LEFT],
+            ["BACKSPACE", "UP", "RIGHT", "DOWN", "LEFT"],
         );
     };
 
@@ -107,7 +95,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,7 @@
-import {CursorContext} from "../components/input/cursor-contexts";
-import KeyConfigs from "../data/key-configs";
-import {KeyType} from "../enums";
+import KeyConfigs from "../../../data/key-configs";
+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";
 
@@ -29,7 +28,7 @@ const inputReducer = function (
 
         case "PressKey":
             const keyConfig = KeyConfigs[action.key];
-            if (keyConfig.type !== KeyType.KEYPAD_NAVIGATION) {
+            if (keyConfig.type !== "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,4 @@
-import KeyConfigs from "../data/key-configs";
-import Keys from "../data/keys";
+import KeyConfigs from "../../../data/key-configs";
 
 import {defaultKeypadType} from "./shared";
 
@@ -7,7 +6,7 @@ import type {Action} from "./actions";
 import type {KeypadState} from "./types";
 
 const initialKeypadState = {
-    extraKeys: ["x", "y", Keys.THETA, Keys.PI],
+    extraKeys: ["x", "y", "THETA", "PI"] as const,
     keypadType: defaultKeypadType,
     active: false,
 } as const;
@@ -46,7 +45,7 @@ const keypadReducer = function (
             // right actions when they occur. Hence, we figure off a
             // dismissal here rather than dispatching a dismiss action in
             // the first place.
-            if (keyConfig.id === Keys.DISMISS) {
+            if (keyConfig.id === "DISMISS") {
                 return keypadReducer(state, {type: "DismissKeypad"});
             }
             return state;

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;