@khanacademy/math-input 0.7.2 → 1.0.1

package/src/store/index.ts

@@ -1,292 +1,52 @@
 import * as Redux from "redux";
 
-import {tabletCutoffPx} from "../components/common-style";
-import {computeLayoutParameters} from "../components/compute-layout-parameters";
-import ExpressionKeypad from "../components/expression-keypad";
-import FractionKeypad from "../components/fraction-keypad";
 import GestureManager from "../components/gesture-manager";
-import * as CursorContexts from "../components/input/cursor-contexts";
-import VelocityTracker from "../components/velocity-tracker";
-import {
-    DeviceOrientations,
-    DeviceTypes,
-    EchoAnimationTypes,
-    KeyTypes,
-    KeypadTypes,
-    LayoutModes,
-} from "../consts";
-import KeyConfigs from "../data/key-configs";
 import Keys from "../data/keys";
 
-const keypadForType = {
-    [KeypadTypes.FRACTION]: FractionKeypad,
-    [KeypadTypes.EXPRESSION]: ExpressionKeypad,
-} as const;
-
-export const createStore = (): any => {
-    const initialInputState: {
-        keyHandler: any;
-        cursor: any;
-    } = {
-        keyHandler: null,
-        cursor: {
-            context: CursorContexts.NONE,
-        },
-    };
-
-    const inputReducer = function (state = initialInputState, action: any) {
-        switch (action.type) {
-            case "SetKeyHandler":
-                return {
-                    ...state,
-                    keyHandler: action.keyHandler,
-                };
-
-            case "PressKey":
-                const keyConfig = KeyConfigs[action.key];
-                if (keyConfig.type !== KeyTypes.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
-                    return {
-                        ...state,
-                        cursor: state.keyHandler(keyConfig.id),
-                    };
-                }
-
-                // TODO(kevinb) get state from MathQuill and store it?
-                return state;
-
-            case "SetCursor":
-                return {
-                    ...state,
-                    cursor: action.cursor,
-                };
-
-            default:
-                return state;
-        }
-    };
-
-    const defaultKeypadType = KeypadTypes.EXPRESSION;
-
-    const initialKeypadState = {
-        extraKeys: ["x", "y", Keys.THETA, Keys.PI],
-        keypadType: defaultKeypadType,
-        active: false,
-    } as const;
-
-    const keypadReducer = function (
-        state = initialKeypadState,
-        action: {
-            type: string;
-        },
-    ) {
-        switch (action.type) {
-            case "DismissKeypad":
-                return {
-                    ...state,
-                    active: false,
-                };
-
-            case "ActivateKeypad":
-                return {
-                    ...state,
-                    active: true,
-                };
-
-            case "ConfigureKeypad":
-                return {
-                    ...state,
-                    // Default `extraKeys` to the empty array.
-                    extraKeys: [],
-                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'configuration' does not exist on type '{ type: string; }'.
-                    ...action.configuration,
-                };
-
-            case "PressKey":
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'key' does not exist on type '{ type: string; }'.
-                const keyConfig = KeyConfigs[action.key];
-                // NOTE(charlie): Our keypad system operates by triggering key
-                // presses with key IDs in a dumb manner, such that the keys
-                // don't know what they can do--instead, the store is
-                // responsible for interpreting key presses and triggering the
-                // 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) {
-                    return keypadReducer(state, {type: "DismissKeypad"});
-                }
-                return state;
-
-            default:
-                return state;
-        }
-    };
-
-    // We default to the right-most page. This is done so-as to enforce a
-    // consistent orientation between the view pager layout and the flattened
-    // layout, where our default page appears on the far right.
-    const getDefaultPage = (numPages) => numPages - 1;
-
-    const initialPagerState = {
-        animateToPosition: false,
-        currentPage: getDefaultPage(keypadForType[defaultKeypadType].numPages),
-        // The cumulative differential in the horizontal direction for the
-        // current swipe.
-        dx: 0,
-        numPages: keypadForType[defaultKeypadType].numPages,
-        pageWidthPx: 0,
-        velocityTracker: new VelocityTracker(),
-    } as const;
-
-    const pagerReducer = function (
-        state = initialPagerState,
-        action: {
-            type: string;
-        },
-    ) {
-        switch (action.type) {
-            case "ConfigureKeypad":
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'configuration' does not exist on type '{ type: string; }'.
-                const {keypadType} = action.configuration;
-                const {numPages} = keypadForType[keypadType];
-                return {
-                    ...state,
-                    numPages,
-                    animateToPosition: false,
-                    currentPage: getDefaultPage(numPages),
-                    dx: 0,
-                };
-
-            case "SetPageSize":
-                return {
-                    ...state,
-                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'pageWidthPx' does not exist on type '{ type: string; }'.
-                    pageWidthPx: action.pageWidthPx,
-                };
-
-            case "PressKey":
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'key' does not exist on type '{ type: string; }'.
-                const keyConfig = KeyConfigs[action.key];
-
-                // Reset the keypad page if the user performs a math operation.
-                if (
-                    keyConfig.type === KeyTypes.VALUE ||
-                    keyConfig.type === KeyTypes.OPERATOR
-                ) {
-                    return pagerReducer(state, {type: "ResetKeypadPage"});
-                }
-                return state;
-
-            case "ResetKeypadPage":
-                return {
-                    ...state,
-                    animateToPosition: true,
-                    // We start at the right-most page.
-                    currentPage: getDefaultPage(state.numPages),
-                    dx: 0,
-                };
-
-            case "PageKeypadRight":
-                const nextPage = Math.min(
-                    state.currentPage + 1,
-                    state.numPages - 1,
-                );
-                return {
-                    ...state,
-                    animateToPosition: true,
-                    currentPage: nextPage,
-                    dx: 0,
-                };
-
-            case "PageKeypadLeft":
-                const prevPage = Math.max(state.currentPage - 1, 0);
-                return {
-                    ...state,
-                    animateToPosition: true,
-                    currentPage: prevPage,
-                    dx: 0,
-                };
-
-            case "OnSwipeChange":
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
-                state.velocityTracker.push(action.dx);
-
-                return {
-                    ...state,
-                    animateToPosition: false,
-                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
-                    dx: action.dx,
-                };
-
-            case "OnSwipeEnd":
-                const {pageWidthPx, velocityTracker} = state;
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
-                const {dx} = action;
-                const velocity = velocityTracker.getVelocity();
-
-                // NOTE(charlie): These will need refinement. The velocity comes
-                // from Framer.
-                const minFlingVelocity = 0.1;
-                const minFlingDistance = 10;
-
-                const shouldPageRight =
-                    dx < -pageWidthPx / 2 ||
-                    (velocity < -minFlingVelocity && dx < -minFlingDistance);
-
-                const shouldPageLeft =
-                    dx > pageWidthPx / 2 ||
-                    (velocity > minFlingVelocity && dx > minFlingDistance);
-
-                if (shouldPageRight) {
-                    return pagerReducer(state, {type: "PageKeypadRight"});
-                } else if (shouldPageLeft) {
-                    return pagerReducer(state, {type: "PageKeypadLeft"});
-                }
-
-                return {
-                    ...state,
-                    animateToPosition: true,
-                    dx: 0,
-                };
-
-            default:
-                return state;
-        }
-    };
-
+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 {Action} from "./actions";
+import type {GestureState} from "./types";
+
+export const createStore = () => {
+    // TODO(matthewc)[LC-752]: gestureReducer can't be moved from this file
+    // because it depends on `store` being in scope (see note below)
     const createGestureManager = (swipeEnabled: boolean) => {
         return new GestureManager(
             {
                 swipeEnabled,
             },
             {
-                onSwipeChange: (dx) => {
-                    store.dispatch({
-                        type: "OnSwipeChange",
-                        dx,
-                    });
+                onSwipeChange: (dx: number) => {
+                    store.dispatch(onSwipeChange(dx));
                 },
-                onSwipeEnd: (dx) => {
-                    store.dispatch({
-                        type: "OnSwipeEnd",
-                        dx,
-                    });
+                onSwipeEnd: (dx: number) => {
+                    store.dispatch(onSwipeEnd(dx));
                 },
-                onActiveNodesChanged: (activeNodes) => {
-                    store.dispatch({
-                        type: "SetActiveNodes",
-                        activeNodes,
-                    });
+                onActiveNodesChanged: (activeNodes: ActiveNodesObj) => {
+                    store.dispatch(setActiveNodes(activeNodes));
                 },
-                onClick: (key, layoutProps, inPopover) => {
-                    store.dispatch({
-                        type: "PressKey",
-                        key,
-                        ...layoutProps,
-                        inPopover,
-                    });
+                onClick: (
+                    key: Key,
+                    layoutProps: LayoutProps,
+                    inPopover: boolean,
+                ) => {
+                    store.dispatch(
+                        pressKey(
+                            key,
+                            layoutProps.borders,
+                            layoutProps.initialBounds,
+                            inPopover,
+                        ),
+                    );
                 },
             },
             [],
@@ -302,7 +62,10 @@ export const createStore = (): any => {
         ),
     } as const;
 
-    const gestureReducer = function (state = initialGestureState, action: any) {
+    const gestureReducer = function (
+        state: GestureState = initialGestureState,
+        action: Action,
+    ): GestureState {
         switch (action.type) {
             case "DismissKeypad":
                 // NOTE(charlie): In the past, we enforced the "gesture manager
@@ -342,179 +105,6 @@ export const createStore = (): any => {
         }
     };
 
-    // Used to generate unique animation IDs for the echo animations. The actual
-    // values are irrelevant as long as they are unique.
-    let _lastAnimationId = 0;
-
-    const initialEchoState = {
-        echoes: [],
-    } as const;
-
-    const echoReducer = function (state = initialEchoState, action) {
-        switch (action.type) {
-            case "PressKey":
-                const keyConfig = KeyConfigs[action.key];
-
-                // Add in the echo animation if the user performs a math
-                // operation.
-                if (
-                    keyConfig.type === KeyTypes.VALUE ||
-                    keyConfig.type === KeyTypes.OPERATOR
-                ) {
-                    return {
-                        ...state,
-                        echoes: [
-                            ...state.echoes,
-                            {
-                                animationId: "" + _lastAnimationId++,
-                                animationType: action.inPopover
-                                    ? EchoAnimationTypes.LONG_FADE_ONLY
-                                    : EchoAnimationTypes.FADE_ONLY,
-                                borders: action.borders,
-                                id: keyConfig.id,
-                                initialBounds: action.initialBounds,
-                            },
-                        ],
-                    };
-                }
-                return state;
-
-            case "RemoveEcho":
-                const remainingEchoes = state.echoes.filter((echo) => {
-                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'animationId' does not exist on type 'never'.
-                    return echo.animationId !== action.animationId;
-                });
-                return {
-                    ...state,
-                    echoes: remainingEchoes,
-                };
-
-            default:
-                return state;
-        }
-    };
-
-    const initialLayoutState = {
-        gridDimensions: {
-            numRows: keypadForType[defaultKeypadType].rows,
-            numColumns: keypadForType[defaultKeypadType].columns,
-            numMaxVisibleRows: keypadForType[defaultKeypadType].maxVisibleRows,
-            numPages: keypadForType[defaultKeypadType].numPages,
-        },
-        buttonDimensions: {
-            widthPx: 48,
-            heightPx: 48,
-        },
-        pageDimensions: {
-            pageWidthPx: 0,
-            pageHeightPx: 0,
-        },
-        layoutMode: LayoutModes.FULLSCREEN,
-        paginationEnabled: false,
-        navigationPadEnabled: false,
-    } as const;
-
-    /**
-     * Compute the additional layout state based on the provided page and grid
-     * dimensions.
-     */
-    const layoutParametersForDimensions = (
-        pageDimensions:
-            | {
-                  pageHeightPx: never;
-                  pageWidthPx: never;
-              }
-            | {
-                  pageHeightPx: number;
-                  pageWidthPx: number;
-              },
-        gridDimensions,
-    ) => {
-        const {pageWidthPx, pageHeightPx} = pageDimensions;
-
-        // Determine the device type and orientation.
-        const deviceOrientation =
-            pageWidthPx > pageHeightPx
-                ? DeviceOrientations.LANDSCAPE
-                : DeviceOrientations.PORTRAIT;
-        const deviceType =
-            Math.min(pageWidthPx, pageHeightPx) > tabletCutoffPx
-                ? DeviceTypes.TABLET
-                : DeviceTypes.PHONE;
-
-        // Using that information, make some decisions (or assumptions)
-        // about the resulting layout.
-        const navigationPadEnabled = deviceType === DeviceTypes.TABLET;
-        const paginationEnabled =
-            deviceType === DeviceTypes.PHONE &&
-            deviceOrientation === DeviceOrientations.PORTRAIT;
-
-        const deviceInfo = {deviceOrientation, deviceType} as const;
-        const layoutOptions = {
-            navigationPadEnabled,
-            paginationEnabled,
-            // HACK(charlie): It's not great that we're making assumptions about
-            // the toolbar (which is rendered by webapp, and should always be
-            // visible and anchored to the bottom of the page for phone and
-            // tablet exercises). But this is primarily a heuristic (the goal is
-            // to preserve a 'good' amount of space between the top of the
-            // keypad and the top of the page) so we afford to have some margin
-            // of error.
-            toolbarEnabled: true,
-        } as const;
-
-        return {
-            ...computeLayoutParameters(
-                gridDimensions,
-                pageDimensions,
-                deviceInfo,
-                layoutOptions,
-            ),
-            // Pass along some of the layout information, so that other
-            // components in the heirarchy can adapt appropriately.
-            navigationPadEnabled,
-            paginationEnabled,
-        };
-    };
-
-    const layoutReducer = function (state = initialLayoutState, action: any) {
-        switch (action.type) {
-            case "ConfigureKeypad":
-                const {keypadType} = action.configuration;
-                const gridDimensions = {
-                    numRows: keypadForType[keypadType].rows,
-                    numColumns: keypadForType[keypadType].columns,
-                    numMaxVisibleRows: keypadForType[keypadType].maxVisibleRows,
-                    numPages: keypadForType[keypadType].numPages,
-                } as const;
-
-                return {
-                    ...state,
-                    ...layoutParametersForDimensions(
-                        state.pageDimensions,
-                        gridDimensions,
-                    ),
-                    gridDimensions,
-                };
-
-            case "SetPageSize":
-                const {pageWidthPx, pageHeightPx} = action;
-                const pageDimensions = {pageWidthPx, pageHeightPx} as const;
-
-                return {
-                    ...state,
-                    ...layoutParametersForDimensions(
-                        pageDimensions,
-                        state.gridDimensions,
-                    ),
-                    pageDimensions,
-                };
-
-            default:
-                return state;
-        }
-    };
-
     const reducer = Redux.combineReducers({
         input: inputReducer,
         keypad: keypadReducer,

package/src/store/input-reducer.ts

@@ -0,0 +1,56 @@
+import * as CursorContexts from "../components/input/cursor-contexts";
+import {KeyTypes} from "../consts";
+import KeyConfigs from "../data/key-configs";
+
+import type {Cursor, KeyHandler} from "../types";
+import type {Action} from "./actions";
+import type {InputState} from "./types";
+
+const initialInputState: {
+    keyHandler: KeyHandler | null;
+    cursor: Cursor;
+} = {
+    keyHandler: null,
+    cursor: {
+        context: CursorContexts.NONE,
+    },
+};
+
+const inputReducer = function (
+    state: InputState = initialInputState,
+    action: Action,
+): InputState {
+    switch (action.type) {
+        case "SetKeyHandler":
+            return {
+                ...state,
+                keyHandler: action.keyHandler,
+            };
+
+        case "PressKey":
+            const keyConfig = KeyConfigs[action.key];
+            if (keyConfig.type !== KeyTypes.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
+                return {
+                    ...state,
+                    cursor: state.keyHandler?.(keyConfig.id),
+                };
+            }
+
+            // TODO(kevinb) get state from MathQuill and store it?
+            return state;
+
+        case "SetCursor":
+            return {
+                ...state,
+                cursor: action.cursor,
+            };
+
+        default:
+            return state;
+    }
+};
+
+export default inputReducer;

package/src/store/keypad-reducer.ts

@@ -0,0 +1,59 @@
+import KeyConfigs from "../data/key-configs";
+import Keys from "../data/keys";
+
+import {defaultKeypadType} from "./shared";
+
+import type {Action} from "./actions";
+import type {KeypadState} from "./types";
+
+const initialKeypadState = {
+    extraKeys: ["x", "y", Keys.THETA, Keys.PI],
+    keypadType: defaultKeypadType,
+    active: false,
+} as const;
+
+const keypadReducer = function (
+    state: KeypadState = initialKeypadState,
+    action: Action,
+): KeypadState {
+    switch (action.type) {
+        case "DismissKeypad":
+            return {
+                ...state,
+                active: false,
+            };
+
+        case "ActivateKeypad":
+            return {
+                ...state,
+                active: true,
+            };
+
+        case "ConfigureKeypad":
+            return {
+                ...state,
+                // Default `extraKeys` to the empty array.
+                extraKeys: [],
+                ...action.configuration,
+            };
+
+        case "PressKey":
+            const keyConfig = KeyConfigs[action.key];
+            // NOTE(charlie): Our keypad system operates by triggering key
+            // presses with key IDs in a dumb manner, such that the keys
+            // don't know what they can do--instead, the store is
+            // responsible for interpreting key presses and triggering the
+            // 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) {
+                return keypadReducer(state, {type: "DismissKeypad"});
+            }
+            return state;
+
+        default:
+            return state;
+    }
+};
+
+export default keypadReducer;