@khanacademy/math-input 15.1.0 → 16.0.0

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

@@ -1,358 +0,0 @@
-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 {
-    innerBorderColor,
-    innerBorderStyle,
-    innerBorderWidthPx,
-    compactKeypadBorderRadiusPx,
-} 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 {StyleType} from "@khanacademy/wonder-blocks-core";
-
-const {row, centered, fullWidth} = Styles;
-
-interface ReduxProps {
-    active?: boolean;
-    extraKeys?: ReadonlyArray<string>;
-    keypadType?: KeypadType;
-    layoutMode?: LayoutMode;
-    navigationPadEnabled?: boolean;
-}
-
-interface Props extends ReduxProps {
-    onDismiss?: () => void;
-    onElementMounted: (element: any) => void;
-    onPageSizeChange?: (
-        pageWidth: number,
-        pageHeight: number,
-        containerWidth: number,
-        containerHeight: number,
-    ) => void;
-    style?: StyleType;
-}
-
-type State = {
-    hasBeenActivated: boolean;
-    viewportWidth: string | number;
-};
-
-// eslint-disable-next-line react/no-unsafe
-class KeypadContainer extends React.Component<Props, State> {
-    _containerRef = React.createRef<HTMLDivElement>();
-    _containerResizeObserver: ResizeObserver | null = null;
-    _resizeTimeout: number | null | undefined;
-    hasMounted: boolean | undefined;
-
-    state = {
-        hasBeenActivated: false,
-        viewportWidth: "100vw",
-    };
-
-    UNSAFE_componentWillMount() {
-        if (this.props.active) {
-            this.setState({
-                hasBeenActivated: this.props.active,
-            });
-        }
-    }
-
-    componentDidMount() {
-        // Relay the initial size metrics.
-        this._onResize();
-
-        // And update it on resize.
-        window.addEventListener("resize", this._throttleResizeHandler);
-        window.addEventListener(
-            "orientationchange",
-            this._throttleResizeHandler,
-        );
-
-        // LC-1213: some common older browsers (as of 2023-09-07)
-        // don't support ResizeObserver
-        if ("ResizeObserver" in window) {
-            this._containerResizeObserver = new window.ResizeObserver(
-                this._throttleResizeHandler,
-            );
-
-            if (this._containerRef.current) {
-                this._containerResizeObserver.observe(
-                    this._containerRef.current,
-                );
-            }
-        }
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        if (!this.state.hasBeenActivated && nextProps.active) {
-            this.setState({
-                hasBeenActivated: true,
-            });
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.active && !this.props.active) {
-            this.props.onDismiss && this.props.onDismiss();
-        }
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener("resize", this._throttleResizeHandler);
-        window.removeEventListener(
-            "orientationchange",
-            this._throttleResizeHandler,
-        );
-        this._containerResizeObserver?.disconnect();
-    }
-
-    _throttleResizeHandler = () => {
-        // Throttle the resize callbacks.
-        // https://developer.mozilla.org/en-US/docs/Web/Events/resize
-        if (this._resizeTimeout == null) {
-            this._resizeTimeout = window.setTimeout(() => {
-                this._resizeTimeout = null;
-
-                this._onResize();
-            }, 66);
-        }
-    };
-
-    _onResize = () => {
-        // Whenever the page resizes, we need to force an update, as the button
-        // heights and keypad width are computed based on horizontal space.
-        this.setState({
-            viewportWidth: window.innerWidth,
-        });
-        const containerWidth = this._containerRef.current?.clientWidth || 0;
-        const containerHeight = this._containerRef.current?.clientHeight || 0;
-        this.props.onPageSizeChange?.(
-            window.innerWidth,
-            window.innerHeight,
-            containerWidth,
-            containerHeight,
-        );
-    };
-
-    renderKeypad = () => {
-        const {extraKeys, keypadType, layoutMode, navigationPadEnabled} =
-            this.props;
-
-        const keypadProps = {
-            extraKeys,
-            // HACK(charlie): In order to properly round the corners of the
-            // compact keypad, we need to instruct some of our child views to
-            // crop themselves. At least we're colocating all the layout
-            // information in this component, though.
-            roundTopLeft:
-                layoutMode === LayoutMode.COMPACT && !navigationPadEnabled,
-            roundTopRight: layoutMode === LayoutMode.COMPACT,
-        };
-
-        // Select the appropriate keyboard given the type.
-        // TODO(charlie): In the future, we might want to move towards a
-        // data-driven approach to defining keyboard layouts, and have a
-        // generic keyboard that takes some "keyboard data" and renders it.
-        // However, the keyboards differ pretty heavily right now and it's not
-        // clear what that format would look like exactly. Plus, there aren't
-        // very many of them. So to keep us moving, we'll just hardcode.
-        switch (keypadType) {
-            case KeypadType.FRACTION:
-                return <FractionKeypad {...keypadProps} />;
-
-            case KeypadType.EXPRESSION:
-                return <ExpressionKeypad {...keypadProps} />;
-
-            default:
-                throw new Error("Invalid keypad type: " + keypadType);
-        }
-    };
-
-    render() {
-        const {
-            active,
-            layoutMode,
-            navigationPadEnabled,
-            onElementMounted,
-            style,
-        } = this.props;
-        const {hasBeenActivated} = this.state;
-
-        // NOTE(charlie): We render the transforms as pure inline styles to
-        // avoid an Aphrodite bug in mobile Safari.
-        //   See: https://github.com/Khan/aphrodite/issues/68.
-        let dynamicStyle = {
-            ...(active ? inlineStyles.active : inlineStyles.hidden),
-        };
-
-        if (!active && !hasBeenActivated) {
-            dynamicStyle = {
-                ...dynamicStyle,
-                ...inlineStyles.invisible,
-            };
-        }
-
-        const keypadContainerStyle = [
-            row,
-            centered,
-            fullWidth,
-            styles.keypadContainer,
-            ...(Array.isArray(style) ? style : [style]),
-        ];
-
-        const keypadStyle = [
-            row,
-            styles.keypadBorder,
-            layoutMode === LayoutMode.FULLSCREEN
-                ? styles.fullscreen
-                : styles.compact,
-        ];
-
-        // TODO(charlie): When the keypad is shorter than the width of the
-        // screen, add a border on its left and right edges, and round out the
-        // corners.
-        return (
-            <View
-                style={keypadContainerStyle}
-                dynamicStyle={dynamicStyle}
-                extraClassName="keypad-container"
-                forwardRef={this._containerRef}
-            >
-                <View
-                    style={keypadStyle}
-                    ref={(element) => {
-                        if (!this.hasMounted && element) {
-                            this.hasMounted = true;
-                            onElementMounted(element);
-                        }
-                    }}
-                >
-                    {navigationPadEnabled && (
-                        <NavigationPad
-                            roundTopLeft={layoutMode === LayoutMode.COMPACT}
-                            style={styles.navigationPadContainer}
-                        />
-                    )}
-                    <View style={styles.keypadLayout}>
-                        {this.renderKeypad()}
-                    </View>
-                </View>
-            </View>
-        );
-    }
-}
-
-const keypadAnimationDurationMs = 300;
-const borderWidthPx = 1;
-
-const styles = StyleSheet.create({
-    keypadContainer: {
-        bottom: 0,
-        left: 0,
-        right: 0,
-        position: "fixed",
-        transition: `${keypadAnimationDurationMs}ms ease-out`,
-        transitionProperty: "transform",
-        zIndex: zIndexes.keypad,
-    },
-
-    keypadBorder: {
-        boxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.1)",
-        borderColor: "rgba(0, 0, 0, 0.2)",
-        borderStyle: "solid",
-    },
-
-    fullscreen: {
-        borderTopWidth: borderWidthPx,
-    },
-
-    compact: {
-        borderTopRightRadius: compactKeypadBorderRadiusPx,
-        borderTopLeftRadius: compactKeypadBorderRadiusPx,
-
-        borderTopWidth: borderWidthPx,
-        borderRightWidth: borderWidthPx,
-        borderLeftWidth: borderWidthPx,
-    },
-
-    navigationPadContainer: {
-        // Add a separator between the navigation pad and the keypad.
-        borderRight:
-            `${innerBorderWidthPx}px ${innerBorderStyle} ` +
-            `${innerBorderColor}`,
-        boxSizing: "content-box",
-    },
-
-    // Defer to the navigation pad, such that the navigation pad is always
-    // rendered at full-width, and the keypad takes up just the remaining space.
-    // TODO(charlie): Avoid shrinking the keys and, instead, make the keypad
-    // scrollable.
-    keypadLayout: {
-        flexGrow: 1,
-        // Avoid unitless flex-basis, per: https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
-        flexBasis: "0%",
-    },
-});
-
-// Note: these don't go through an autoprefixer/aphrodite.
-const inlineStyles = {
-    // If the keypad is yet to have ever been activated, we keep it invisible
-    // so as to avoid, e.g., the keypad flashing at the bottom of the page
-    // during the initial render.
-    invisible: {
-        visibility: "hidden",
-    },
-
-    hidden: {
-        transform: "translate3d(0, 100%, 0)",
-    },
-
-    active: {
-        transform: "translate3d(0, 0, 0)",
-    },
-};
-
-const mapStateToProps = (state: ReduxState): ReduxProps => {
-    return {
-        extraKeys: state.keypad.extraKeys,
-        keypadType: state.keypad.keypadType,
-        active: state.keypad.active,
-        layoutMode: state.layout.layoutMode,
-        navigationPadEnabled: state.layout.navigationPadEnabled,
-    };
-};
-
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onPageSizeChange: (
-            pageWidth: number,
-            pageHeight: number,
-            containerWidth: number,
-            containerHeight: number,
-        ) => {
-            dispatch(
-                setPageSize(
-                    pageWidth,
-                    pageHeight,
-                    containerWidth,
-                    containerHeight,
-                ),
-            );
-        },
-    };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps, null, {
-    forwardRef: true,
-})(KeypadContainer);

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

@@ -1,162 +0,0 @@
-/**
- * A keypad component that acts as a container for rows or columns of buttons,
- * and manages the rendering of echo animations on top of those buttons.
- */
-
-import * as React from "react";
-import ReactDOM from "react-dom";
-import {connect} from "react-redux";
-
-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 {Bound, Popover, Echo} from "../../types";
-import type {State} from "./store/types";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-interface ReduxProps {
-    active: boolean;
-    echoes: ReadonlyArray<Echo>;
-    popover: Popover | null;
-}
-
-interface Props extends ReduxProps {
-    children: React.ReactNode;
-    style?: StyleType;
-    removeEcho?: (animationId: string) => void;
-}
-
-// eslint-disable-next-line react/no-unsafe
-class Keypad extends React.Component<Props> {
-    _isMounted: boolean | undefined;
-    _resizeTimeout: number | null | undefined;
-    _container: Bound | null | undefined;
-
-    componentDidMount() {
-        this._isMounted = true;
-
-        window.addEventListener("resize", this._onResize);
-        this._updateSizeAndPosition();
-    }
-
-    UNSAFE_componentWillReceiveProps(newProps) {
-        if (!this._container && (newProps.popover || newProps.echoes.length)) {
-            this._computeContainer();
-        }
-    }
-
-    componentWillUnmount() {
-        this._isMounted = false;
-
-        window.removeEventListener("resize", this._onResize);
-    }
-
-    _computeContainer = () => {
-        const domNode = ReactDOM.findDOMNode(this) as Element;
-        this._container = domNode.getBoundingClientRect();
-    };
-
-    _updateSizeAndPosition = () => {
-        // Mark the container for recalculation next time the keypad is
-        // opened.
-        // TODO(charlie): Since we're not recalculating the container
-        // immediately, if you were to resize the page while a popover were
-        // active, you'd likely get unexpected behavior. This seems very
-        // difficult to do and, as such, incredibly unlikely, but we may
-        // want to reconsider the caching here.
-        this._container = null;
-    };
-
-    _onResize = () => {
-        // Whenever the page resizes, we need to recompute the container's
-        // bounding box. This is the only time that the bounding box can change.
-
-        // Throttle resize events -- taken from:
-        //    https://developer.mozilla.org/en-US/docs/Web/Events/resize
-        if (this._resizeTimeout == null) {
-            this._resizeTimeout = window.setTimeout(() => {
-                this._resizeTimeout = null;
-
-                if (this._isMounted) {
-                    this._updateSizeAndPosition();
-                }
-            }, 66);
-        }
-    };
-
-    render() {
-        const {children, echoes, removeEcho, popover, style} = this.props;
-
-        // Translate the echo boxes, as they'll be positioned absolutely to
-        // this relative container.
-        const relativeEchoes = echoes.map((echo) => {
-            const {initialBounds, ...rest} = echo;
-            return {
-                ...rest,
-                initialBounds: {
-                    // @ts-expect-error TS2533
-                    top: initialBounds.top - this._container.top,
-                    // @ts-expect-error TS2533
-                    right: initialBounds.right - this._container.left,
-                    // @ts-expect-error TS2533
-                    bottom: initialBounds.bottom - this._container.top,
-                    // @ts-expect-error TS2533
-                    left: initialBounds.left - this._container.left,
-                    width: initialBounds.width,
-                    height: initialBounds.height,
-                },
-            };
-        });
-
-        // Translate the popover bounds from page-absolute to keypad-relative.
-        // Note that we only need three bounds, since popovers are anchored to
-        // the bottom left corners of the keys over which they appear.
-        const relativePopover = popover && {
-            ...popover,
-            bounds: {
-                bottom:
-                    // @ts-expect-error TS2533
-                    this._container.height -
-                    // @ts-expect-error TS2533
-                    (popover.bounds.bottom - this._container.top),
-                // @ts-expect-error TS2533
-                left: popover.bounds.left - this._container.left,
-                width: popover.bounds.width,
-            },
-        };
-
-        return (
-            <View style={style}>
-                {children}
-                <EchoManager
-                    echoes={relativeEchoes}
-                    onAnimationFinish={removeEcho}
-                />
-                <PopoverManager popover={relativePopover} />
-            </View>
-        );
-    }
-}
-
-const mapStateToProps = (state: State): ReduxProps => {
-    return {
-        echoes: state.echoes.echoes,
-        active: state.keypad.active,
-        popover: state.gestures.popover,
-    };
-};
-
-const mapDispatchToProps = (dispatch) => {
-    return {
-        removeEcho: (animationId) => {
-            dispatch(removeEcho(animationId));
-        },
-    };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps, null, {
-    forwardRef: true,
-})(Keypad);

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

@@ -1,54 +0,0 @@
-/**
- * A keypad button that displays an arbitrary number of symbols, with no
- * 'default' symbol.
- */
-
-import * as React from "react";
-
-import KeyConfigs from "../../data/key-configs";
-import {IconType} from "../../enums";
-
-import EmptyKeypadButton from "./empty-keypad-button";
-import TouchableKeypadButton from "./touchable-keypad-button";
-
-import type {KeyConfig} from "../../types";
-
-type Props = {
-    keys: ReadonlyArray<string>;
-};
-
-class ManyKeypadButton extends React.Component<Props> {
-    static defaultProps = {
-        keys: [],
-    };
-
-    render() {
-        const {keys, ...rest} = this.props;
-
-        // If we have no extra symbols, render an empty button. If we have just
-        // one, render a standard button. Otherwise, capture them all in a
-        // single button.
-        if (keys.length === 0) {
-            return <EmptyKeypadButton />;
-        } else if (keys.length === 1) {
-            const keyConfig = KeyConfigs[keys[0]];
-            return <TouchableKeypadButton keyConfig={keyConfig} {...rest} />;
-        } else {
-            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} />;
-        }
-    }
-}
-
-export default ManyKeypadButton;

package/src/components/keypad-legacy/math-icon.tsx

@@ -1,66 +0,0 @@
-/**
- * A component that renders an icon with math (via KaTeX).
- */
-
-import {StyleSheet} from "aphrodite";
-import katex from "katex";
-import * as React from "react";
-import ReactDOM from "react-dom";
-
-import {View} from "../../fake-react-native-web/index";
-import {iconSizeHeightPx, iconSizeWidthPx} from "../common-style";
-
-import Styles from "./styles";
-
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-const {row, centered} = Styles;
-
-type Props = {
-    math: string;
-    style: StyleType;
-};
-
-class MathIcon extends React.Component<Props> {
-    componentDidMount() {
-        this._renderMath();
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.math !== this.props.math) {
-            this._renderMath();
-        }
-    }
-
-    _renderMath = () => {
-        const {math} = this.props;
-        katex.render(math, ReactDOM.findDOMNode(this));
-    };
-
-    render() {
-        const {style} = this.props;
-
-        const containerStyle = [
-            row,
-            centered,
-            styles.size,
-            styles.base,
-            ...(Array.isArray(style) ? style : [style]),
-        ];
-
-        return <View style={containerStyle} />;
-    }
-}
-
-const styles = StyleSheet.create({
-    size: {
-        height: iconSizeHeightPx,
-        width: iconSizeWidthPx,
-    },
-
-    base: {
-        fontSize: 25,
-    },
-});
-
-export default MathIcon;