@khanacademy/math-input 15.0.1 → 16.0.0

package/src/components/keypad-legacy/multi-symbol-grid.tsx

@@ -1,182 +0,0 @@
-/**
- * A grid of symbols, rendered as text and positioned based on the number of
- * symbols provided. Up to four symbols will be shown.
- */
-
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-import {IconType} from "../../enums";
-import {View} from "../../fake-react-native-web/index";
-import {iconSizeHeightPx, iconSizeWidthPx} from "../common-style";
-
-import Icon from "./icon";
-import Styles from "./styles";
-
-import type {IconConfig} from "../../types";
-
-const {row, column, centered, fullWidth} = Styles;
-
-type Props = {
-    focused: boolean;
-    icons: ReadonlyArray<IconConfig>;
-};
-
-class MultiSymbolGrid extends React.Component<Props> {
-    render() {
-        const {focused, icons} = this.props;
-
-        // Validate that we only received math-based icons. Right now, this
-        // component only supports math icons (and it should only be passed
-        // variables and Greek letters, which are always rendered as math).
-        // Supporting other types of icons is possible but would require
-        // some styles coercion and doesn't seem worthwhile right now.
-        icons.forEach((icon) => {
-            if (icon.type !== IconType.MATH) {
-                throw new Error(
-                    `Received invalid icon: type=${icon.type}, ` +
-                        `data=${icon.data}`,
-                );
-            }
-        });
-
-        if (icons.length === 1) {
-            return <Icon icon={icons[0]} focused={focused} />;
-        } else {
-            const primaryIconStyle = styles.base;
-            const secondaryIconStyle = [styles.base, styles.secondary];
-
-            if (icons.length === 2) {
-                return (
-                    <View style={[row, styles.size]}>
-                        <View
-                            style={[
-                                column,
-                                centered,
-                                fullWidth,
-                                styles.middleLeft,
-                            ]}
-                        >
-                            <Icon
-                                style={primaryIconStyle}
-                                icon={icons[0]}
-                                focused={focused}
-                            />
-                        </View>
-                        <View
-                            style={[
-                                column,
-                                centered,
-                                fullWidth,
-                                styles.middleRight,
-                            ]}
-                        >
-                            <Icon
-                                style={secondaryIconStyle}
-                                icon={icons[1]}
-                                focused={focused}
-                            />
-                        </View>
-                    </View>
-                );
-            } else if (icons.length >= 3) {
-                return (
-                    <View style={[column, styles.size]}>
-                        <View style={row}>
-                            <View style={[centered, fullWidth, styles.topLeft]}>
-                                <Icon
-                                    style={primaryIconStyle}
-                                    icon={icons[0]}
-                                    focused={focused}
-                                />
-                            </View>
-                            <View
-                                style={[centered, fullWidth, styles.topRight]}
-                            >
-                                <Icon
-                                    style={secondaryIconStyle}
-                                    icon={icons[1]}
-                                    focused={focused}
-                                />
-                            </View>
-                        </View>
-                        <View style={row}>
-                            <View
-                                style={[centered, fullWidth, styles.bottomLeft]}
-                            >
-                                <Icon
-                                    style={secondaryIconStyle}
-                                    icon={icons[2]}
-                                    focused={focused}
-                                />
-                            </View>
-                            <View
-                                style={[
-                                    centered,
-                                    fullWidth,
-                                    styles.bottomRight,
-                                ]}
-                            >
-                                {icons[3] && (
-                                    <Icon
-                                        style={secondaryIconStyle}
-                                        icon={icons[3]}
-                                        focused={focused}
-                                    />
-                                )}
-                            </View>
-                        </View>
-                    </View>
-                );
-            }
-        }
-
-        throw new Error(`Invalid number of icons: ${icons.length}`);
-    }
-}
-
-const verticalInsetPx = 2;
-const horizontalInsetPx = 4;
-
-const styles = StyleSheet.create({
-    size: {
-        height: iconSizeHeightPx,
-        width: iconSizeWidthPx,
-    },
-
-    // For the three- and four-icon layouts.
-    bottomLeft: {
-        marginBottom: verticalInsetPx,
-        marginLeft: horizontalInsetPx,
-    },
-    topLeft: {
-        marginTop: verticalInsetPx,
-        marginLeft: horizontalInsetPx,
-    },
-    topRight: {
-        marginTop: verticalInsetPx,
-        marginRight: horizontalInsetPx,
-    },
-    bottomRight: {
-        marginBottom: verticalInsetPx,
-        marginRight: horizontalInsetPx,
-    },
-
-    // For the two-icon layout.
-    middleLeft: {
-        marginLeft: horizontalInsetPx,
-    },
-    middleRight: {
-        marginRight: horizontalInsetPx,
-    },
-
-    base: {
-        fontSize: 18,
-    },
-
-    secondary: {
-        opacity: 0.3,
-    },
-});
-
-export default MultiSymbolGrid;

package/src/components/keypad-legacy/multi-symbol-popover.tsx

@@ -1,58 +0,0 @@
-/**
- * A popover that renders a set of keys floating above the page.
- */
-
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-import {BorderStyles} from "../../enums";
-import {View} from "../../fake-react-native-web/index";
-
-import TouchableKeypadButton from "./touchable-keypad-button";
-import * as zIndexes from "./z-indexes";
-
-import type {KeyConfig} from "../../types";
-
-type Prop = {
-    keys: ReadonlyArray<KeyConfig>;
-};
-
-class MultiSymbolPopover extends React.Component<Prop> {
-    render() {
-        const {keys} = this.props;
-
-        // TODO(charlie): We have to require this lazily because of a cyclic
-        // dependence in our components.
-        return (
-            <View style={styles.container}>
-                {keys.map((key) => {
-                    return (
-                        <TouchableKeypadButton
-                            keyConfig={key}
-                            borders={BorderStyles.NONE}
-                        />
-                    );
-                })}
-            </View>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: "column-reverse",
-        position: "relative",
-        width: "100%",
-        borderRadius: 2,
-        boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
-        zIndex: zIndexes.popover,
-    },
-
-    // eslint-disable-next-line react-native/no-unused-styles
-    popoverButton: {
-        backgroundColor: "#FFF",
-        borderWidth: 0,
-    },
-});
-
-export default MultiSymbolPopover;

package/src/components/keypad-legacy/navigation-pad.tsx

@@ -1,140 +0,0 @@
-/**
- * A component that renders a navigation pad, which consists of an arrow for
- * each possible direction.
- */
-
-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 {
-    navigationPadWidthPx,
-    controlGrey,
-    valueGrey,
-    offBlack16,
-} from "../common-style";
-
-import Styles from "./styles";
-import TouchableKeypadButton from "./touchable-keypad-button";
-
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-const {row, column, centered, stretch, roundedTopLeft} = Styles;
-
-type Props = {
-    roundTopLeft: boolean;
-    style: StyleType;
-};
-
-class NavigationPad extends React.Component<Props> {
-    render() {
-        // TODO(charlie): Disable the navigational arrows depending on the
-        // cursor context.
-        const {roundTopLeft, style} = this.props;
-
-        const containerStyle = [
-            column,
-            centered,
-            styles.container,
-            roundTopLeft && roundedTopLeft,
-            ...(Array.isArray(style) ? style : [style]),
-        ];
-
-        return (
-            <View style={containerStyle}>
-                <View style={[row, centered]}>
-                    <TouchableKeypadButton
-                        keyConfig={KeyConfigs.UP}
-                        borders={BorderStyles.NONE}
-                        style={[styles.navigationKey, styles.topArrow]}
-                    />
-                </View>
-                <View style={[row, centered, stretch]}>
-                    <TouchableKeypadButton
-                        keyConfig={KeyConfigs.LEFT}
-                        borders={BorderStyles.NONE}
-                        style={[styles.navigationKey, styles.leftArrow]}
-                    />
-                    <View style={styles.horizontalSpacer} />
-                    <TouchableKeypadButton
-                        keyConfig={KeyConfigs.RIGHT}
-                        borders={BorderStyles.NONE}
-                        style={[styles.navigationKey, styles.rightArrow]}
-                    />
-                </View>
-                <View style={[row, centered]}>
-                    <TouchableKeypadButton
-                        keyConfig={KeyConfigs.DOWN}
-                        borders={BorderStyles.NONE}
-                        style={[styles.navigationKey, styles.bottomArrow]}
-                    />
-                </View>
-            </View>
-        );
-    }
-}
-
-const buttonSizePx = 48;
-const borderRadiusPx = 4;
-const borderWidthPx = 1;
-
-const styles = StyleSheet.create({
-    container: {
-        backgroundColor: controlGrey,
-        width: navigationPadWidthPx,
-    },
-
-    navigationKey: {
-        borderColor: offBlack16,
-        backgroundColor: valueGrey,
-        width: buttonSizePx,
-        height: buttonSizePx,
-
-        // Override the default box-sizing so that our buttons are
-        // `buttonSizePx` exclusive of their borders.
-        boxSizing: "content-box",
-    },
-
-    topArrow: {
-        borderTopWidth: borderWidthPx,
-        borderLeftWidth: borderWidthPx,
-        borderRightWidth: borderWidthPx,
-        borderTopLeftRadius: borderRadiusPx,
-        borderTopRightRadius: borderRadiusPx,
-    },
-
-    rightArrow: {
-        borderTopWidth: borderWidthPx,
-        borderRightWidth: borderWidthPx,
-        borderBottomWidth: borderWidthPx,
-        borderTopRightRadius: borderRadiusPx,
-        borderBottomRightRadius: borderRadiusPx,
-    },
-
-    bottomArrow: {
-        borderBottomWidth: borderWidthPx,
-        borderLeftWidth: borderWidthPx,
-        borderRightWidth: borderWidthPx,
-        borderBottomLeftRadius: borderRadiusPx,
-        borderBottomRightRadius: borderRadiusPx,
-    },
-
-    leftArrow: {
-        borderTopWidth: borderWidthPx,
-        borderBottomWidth: borderWidthPx,
-        borderLeftWidth: borderWidthPx,
-        borderTopLeftRadius: borderRadiusPx,
-        borderBottomLeftRadius: borderRadiusPx,
-    },
-
-    horizontalSpacer: {
-        background: valueGrey,
-        // No need to set a height -- the spacer will be stretched by its
-        // parent.
-        width: buttonSizePx,
-    },
-});
-
-export default NavigationPad;

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

@@ -1,133 +0,0 @@
-import type {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
- * translating touch events from the raw positions at which they occur to the
- * nodes over which they are occurring. This differs from browser behavior, in
- * which touch events are only sent to the node in which a touch started.
- */
-
-class NodeManager {
-    _nodesById: Record<string, HTMLElement>;
-    _orderedIds: ReadonlyArray<string>;
-    _cachedBoundingBoxesById: Record<string, Bound>;
-
-    constructor() {
-        // A mapping from IDs to DOM nodes.
-        this._nodesById = {};
-
-        // 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
-        // is registered as a child of another DOM node, but hasn't appeared in
-        // the DOM yet).
-        this._orderedIds = [];
-
-        // Cache bounding boxes aggressively, re-computing on page resize. Our
-        // caching here makes the strict assumption that if a node is reasonably
-        // assumed to be on-screen, its bounds won't change. For example, if we
-        // see that a touch occurred within the bounds of a node, we cache those
-        // bounds.
-        // TODO(charlie): It'd be great if we could pre-compute these when the
-        // page is idle and the keypad is visible (i.e., the nodes are in their
-        // proper positions).
-        this._cachedBoundingBoxesById = {};
-        window.addEventListener("resize", () => {
-            this._cachedBoundingBoxesById = {};
-        });
-    }
-
-    /**
-     * Register a DOM node with a given identifier.
-     *
-     * @param {string} id - the identifier of the given node
-     * @param {node} domNode - the DOM node linked to the identifier
-     * @param {object} borders - an opaque object describing the node's borders
-     */
-    registerDOMNode(
-        id: string,
-        domNode: HTMLElement,
-        childIds: ReadonlyArray<string>,
-    ) {
-        this._nodesById[id] = domNode;
-
-        // Make sure that any children appear first.
-        // TODO(charlie): This is a very simplistic system that wouldn't
-        // properly handle multiple levels of nesting.
-        const allIds = [...(childIds || []), id, ...this._orderedIds];
-
-        // De-dupe the list of IDs.
-        const orderedIds = [];
-        const seenIds = {};
-        for (const id of allIds) {
-            if (!seenIds[id]) {
-                // @ts-expect-error TS2345
-                orderedIds.push(id);
-                seenIds[id] = true;
-            }
-        }
-
-        this._orderedIds = orderedIds;
-    }
-
-    /**
-     * Unregister the DOM node with the given identifier.
-     *
-     * @param {string} id - the identifier of the node to unregister
-     */
-    unregisterDOMNode(id: string) {
-        delete this._nodesById[id];
-    }
-
-    /**
-     * Return the identifier of the topmost node located at the given
-     * coordinates.
-     *
-     * @param {number} x - the x coordinate at which to search for a node
-     * @param {number} y - the y coordinate at which to search for a node
-     * @returns {null|string} - null or the identifier of the topmost node at
-     *                          the given coordinates
-     */
-    idForCoords(x: number, y: number): string | void {
-        for (const id of this._orderedIds) {
-            const domNode = this._nodesById[id];
-            if (domNode) {
-                const bounds = domNode.getBoundingClientRect();
-                if (
-                    bounds.left <= x &&
-                    bounds.right > x &&
-                    bounds.top <= y &&
-                    bounds.bottom > y
-                ) {
-                    this._cachedBoundingBoxesById[id] = bounds;
-                    return id;
-                }
-            }
-        }
-    }
-
-    /**
-     * Return the necessary layout information, including the bounds and border
-     * values, for the node with the given identifier.
-     *
-     * @param {string} id - the identifier of the node for which to return the
-     *                      layout information
-     * @returns {object} - the bounding client rect for the given node, along
-     *                     with its borders
-     */
-    layoutPropsForId(id: string): LayoutProps {
-        if (!this._cachedBoundingBoxesById[id]) {
-            const node = this._nodesById[id];
-
-            this._cachedBoundingBoxesById[id] = node
-                ? node.getBoundingClientRect()
-                : new DOMRect();
-        }
-
-        return {
-            initialBounds: this._cachedBoundingBoxesById[id],
-        };
-    }
-}
-
-export default NodeManager;

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

@@ -1,73 +0,0 @@
-/**
- * A component that renders and animates the popovers that appear over the
- * multi-functional keys.
- */
-
-import * as React from "react";
-import {CSSTransition} from "react-transition-group";
-
-import KeyConfigs from "../../data/key-configs";
-
-import MultiSymbolPopover from "./multi-symbol-popover";
-
-import type {Popover, KeyConfig} from "../../types";
-
-// NOTE(charlie): These must be kept in sync with the transition durations and
-// classnames specified in popover.less.
-const animationTransitionName = "popover";
-const animationDurationMs = 200;
-
-type Props = {
-    // TODO(matthewc) should be something like Bound, but couldn't fix errors
-    bounds: any;
-    childKeys: ReadonlyArray<KeyConfig>;
-};
-
-// A container component used to position a popover absolutely at a specific
-// position.
-class PopoverContainer extends React.Component<Props> {
-    render() {
-        const {bounds, childKeys} = this.props;
-
-        const containerStyle = {
-            position: "absolute",
-            ...bounds,
-        };
-
-        return (
-            <div style={containerStyle}>
-                <MultiSymbolPopover keys={childKeys} />
-            </div>
-        );
-    }
-}
-
-type PopoverManagerProps = {
-    popover: Popover | null;
-};
-
-class PopoverManager extends React.Component<PopoverManagerProps> {
-    render() {
-        const {popover} = this.props;
-
-        return popover ? (
-            <CSSTransition
-                in={true}
-                classNames={animationTransitionName}
-                enter={true}
-                exit={false}
-                timeout={{
-                    enter: animationDurationMs,
-                }}
-            >
-                <PopoverContainer
-                    key={popover.childKeyIds[0]}
-                    bounds={popover.bounds}
-                    childKeys={popover.childKeyIds.map((id) => KeyConfigs[id])}
-                />
-            </CSSTransition>
-        ) : null;
-    }
-}
-
-export default PopoverManager;