@khanacademy/math-input 15.1.0 → 16.0.0

package/src/components/keypad-legacy/__tests__/node-manager.test.ts

@@ -1,89 +0,0 @@
-import NodeManager from "../node-manager";
-
-describe("NodeManager", () => {
-    let nodeManager;
-
-    beforeEach(() => {
-        nodeManager = new NodeManager();
-    });
-
-    it("should register a single node with no children", () => {
-        const nodeId = "1";
-        nodeManager.registerDOMNode(nodeId, {}, []);
-
-        expect(nodeManager._nodesById[nodeId]).toBeTruthy();
-        expect(nodeManager._orderedIds.includes(nodeId)).toBeTruthy();
-    });
-
-    it("should register a single node with children", () => {
-        const nodeId = "1";
-        const childNodeIds = ["2", "3"];
-        nodeManager.registerDOMNode(nodeId, {}, childNodeIds);
-
-        expect(nodeManager._orderedIds.includes(nodeId)).toBeTruthy();
-        expect(nodeManager._nodesById[nodeId]).toBeTruthy();
-
-        for (const childId of childNodeIds) {
-            // The children should appear in the list of ordered IDs, but not
-            // in the list of registered nodes.
-            expect(!nodeManager._nodesById[childId]).toBeTruthy();
-            expect(nodeManager._orderedIds.includes(childId)).toBeTruthy();
-        }
-    });
-
-    it("should order children ahead of their parents", () => {
-        const nodeId = "1";
-        const childNodeIds = ["2", "3"];
-        nodeManager.registerDOMNode(nodeId, {}, childNodeIds);
-
-        const parentIndex = nodeManager._orderedIds.indexOf(nodeId);
-        for (const childId of childNodeIds) {
-            // The children should appear ahead of the parent in the ordered
-            // list.
-            const childIndex = nodeManager._orderedIds.indexOf(childId);
-            expect(childIndex < parentIndex).toBeTruthy();
-        }
-    });
-
-    it("should de-dupe the list of node IDs", () => {
-        const nodeId = "1";
-        const childNodeId = "2";
-
-        // Register both nodes.
-        nodeManager.registerDOMNode(nodeId, {}, [childNodeId]);
-        nodeManager.registerDOMNode(childNodeId, {}, []);
-
-        // Verify that both were added to the list of DOM nodes.
-        for (const id of [nodeId, childNodeId]) {
-            expect(nodeManager._nodesById[id]).toBeTruthy();
-        }
-
-        // Verify that the child is ahead of the parent, and only appears once.
-        expect(nodeManager._orderedIds).toStrictEqual([childNodeId, nodeId]);
-    });
-
-    it("should handle multiple sets of children", () => {
-        const firstNodeId = "1";
-        const firstNodeChildIds = ["2", "3"];
-        const secondNodeId = "4";
-        const secondNodeChildIds = ["5", "6"];
-        const nodeChildIdPairs = [
-            [firstNodeId, firstNodeChildIds],
-            [secondNodeId, secondNodeChildIds],
-        ];
-
-        for (const [nodeId, childNodeIds] of nodeChildIdPairs) {
-            nodeManager.registerDOMNode(nodeId, {}, childNodeIds);
-        }
-
-        for (const [nodeId, childNodeIds] of nodeChildIdPairs) {
-            const parentIndex = nodeManager._orderedIds.indexOf(nodeId);
-            for (const childId of childNodeIds) {
-                // The children should appear ahead of the parent in the
-                // ordered list.
-                const childIndex = nodeManager._orderedIds.indexOf(childId);
-                expect(childIndex < parentIndex).toBeTruthy();
-            }
-        }
-    });
-});

package/src/components/keypad-legacy/compute-layout-parameters.ts

@@ -1,205 +0,0 @@
-/**
- * An algorithm for computing the appropriate layout parameters for the keypad,
- * including the size of the buttons and whether or not to render fullscreen,
- * taking into account a number of factors including the size of the screen, the
- * orientation of the screen, the presence of browser chrome, the presence of
- * other exercise-related chrome, the size of the input box, the parameters that
- * define the keypad (i.e., the number of rows, columns, and pages), and so
- * forth.
- *
- * The computations herein make some strong assumptions about the sizes of
- * various other elements and the situations under which they will be visible
- * (e.g., browser chrome). However, this is just a heuristic--it's not crucial
- * that our buttons are sized in a pixel-perfect manner, but rather, that we
- * make a balanced use of space.
- *
- * Note that one goal of the algorithm is to avoid resizing the keypad in the
- * face of dynamic browser chrome. In order to avoid that awkwardness, we tend
- * to be conservative in our measurements and make things smaller than they
- * might need to be.
- */
-
-import {DeviceOrientation, LayoutMode} from "../../enums";
-import {
-    pageIndicatorHeightPx,
-    toolbarHeightPx,
-    navigationPadWidthPx,
-    innerBorderWidthPx,
-} from "../common-style";
-
-import type {GridDimensions, WidthHeight} from "./store/types";
-
-const minButtonHeight = 48;
-const maxButtonSize = 64;
-const minSpaceAboveKeypad = 32;
-
-// These values are taken from an iPhone 5, but should be consistent with the
-// iPhone 4 as well. Regardless, these are meant to be representative of the
-// possible types of browser chrome that could appear in various context, rather
-// than pixel-perfect for every device.
-const safariNavBarWhenShrunk = 44;
-const safariNavBarWhenExpanded = 64;
-const safariToolbar = 44;
-
-// In mobile Safari, the browser chrome is completely hidden in landscape,
-// though a shrunken navbar and full-sized toolbar on scroll. In portrait, the
-// shrunken navbar is always visible, but expands on scroll (and the toolbar
-// appears as well).
-const maxLandscapeBrowserChrome = safariNavBarWhenShrunk + safariToolbar;
-const maxPortraitBrowserChrome =
-    safariToolbar + (safariNavBarWhenExpanded - safariNavBarWhenShrunk);
-
-// This represents the 'worst case' aspect ratio that we care about (for
-// portrait layouts). It's taken from the iPhone 4. The height is computed by
-// taking the height of the device and removing the persistent, shrunken navbar.
-// (We don't need to account for the expanded navbar, since we include the
-// difference when reserving space above the keypad.)
-const worstCaseAspectRatio = 320 / (480 - safariNavBarWhenShrunk);
-
-type ComputedLayoutProperty = {
-    buttonDimensions: WidthHeight;
-    layoutMode: LayoutMode;
-};
-
-function getButtonWidth(
-    gridDimensions: GridDimensions,
-    containerDimensions: WidthHeight,
-    navigationPadEnabled: boolean,
-    paginationEnabled: boolean,
-    isLandscape: boolean,
-): number {
-    const {numColumns, numPages} = gridDimensions;
-
-    // We can use the container width as the effective width.
-    let effectiveWidth = containerDimensions.width;
-    if (navigationPadEnabled) {
-        effectiveWidth -= navigationPadWidthPx;
-    }
-
-    let buttonWidthPx;
-    if (numPages > 1) {
-        const effectiveNumColumns = paginationEnabled
-            ? numColumns
-            : numColumns * numPages;
-        buttonWidthPx = effectiveWidth / effectiveNumColumns;
-    } else {
-        buttonWidthPx = isLandscape
-            ? maxButtonSize
-            : effectiveWidth / numColumns;
-    }
-
-    return buttonWidthPx;
-}
-
-function getButtonHeight(
-    gridDimensions: GridDimensions,
-    pageDimensions: WidthHeight,
-    containerDimensions: WidthHeight,
-    paginationEnabled: boolean,
-    toolbarEnabled: boolean,
-    isLandscape: boolean,
-) {
-    const {numMaxVisibleRows} = gridDimensions;
-
-    // In many cases, the browser chrome will already have been factored
-    // into `pageHeight`. But we have no way of knowing if that's
-    // the case or not. As such, we take a conservative approach and
-    // assume that the chrome is _never_ included in `pageHeight`.
-    const browserChromeHeight = isLandscape
-        ? maxLandscapeBrowserChrome
-        : maxPortraitBrowserChrome;
-
-    // Count up all the space that we need to reserve on the page.
-    // Namely, we need to account for:
-    //  1. Space between the keypad and the top of the page.
-    //  2. The presence of the exercise toolbar.
-    //  3. The presence of the view pager indicator.
-    //  4. Any browser chrome that may appear later.
-    const reservedSpace =
-        minSpaceAboveKeypad +
-        browserChromeHeight +
-        (toolbarEnabled ? toolbarHeightPx : 0) +
-        (paginationEnabled ? pageIndicatorHeightPx : 0);
-
-    // For the height, we take
-    // another conservative measure when in portrait by assuming that
-    // the device has the worst possible aspect ratio. In other words,
-    // we ignore the device height in portrait and assume the worst.
-    // This prevents the keypad from changing size when browser chrome
-    // appears and disappears.
-    const effectiveHeight = isLandscape
-        ? pageDimensions.height
-        : containerDimensions.width / worstCaseAspectRatio;
-
-    // In computing the
-    // height, accommodate for the maximum number of rows that will ever be
-    // visible (since the toggling of popovers can increase the number of
-    // visible rows).
-    const maxKeypadHeight = effectiveHeight - reservedSpace;
-
-    const buttonHeightPx = Math.max(
-        Math.min(maxKeypadHeight / numMaxVisibleRows, maxButtonSize),
-        minButtonHeight,
-    );
-
-    return buttonHeightPx;
-}
-
-export const computeLayoutParameters = (
-    gridDimensions: GridDimensions,
-    pageDimensions: WidthHeight,
-    containerDimensions: WidthHeight,
-    deviceOrientation: DeviceOrientation,
-    navigationPadEnabled: boolean,
-    paginationEnabled: boolean,
-    toolbarEnabled: boolean,
-): ComputedLayoutProperty => {
-    const {numColumns, numPages} = gridDimensions;
-
-    // First, compute some values that will be used in multiple computations.
-    const effectiveNumColumns = paginationEnabled
-        ? numColumns
-        : numColumns * numPages;
-
-    // Then, compute the button dimensions based on the provided parameters.
-    const isLandscape = deviceOrientation === DeviceOrientation.LANDSCAPE;
-
-    const buttonWidth = getButtonWidth(
-        gridDimensions,
-        containerDimensions,
-        navigationPadEnabled,
-        paginationEnabled,
-        isLandscape,
-    );
-
-    const buttonHeight = getButtonHeight(
-        gridDimensions,
-        pageDimensions,
-        containerDimensions,
-        paginationEnabled,
-        toolbarEnabled,
-        isLandscape,
-    );
-
-    const buttonDimensions = {
-        width: buttonWidth,
-        height: buttonHeight,
-    };
-
-    // Finally, determine whether the keypad should be rendered in the
-    // fullscreen layout by determining its resultant width.
-    const numSeparators =
-        (navigationPadEnabled ? 1 : 0) +
-        (!paginationEnabled ? numPages - 1 : 0);
-    const keypadWidth =
-        effectiveNumColumns * buttonDimensions.width +
-        (navigationPadEnabled ? navigationPadWidthPx : 0) +
-        numSeparators * innerBorderWidthPx;
-    return {
-        buttonDimensions,
-        layoutMode:
-            keypadWidth >= containerDimensions.width
-                ? LayoutMode.FULLSCREEN
-                : LayoutMode.COMPACT,
-    };
-};

package/src/components/keypad-legacy/corner-decal.tsx

@@ -1,56 +0,0 @@
-/**
- * A small triangular decal to sit in the corner of a parent component.
- */
-
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-import {View} from "../../fake-react-native-web/index";
-import {offBlack} from "../common-style";
-
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-type Props = {
-    style: StyleType;
-};
-
-class CornerDecal extends React.Component<Props> {
-    render() {
-        const {style} = this.props;
-
-        const containerStyle = [
-            styles.container,
-            ...(Array.isArray(style) ? style : [style]),
-        ];
-
-        return (
-            <View style={containerStyle}>
-                <svg
-                    width={triangleSizePx}
-                    height={triangleSizePx}
-                    viewBox="4 4 8 8"
-                >
-                    <path
-                        fill={offBlack}
-                        opacity="0.3"
-                        d="M5.29289322,5.70710678 L10.2928932,10.7071068 C10.9228581,11.3370716 12,10.8909049 12,10 L12,5 C12,4.44771525 11.5522847,4 11,4 L6,4 C5.10909515,4 4.66292836,5.07714192 5.29289322,5.70710678 Z" // @Nolint
-                    />
-                </svg>
-            </View>
-        );
-    }
-}
-
-const triangleSizePx = 7;
-
-const styles = StyleSheet.create({
-    container: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        width: triangleSizePx,
-        height: triangleSizePx,
-    },
-});
-
-export default CornerDecal;

package/src/components/keypad-legacy/echo-manager.tsx

@@ -1,152 +0,0 @@
-/**
- * A component that renders and animates the selection state effect effect.
- */
-
-import * as React from "react";
-import {TransitionGroup, CSSTransition} from "react-transition-group";
-
-import KeyConfigs from "../../data/key-configs";
-import {EchoAnimationType} from "../../enums";
-
-import KeypadButton from "./keypad-button";
-import * as zIndexes from "./z-indexes";
-
-import type Key from "../../data/keys";
-import type {Bound, Echo as EchoType} from "../../types";
-
-type EchoProps = {
-    animationDurationMs: number;
-    id: Key;
-    initialBounds: Bound;
-    onAnimationFinish: () => void;
-};
-
-class Echo extends React.Component<EchoProps> {
-    componentDidMount() {
-        // NOTE(charlie): This is somewhat unfortunate, as the component is
-        // encoding information about its own animation, of which it should be
-        // ignorant. However, there doesn't seem to be a cleaner way to make
-        // this happen, and at least here, all the animation context is
-        // colocated in this file.
-        const {animationDurationMs, onAnimationFinish} = this.props;
-        setTimeout(() => onAnimationFinish(), animationDurationMs);
-    }
-
-    render() {
-        const {id, initialBounds} = this.props;
-        const {icon} = KeyConfigs[id];
-
-        const containerStyle: any = {
-            zIndex: zIndexes.echo,
-            position: "absolute",
-            pointerEvents: "none",
-            ...initialBounds,
-        };
-
-        // NOTE(charlie): In some browsers, Aphrodite doesn't seem to flush its
-        // styles quickly enough, so there's a flickering effect on the first
-        // animation. Thus, it's much safer to do the styles purely inline.
-        // <View> makes this difficult because some of its defaults, which are
-        // applied via StyleSheet, will override our inlines.
-        return (
-            <div style={containerStyle}>
-                <KeypadButton icon={icon} type={"ECHO"} />
-            </div>
-        );
-    }
-}
-
-type EchoManagerProps = {
-    echoes: ReadonlyArray<EchoType>;
-    onAnimationFinish?: (animationId: string) => void;
-};
-
-class EchoManager extends React.Component<EchoManagerProps> {
-    _animationConfigForType = (animationType) => {
-        // NOTE(charlie): These must be kept in sync with the transition
-        // durations and classnames specified in echo.css.
-        let animationDurationMs;
-        let animationTransitionName;
-
-        switch (animationType) {
-            case EchoAnimationType.SLIDE_AND_FADE:
-                animationDurationMs = 400;
-                animationTransitionName = "echo-slide-and-fade";
-                break;
-
-            case EchoAnimationType.FADE_ONLY:
-                animationDurationMs = 300;
-                animationTransitionName = "echo-fade-only";
-                break;
-
-            case EchoAnimationType.LONG_FADE_ONLY:
-                animationDurationMs = 400;
-                animationTransitionName = "echo-long-fade-only";
-                break;
-
-            default:
-                throw new Error(
-                    `Invalid echo animation type: ${animationType}`,
-                );
-        }
-
-        return {
-            animationDurationMs,
-            animationTransitionName,
-        };
-    };
-
-    render() {
-        const {echoes, onAnimationFinish} = this.props;
-
-        return (
-            <span>
-                {Object.keys(EchoAnimationType).map((animationType) => {
-                    // Collect the relevant parameters for the animation type, and
-                    // filter for the appropriate echoes.
-                    const {animationDurationMs, animationTransitionName} =
-                        this._animationConfigForType(animationType);
-                    const echoesForType = echoes.filter((echo) => {
-                        return echo.animationType === animationType;
-                    });
-
-                    // TODO(charlie): Manage this animation with Aphrodite styles.
-                    // Right now, there's a bug in the autoprefixer that breaks CSS
-                    // transitions on mobile Safari.
-                    // See: https://github.com/Khan/aphrodite/issues/68.
-                    // As such, we have to do this with a stylesheet.
-                    return (
-                        <TransitionGroup key={animationType}>
-                            {echoesForType.map((echo) => {
-                                const {animationId} = echo;
-                                return (
-                                    <CSSTransition
-                                        classNames={animationTransitionName}
-                                        enter={true}
-                                        exit={false}
-                                        timeout={{
-                                            enter: animationDurationMs,
-                                        }}
-                                        key={animationId}
-                                    >
-                                        <Echo
-                                            animationDurationMs={
-                                                animationDurationMs
-                                            }
-                                            onAnimationFinish={() =>
-                                                onAnimationFinish?.(animationId)
-                                            }
-                                            {...echo}
-                                        />
-                                    </CSSTransition>
-                                );
-                            })}
-                        </TransitionGroup>
-                    );
-                })}
-            </span>
-        );
-    }
-}
-
-export default EchoManager;

package/src/components/keypad-legacy/empty-keypad-button.tsx

@@ -1,58 +0,0 @@
-/**
- * A keypad button containing no symbols and triggering no actions on click.
- */
-
-import * as React from "react";
-import {connect} from "react-redux";
-
-import KeyConfigs from "../../data/key-configs";
-
-import KeypadButton from "./keypad-button";
-
-import type GestureManager from "./gesture-manager";
-import type {State} from "./store/types";
-
-interface ReduxProps {
-    gestureManager: GestureManager;
-}
-
-class EmptyKeypadButton extends React.Component<ReduxProps> {
-    render() {
-        const {gestureManager, ...rest} = this.props;
-
-        // Register touch events on the button, but don't register its DOM node
-        // or compute focus state or anything like that. We want the gesture
-        // manager to know about touch events that start on empty buttons, but
-        // we don't need it to know about their DOM nodes, as it doesn't need
-        // to focus them or trigger presses.
-        return (
-            <KeypadButton
-                onTouchStart={(evt: React.TouchEvent<HTMLDivElement>) =>
-                    gestureManager.onTouchStart(evt)
-                }
-                onTouchEnd={(evt: React.TouchEvent<HTMLDivElement>) =>
-                    gestureManager.onTouchEnd(evt)
-                }
-                onTouchMove={(evt: React.TouchEvent<HTMLDivElement>) =>
-                    gestureManager.onTouchMove(evt)
-                }
-                onTouchCancel={(evt: React.TouchEvent<HTMLDivElement>) =>
-                    gestureManager.onTouchCancel(evt)
-                }
-                {...KeyConfigs.NOOP}
-                {...rest}
-            />
-        );
-    }
-}
-
-const mapStateToProps = (state: State): ReduxProps => {
-    const {gestures} = state;
-    return {
-        gestureManager: gestures.gestureManager,
-    };
-};
-
-export default connect(mapStateToProps, null, null, {forwardRef: true})(
-    EmptyKeypadButton,
-);