@khanacademy/math-input 15.1.0 → 16.1.0

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

@@ -1,184 +0,0 @@
-import type {ActiveNodesObj} from "../../types";
-
-/**
- * A state machine for the popover state. In particular, this class manages the
- * mapping of parent nodes to their children, and translates touch events that
- * traverse various nodes to actions that are conditioned on whether a popover
- * is present.
- */
-
-type Handlers = {
-    onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
-    onClick: (keyId: string, domNodeId: string, inPopover: boolean) => void;
-};
-
-class PopoverStateMachine {
-    handlers: Handlers;
-    popovers: Record<string, ReadonlyArray<string>>;
-    activePopover: string | null;
-
-    constructor(handlers) {
-        this.handlers = handlers;
-
-        this.activePopover = null;
-        this.popovers = {};
-    }
-
-    /**
-     * Register a popover container as containing a set of children.
-     *
-     * @param {string} id - the identifier of the popover container
-     * @param {string[]} childIds - the identifiers of the nodes contained in
-     *                              the popover container
-     */
-    registerPopover(id, childIds) {
-        this.popovers[id] = childIds;
-    }
-
-    /**
-     * Unregister a popover container.
-     *
-     * @param {string} id - the identifier of the popover container to
-     *                      unregister
-     */
-    unregisterPopover(id) {
-        delete this.popovers[id];
-    }
-
-    /**
-     * @returns {boolean} - whether a popover is active and visible
-     */
-    isPopoverVisible() {
-        return this.activePopover != null;
-    }
-
-    /**
-     * Blur the active nodes.
-     */
-    onBlur() {
-        this.activePopover = null;
-        this.handlers.onActiveNodesChanged({
-            popover: null,
-            focus: null,
-        });
-    }
-
-    /**
-     * Handle a focus event on the node with the given identifier.
-     *
-     * @param {string} id - the identifier of the node that was focused
-     */
-    onFocus(id) {
-        if (this.activePopover) {
-            // If we have a popover that is currently active, we focus this
-            // node if it's in the popover, and remove any highlight otherwise.
-            if (this._isNodeInsidePopover(this.activePopover, id)) {
-                this.handlers.onActiveNodesChanged({
-                    popover: {
-                        parentId: this.activePopover,
-                        childIds: this.popovers[this.activePopover],
-                    },
-                    focus: id,
-                });
-            } else {
-                this.handlers.onActiveNodesChanged({
-                    popover: {
-                        parentId: this.activePopover,
-                        childIds: this.popovers[this.activePopover],
-                    },
-                    focus: null,
-                });
-            }
-        } else {
-            this.activePopover = null;
-            this.handlers.onActiveNodesChanged({
-                popover: null,
-                focus: id,
-            });
-        }
-    }
-
-    /**
-     * Handle a long press event on the node with the given identifier.
-     *
-     * @param {string} id - the identifier of the node that was long-pressed
-     */
-    onLongPress(id) {
-        // We only care about long presses if they occur on a popover, and we
-        // don't already have a popover active.
-        if (!this.activePopover && this.popovers[id]) {
-            // NOTE(charlie): There's an assumption here that focusing the
-            // first child is the correct behavior for a newly focused popover.
-            // This relies on the fact that the children are rendered
-            // bottom-up. If that rendering changes, this logic will need to
-            // change as well.
-            this.activePopover = id;
-            this.handlers.onActiveNodesChanged({
-                popover: {
-                    parentId: id,
-                    childIds: this.popovers[id],
-                },
-                focus: this._defaultNodeForPopover(this.activePopover),
-            });
-        }
-    }
-
-    /**
-     * Handle the trigger (click or hold) of the node with the given identifier.
-     *
-     * @param {string} id - the identifier of the node that was triggered
-     */
-    onTrigger(id) {
-        this.handlers.onClick(id, id, false);
-    }
-
-    /**
-     * Handle a touch-end event on the node with the given identifier.
-     *
-     * @param {string} id - the identifier of the node over which the touch
-     *                      ended
-     */
-    onTouchEnd(id) {
-        const inPopover = !!this.activePopover;
-        if (inPopover) {
-            // If we have a popover that is currently active, we trigger a
-            // click on this node if and only if it's in the popover, with the
-            // exception that, if the node passed back _is_ the active popover,
-            // then we trigger its default node. This latter case should only
-            // be triggered if the user were to tap down on a popover-enabled
-            // node, hold for long enough for the popover to appear, and then
-            // release without ever moving their finger, in which case, the
-            // underlying gesture system would have no idea that the popover's
-            // first child node was now focused.
-            if (this._isNodeInsidePopover(this.activePopover, id)) {
-                this.handlers.onClick(id, id, inPopover);
-            } else if (this.activePopover === id) {
-                const keyId = this._defaultNodeForPopover(id);
-                this.handlers.onClick(keyId, keyId, inPopover);
-            }
-        } else if (this.popovers[id]) {
-            // Otherwise, if the node is itself a popover revealer, trigger the
-            // clicking of its default node, but pass back the popover node ID
-            // for layout purposes.
-            const keyId = this._defaultNodeForPopover(id);
-            const domNodeId = id;
-            this.handlers.onClick(keyId, domNodeId, inPopover);
-        } else if (id != null) {
-            // Finally, if we have no active popover, and we touched up over a
-            // valid key, trigger a click.
-            this.onTrigger(id);
-        }
-
-        this.onBlur();
-    }
-
-    _isNodeInsidePopover(popover, id) {
-        return this.popovers[popover].includes(id);
-    }
-
-    _defaultNodeForPopover(popover) {
-        return this.popovers[popover][0];
-    }
-}
-
-export default PopoverStateMachine;

package/src/components/keypad-legacy/provided-keypad.tsx

@@ -1,136 +0,0 @@
-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 type {
-    Cursor,
-    KeypadConfiguration,
-    KeyHandler,
-    KeypadAPI,
-} from "../../types";
-import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-type Props = {
-    setKeypadActive: (keypadActive: boolean) => void;
-    keypadActive: boolean;
-    onElementMounted?: (arg1: any) => void;
-    onDismiss?: () => void;
-    style?: StyleType;
-
-    onAnalyticsEvent: AnalyticsEventHandlerFn;
-};
-
-class ProvidedKeypad extends React.Component<Props> implements KeypadAPI {
-    store: any;
-
-    constructor(props) {
-        super(props);
-        this.store = createStore();
-    }
-
-    componentDidUpdate(prevProps) {
-        if (this.props.keypadActive && !prevProps.keypadActive) {
-            this.store.dispatch(activateKeypad());
-        }
-
-        if (!this.props.keypadActive && prevProps.keypadActive) {
-            this.store.dispatch(dismissKeypad());
-        }
-    }
-
-    activate: () => void = () => {
-        this.props.setKeypadActive(true);
-    };
-
-    dismiss: () => void = () => {
-        this.props.setKeypadActive(false);
-    };
-
-    configure: (configuration: KeypadConfiguration, cb: () => void) => void = (
-        configuration,
-        cb,
-    ) => {
-        this.store.dispatch(configureKeypad(configuration));
-
-        // HACK(charlie): In Perseus, triggering a focus causes the keypad to
-        // animate into view and re-configure. We'd like to provide the option
-        // to re-render the re-configured keypad before animating it into view,
-        // to avoid jank in the animation. As such, we support passing a
-        // callback into `configureKeypad`. However, implementing this properly
-        // would require middleware, etc., so we just hack it on with
-        // `setTimeout` for now.
-        setTimeout(() => cb && cb());
-    };
-
-    setCursor: (cursor: Cursor) => void = (cursor) => {
-        this.store.dispatch(setCursor(cursor));
-    };
-
-    setKeyHandler: (keyHandler: KeyHandler) => void = (keyHandler) => {
-        this.store.dispatch(setKeyHandler(keyHandler));
-    };
-
-    getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode> = () => {
-        return ReactDOM.findDOMNode(this);
-    };
-
-    onElementMounted: (element: any) => void = (element) => {
-        this.props.onAnalyticsEvent({
-            type: "math-input:keypad-opened",
-            payload: {
-                virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1",
-            },
-        });
-
-        // Append the dispatch methods that we want to expose
-        // externally to the returned React element.
-        const elementWithDispatchMethods = {
-            ...element,
-            activate: this.activate,
-            dismiss: this.dismiss,
-            configure: this.configure,
-            setCursor: this.setCursor,
-            setKeyHandler: this.setKeyHandler,
-            getDOMNode: this.getDOMNode,
-        } as const;
-        this.props.onElementMounted?.(elementWithDispatchMethods);
-    };
-
-    onDismiss: () => void = () => {
-        this.props.onAnalyticsEvent({
-            type: "math-input:keypad-closed",
-            payload: {
-                virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1",
-            },
-        });
-
-        this.props.onDismiss?.();
-    };
-
-    render(): React.ReactNode {
-        const {style} = this.props;
-
-        return (
-            <Provider store={this.store}>
-                <KeypadContainer
-                    onElementMounted={this.onElementMounted}
-                    onDismiss={this.onDismiss}
-                    style={style}
-                />
-            </Provider>
-        );
-    }
-}
-
-export default ProvidedKeypad;

package/src/components/keypad-legacy/store/actions.ts

@@ -1,155 +0,0 @@
-import type Key from "../../../data/keys";
-import type {
-    Bound,
-    KeypadConfiguration,
-    KeyHandler,
-    Cursor,
-    ActiveNodesObj,
-} from "../../../types";
-
-// naming convention: verb + noun
-// the noun should be one of the other properties in the object that's
-// being dispatched
-
-type DismissKeypadAction = {
-    type: "DismissKeypad";
-};
-
-export const dismissKeypad = (): DismissKeypadAction => {
-    return {
-        type: "DismissKeypad",
-    };
-};
-
-type ActivateKeypadAction = {
-    type: "ActivateKeypad";
-};
-
-export const activateKeypad = (): ActivateKeypadAction => {
-    return {
-        type: "ActivateKeypad",
-    };
-};
-
-/**
- * Configure the keypad with the provided configuration parameters.
- */
-type ConfigureKeypadAction = {
-    type: "ConfigureKeypad";
-    configuration: KeypadConfiguration;
-};
-
-export const configureKeypad = (
-    configuration: KeypadConfiguration,
-): ConfigureKeypadAction => {
-    return {
-        type: "ConfigureKeypad",
-        configuration,
-    };
-};
-
-type SetPageSizeAction = {
-    type: "SetPageSize";
-    pageWidth: number;
-    pageHeight: number;
-    containerWidth: number;
-    containerHeight: number;
-};
-
-export const setPageSize = (
-    pageWidth: number,
-    pageHeight: number,
-    containerWidth: number,
-    containerHeight: number,
-): SetPageSizeAction => {
-    return {
-        type: "SetPageSize",
-        pageWidth,
-        pageHeight,
-        containerWidth,
-        containerHeight,
-    };
-};
-
-type RemoveEchoAction = {
-    type: "RemoveEcho";
-    animationId: string;
-};
-
-export const removeEcho = (animationId: string): RemoveEchoAction => {
-    return {
-        type: "RemoveEcho",
-        animationId,
-    };
-};
-
-// Input-related actions.
-type SetKeyHandlerAction = {
-    type: "SetKeyHandler";
-    keyHandler: KeyHandler;
-};
-
-export const setKeyHandler = (keyHandler: KeyHandler): SetKeyHandlerAction => {
-    return {
-        type: "SetKeyHandler",
-        keyHandler,
-    };
-};
-
-type SetCursorAction = {
-    type: "SetCursor";
-    cursor: Cursor;
-};
-
-export const setCursor = (cursor: Cursor): SetCursorAction => {
-    return {
-        type: "SetCursor",
-        cursor,
-    };
-};
-
-// Gesture actions
-type SetActiveNodesAction = {
-    type: "SetActiveNodes";
-    activeNodes: any;
-};
-
-export const setActiveNodes = (
-    activeNodes: ActiveNodesObj,
-): SetActiveNodesAction => {
-    return {
-        type: "SetActiveNodes",
-        activeNodes,
-    };
-};
-
-type PressKeyAction = {
-    type: "PressKey";
-    key: Key;
-    initialBounds: Bound;
-    inPopover: boolean;
-};
-
-export const pressKey = (
-    key: Key,
-    initialBounds: Bound,
-    inPopover: any,
-): PressKeyAction => {
-    return {
-        type: "PressKey",
-        key,
-        initialBounds,
-        inPopover,
-    };
-};
-
-export type Action =
-    | DismissKeypadAction
-    | ActivateKeypadAction
-    | ConfigureKeypadAction
-    | SetPageSizeAction
-    | RemoveEchoAction
-    | SetKeyHandlerAction
-    | SetCursorAction
-    | SetActiveNodesAction
-    | PressKeyAction;

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

@@ -1,57 +0,0 @@
-import KeyConfigs from "../../../data/key-configs";
-import {EchoAnimationType} from "../../../enums";
-
-import type {Action} from "./actions";
-import type {EchoState} from "./types";
-
-// 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: EchoState = initialEchoState,
-    action: Action,
-): EchoState {
-    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 === "VALUE" || keyConfig.type === "OPERATOR") {
-                return {
-                    ...state,
-                    echoes: [
-                        ...state.echoes,
-                        {
-                            animationId: "" + _lastAnimationId++,
-                            animationType: action.inPopover
-                                ? EchoAnimationType.LONG_FADE_ONLY
-                                : EchoAnimationType.FADE_ONLY,
-                            id: keyConfig.id,
-                            initialBounds: action.initialBounds,
-                        },
-                    ],
-                };
-            }
-            return state;
-
-        case "RemoveEcho":
-            const remainingEchoes = state.echoes.filter((echo) => {
-                return echo.animationId !== action.animationId;
-            });
-            return {
-                ...state,
-                echoes: remainingEchoes,
-            };
-
-        default:
-            return state;
-    }
-};
-
-export default echoReducer;

package/src/components/keypad-legacy/store/index.ts

@@ -1,110 +0,0 @@
-import * as Redux from "redux";
-
-import GestureManager from "../gesture-manager";
-
-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 {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,
-            },
-            {
-                onActiveNodesChanged: (activeNodes: ActiveNodesObj) => {
-                    store.dispatch(setActiveNodes(activeNodes));
-                },
-                onClick: (
-                    key: Key,
-                    layoutProps: LayoutProps,
-                    inPopover: boolean,
-                ) => {
-                    store.dispatch(
-                        pressKey(key, layoutProps.initialBounds, inPopover),
-                    );
-                },
-            },
-            [],
-            ["BACKSPACE", "UP", "RIGHT", "DOWN", "LEFT"],
-        );
-    };
-
-    const initialGestureState = {
-        popover: null,
-        focus: null,
-        gestureManager: createGestureManager(
-            keypadForType[defaultKeypadType].numPages > 1,
-        ),
-    } as const;
-
-    const gestureReducer = function (
-        state: GestureState = initialGestureState,
-        action: Action,
-    ): GestureState {
-        switch (action.type) {
-            case "DismissKeypad":
-                // NOTE(charlie): In the past, we enforced the "gesture manager
-                // will not receive any events when the keypad is hidden"
-                // assumption by assuming that the keypad would be hidden when
-                // dismissed and, as such, that none of its managed DOM nodes
-                // would be able to receive touch events. However, on mobile
-                // Safari, we're seeing that some of the keys receive touch
-                // events even when off-screen, inexplicably. So, to guard
-                // against that bug and make the contract explicit, we enable
-                // and disable event tracking on activation and dismissal.
-                state.gestureManager.disableEventTracking();
-                return state;
-
-            case "ActivateKeypad":
-                state.gestureManager.enableEventTracking();
-                return state;
-
-            case "SetActiveNodes":
-                return {
-                    ...state,
-                    ...action.activeNodes,
-                };
-
-            case "ConfigureKeypad":
-                const {keypadType} = action.configuration;
-                const {numPages} = keypadForType[keypadType];
-                const swipeEnabled = numPages > 1;
-                return {
-                    popover: null,
-                    focus: null,
-                    gestureManager: createGestureManager(swipeEnabled),
-                };
-
-            default:
-                return state;
-        }
-    };
-
-    const reducer = Redux.combineReducers({
-        input: inputReducer,
-        keypad: keypadReducer,
-        gestures: gestureReducer,
-        echoes: echoReducer,
-        layout: layoutReducer,
-    });
-
-    // TODO(charlie): This non-inlined return is necessary so as to allow the
-    // gesture manager to dispatch actions on the store in its callbacks. We
-    // should come up with a better pattern to remove the two-way dependency.
-    // eslint-disable-next-line import/no-deprecated
-    const store = Redux.createStore(reducer);
-
-    return store;
-};

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

@@ -1,55 +0,0 @@
-import KeyConfigs from "../../../data/key-configs";
-import {CursorContext} from "../../input/cursor-contexts";
-
-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: CursorContext.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 !== "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;