@khanacademy/math-input 17.0.3 → 17.0.5

package/src/components/keypad/keypad-pages/operators-page.tsx

@@ -1,117 +0,0 @@
-import * as React from "react";
-
-import Keys from "../../../data/key-configs";
-import {KeypadButton} from "../keypad-button";
-
-import type {ClickKeyCallback} from "../../../types";
-
-type Props = {
-    onClickKey: ClickKeyCallback;
-    preAlgebra?: boolean;
-    logarithms?: boolean;
-    basicRelations?: boolean;
-    advancedRelations?: boolean;
-};
-
-export default function OperatorsPage(props: Props) {
-    const {
-        onClickKey,
-        preAlgebra,
-        logarithms,
-        basicRelations,
-        advancedRelations,
-    } = props;
-
-    return (
-        <>
-            {/* Row 1 */}
-            {preAlgebra && (
-                <>
-                    <KeypadButton
-                        keyConfig={Keys.EXP_2}
-                        onClickKey={onClickKey}
-                        coord={[0, 0]}
-                    />
-                    <KeypadButton
-                        keyConfig={Keys.EXP}
-                        onClickKey={onClickKey}
-                        coord={[1, 0]}
-                    />
-                    <KeypadButton
-                        keyConfig={Keys.SQRT}
-                        onClickKey={onClickKey}
-                        coord={[2, 0]}
-                    />
-                    <KeypadButton
-                        keyConfig={Keys.RADICAL}
-                        onClickKey={onClickKey}
-                        coord={[3, 0]}
-                    />
-                </>
-            )}
-
-            {/* Row 2 */}
-            {logarithms && (
-                <>
-                    <KeypadButton
-                        keyConfig={Keys.LOG}
-                        onClickKey={onClickKey}
-                        coord={[0, 1]}
-                    />
-                    <KeypadButton
-                        keyConfig={Keys.LOG_N}
-                        onClickKey={onClickKey}
-                        coord={[1, 1]}
-                    />
-                    <KeypadButton
-                        keyConfig={Keys.LN}
-                        onClickKey={onClickKey}
-                        coord={[2, 1]}
-                    />
-                </>
-            )}
-
-            {/* Row 3 */}
-            {basicRelations && (
-                <>
-                    <KeypadButton
-                        keyConfig={Keys.EQUAL}
-                        onClickKey={onClickKey}
-                        coord={[0, 2]}
-                    />
-                    <KeypadButton
-                        keyConfig={Keys.LT}
-                        onClickKey={onClickKey}
-                        coord={[1, 2]}
-                    />
-                    <KeypadButton
-                        keyConfig={Keys.GT}
-                        onClickKey={onClickKey}
-                        coord={[2, 2]}
-                    />
-                </>
-            )}
-
-            {/* Row 4 */}
-            {advancedRelations && (
-                <>
-                    <KeypadButton
-                        keyConfig={Keys.NEQ}
-                        onClickKey={onClickKey}
-                        coord={[0, 3]}
-                    />
-                    <KeypadButton
-                        keyConfig={Keys.LEQ}
-                        onClickKey={onClickKey}
-                        coord={[1, 3]}
-                    />
-                    <KeypadButton
-                        keyConfig={Keys.GEQ}
-                        onClickKey={onClickKey}
-                        coord={[2, 3]}
-                    />
-                </>
-            )}
-        </>
-    );
-}

package/src/components/keypad/keypad.tsx

@@ -1,233 +0,0 @@
-import Color from "@khanacademy/wonder-blocks-color";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-import {useEffect} from "react";
-
-import Tabbar from "../tabbar";
-
-import ExtrasPage from "./keypad-pages/extras-page";
-import FractionsPage from "./keypad-pages/fractions-page";
-import GeometryPage from "./keypad-pages/geometry-page";
-import NumbersPage from "./keypad-pages/numbers-page";
-import OperatorsPage from "./keypad-pages/operators-page";
-import NavigationPad from "./navigation-pad";
-import SharedKeys from "./shared-keys";
-import {expandedViewThreshold} from "./utils";
-
-import type Key from "../../data/keys";
-import type {ClickKeyCallback, KeypadPageType} from "../../types";
-import type {CursorContext} from "../input/cursor-contexts";
-import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
-
-export type Props = {
-    extraKeys: ReadonlyArray<Key>;
-    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
-    showDismiss?: boolean;
-    expandedView?: boolean;
-
-    convertDotToTimes?: boolean;
-    divisionKey?: boolean;
-    trigonometry?: boolean;
-    preAlgebra?: boolean;
-    logarithms?: boolean;
-    basicRelations?: boolean;
-    advancedRelations?: boolean;
-    fractionsOnly?: boolean;
-
-    onClickKey: ClickKeyCallback;
-    onAnalyticsEvent: AnalyticsEventHandlerFn;
-};
-
-const defaultProps = {
-    extraKeys: [],
-};
-
-function getAvailableTabs(props: Props): ReadonlyArray<KeypadPageType> {
-    // We don't want to show any available tabs on the fractions keypad
-    if (props.fractionsOnly) {
-        return [];
-    }
-
-    const tabs: Array<KeypadPageType> = ["Numbers"];
-    if (
-        // OperatorsButtonSets
-        props.preAlgebra ||
-        props.logarithms ||
-        props.basicRelations ||
-        props.advancedRelations
-    ) {
-        tabs.push("Operators");
-    }
-
-    if (props.trigonometry) {
-        tabs.push("Geometry");
-    }
-
-    if (props.extraKeys?.length) {
-        tabs.push("Extras");
-    }
-
-    return tabs;
-}
-
-// The main (v2) Keypad. Use this component to present an accessible, onscreen
-// keypad to learners for entering math expressions.
-export default function Keypad(props: Props) {
-    // If we're using the Fractions keypad, we want to default select that page
-    // Otherwise, we want to default to the Numbers page
-    const defaultSelectedPage = props.fractionsOnly ? "Fractions" : "Numbers";
-    const [selectedPage, setSelectedPage] =
-        React.useState<KeypadPageType>(defaultSelectedPage);
-    const [isMounted, setIsMounted] = React.useState<boolean>(false);
-
-    // We don't want any tabs available on mobile fractions keypad
-    const availableTabs = getAvailableTabs(props);
-
-    const {
-        onClickKey,
-        cursorContext,
-        extraKeys,
-        convertDotToTimes,
-        divisionKey,
-        preAlgebra,
-        logarithms,
-        basicRelations,
-        advancedRelations,
-        showDismiss,
-        onAnalyticsEvent,
-        fractionsOnly,
-        expandedView,
-    } = props;
-
-    // Use a different grid for our fraction keypad
-    const gridStyle = fractionsOnly
-        ? styles.fractionsGrid
-        : styles.expressionGrid;
-
-    // This useEffect is only used to ensure that we can test the keypad in storybook
-    useEffect(() => {
-        setSelectedPage(defaultSelectedPage);
-    }, [fractionsOnly, defaultSelectedPage]);
-
-    useEffect(() => {
-        if (!isMounted) {
-            onAnalyticsEvent({
-                type: "math-input:keypad-opened",
-                payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
-            });
-            setIsMounted(true);
-        }
-        return () => {
-            if (isMounted) {
-                onAnalyticsEvent({
-                    type: "math-input:keypad-closed",
-                    payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
-                });
-                setIsMounted(false);
-            }
-        };
-    }, [onAnalyticsEvent, isMounted]);
-
-    return (
-        <View style={expandedView ? styles.keypadOuterContainer : null}>
-            <View
-                style={[
-                    styles.wrapper,
-                    expandedView ? styles.expandedWrapper : null,
-                ]}
-            >
-                <Tabbar
-                    items={availableTabs}
-                    selectedItem={selectedPage}
-                    onSelectItem={(newSelectedPage: KeypadPageType) => {
-                        setSelectedPage(newSelectedPage);
-                    }}
-                    onClickClose={
-                        showDismiss ? () => onClickKey("DISMISS") : undefined
-                    }
-                />
-
-                <View style={styles.keypadInnerContainer}>
-                    <View
-                        style={[styles.keypadGrid, gridStyle]}
-                        tabIndex={0}
-                        aria-label="Keypad"
-                    >
-                        {selectedPage === "Fractions" && (
-                            <FractionsPage
-                                onClickKey={onClickKey}
-                                cursorContext={cursorContext}
-                            />
-                        )}
-                        {selectedPage === "Numbers" && (
-                            <NumbersPage onClickKey={onClickKey} />
-                        )}
-                        {selectedPage === "Extras" && (
-                            <ExtrasPage
-                                onClickKey={onClickKey}
-                                extraKeys={extraKeys}
-                            />
-                        )}
-                        {selectedPage === "Operators" && (
-                            <OperatorsPage
-                                onClickKey={onClickKey}
-                                preAlgebra={preAlgebra}
-                                logarithms={logarithms}
-                                basicRelations={basicRelations}
-                                advancedRelations={advancedRelations}
-                            />
-                        )}
-                        {selectedPage === "Geometry" && (
-                            <GeometryPage onClickKey={onClickKey} />
-                        )}
-                        {!fractionsOnly && (
-                            <SharedKeys
-                                onClickKey={onClickKey}
-                                cursorContext={cursorContext}
-                                convertDotToTimes={convertDotToTimes}
-                                divisionKey={divisionKey}
-                                selectedPage={selectedPage}
-                            />
-                        )}
-                    </View>
-                    {expandedView && <NavigationPad onClickKey={onClickKey} />}
-                </View>
-            </View>
-        </View>
-    );
-}
-
-Keypad.defaultProps = defaultProps;
-
-const styles = StyleSheet.create({
-    keypadOuterContainer: {
-        display: "flex",
-        alignItems: "center",
-    },
-    wrapper: {
-        background: Color.white,
-    },
-    expandedWrapper: {
-        borderWidth: "1px 1px 0 1px",
-        borderColor: Color.offBlack32,
-        maxWidth: expandedViewThreshold,
-        borderRadius: "3px 3px 0 0",
-    },
-    keypadInnerContainer: {
-        display: "flex",
-        flexDirection: "row",
-        backgroundColor: "#DBDCDD",
-    },
-    keypadGrid: {
-        display: "grid",
-        gridTemplateRows: "repeat(4, 1fr)",
-        flex: 1,
-    },
-    expressionGrid: {
-        gridTemplateColumns: "repeat(6, 1fr)",
-    },
-    fractionsGrid: {
-        gridTemplateColumns: "repeat(5, 1fr)",
-    },
-});

package/src/components/keypad/mobile-keypad-internals.tsx

@@ -1,240 +0,0 @@
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-import ReactDOM from "react-dom";
-
-import {View} from "../../fake-react-native-web/index";
-import AphroditeCssTransitionGroup from "../aphrodite-css-transition-group";
-
-import Keypad from "./keypad";
-import {expandedViewThreshold} from "./utils";
-
-import type Key from "../../data/keys";
-import type {
-    Cursor,
-    KeypadConfiguration,
-    KeyHandler,
-    KeypadAPI,
-} from "../../types";
-import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-const AnimationDurationInMS = 200;
-
-type Props = {
-    onElementMounted?: (arg1: any) => void;
-    onDismiss?: () => void;
-    style?: StyleType;
-    onAnalyticsEvent: AnalyticsEventHandlerFn;
-    setKeypadActive: (keypadActive: boolean) => void;
-    keypadActive: boolean;
-};
-
-type State = {
-    containerWidth: number;
-    keypadConfig?: KeypadConfiguration;
-    keyHandler?: KeyHandler;
-    cursor?: Cursor;
-};
-
-/**
- * This is the v2 equivalent of v1's ProvidedKeypad. It follows the same
- * external API so that it can be hot-swapped with the v1 keypad and
- * is responsible for connecting the keypad with MathInput and the Renderer.
- *
- * Ideally this strategy of attaching methods on the class component for
- * other components to call will be replaced props/callbacks since React
- * doesn't support this type of code anymore (functional components
- * can't have methods attached to them).
- */
-class MobileKeypadInternals
-    extends React.Component<Props, State>
-    implements KeypadAPI
-{
-    _containerRef = React.createRef<HTMLDivElement>();
-    _containerResizeObserver: ResizeObserver | null = null;
-    _throttleResize = false;
-
-    state: State = {
-        containerWidth: 0,
-    };
-
-    componentDidMount() {
-        this._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,
-                );
-            }
-        }
-
-        this.props.onElementMounted?.({
-            activate: this.activate,
-            dismiss: this.dismiss,
-            configure: this.configure,
-            setCursor: this.setCursor,
-            setKeyHandler: this.setKeyHandler,
-            getDOMNode: this.getDOMNode,
-        });
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener("resize", this._throttleResizeHandler);
-        window.removeEventListener(
-            "orientationchange",
-            this._throttleResizeHandler,
-        );
-        this._containerResizeObserver?.disconnect();
-    }
-
-    _resize = () => {
-        const containerWidth = this._containerRef.current?.clientWidth || 0;
-        this.setState({containerWidth});
-    };
-
-    _throttleResizeHandler = () => {
-        if (this._throttleResize) {
-            return;
-        }
-
-        this._throttleResize = true;
-
-        setTimeout(() => {
-            this._resize();
-            this._throttleResize = false;
-        }, 100);
-    };
-
-    activate: () => void = () => {
-        this.props.setKeypadActive(true);
-    };
-
-    dismiss: () => void = () => {
-        this.props.setKeypadActive(false);
-        this.props.onDismiss?.();
-    };
-
-    configure: (configuration: KeypadConfiguration, cb: () => void) => void = (
-        configuration,
-        cb,
-    ) => {
-        this.setState({keypadConfig: configuration});
-
-        // TODO(matthewc)[LC-1080]: this was brought in from v1's ProvidedKeypad.
-        // We need to investigate whether we still need this.
-        // 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.setState({cursor});
-    };
-
-    setKeyHandler: (keyHandler: KeyHandler) => void = (keyHandler) => {
-        this.setState({keyHandler});
-    };
-
-    getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode> = () => {
-        return ReactDOM.findDOMNode(this);
-    };
-
-    _handleClickKey(key: Key) {
-        if (key === "DISMISS") {
-            this.dismiss();
-            return;
-        }
-
-        const cursor = this.state.keyHandler?.(key);
-        this.setState({cursor});
-    }
-
-    render(): React.ReactNode {
-        const {keypadActive, style} = this.props;
-        const {containerWidth, cursor, keypadConfig} = this.state;
-
-        const containerStyle = [
-            styles.keypadContainer,
-            // styles passed as props
-            ...(Array.isArray(style) ? style : [style]),
-        ];
-
-        const isExpression = keypadConfig?.keypadType === "EXPRESSION";
-        const convertDotToTimes = keypadConfig?.times;
-
-        return (
-            <View style={containerStyle} forwardRef={this._containerRef}>
-                <AphroditeCssTransitionGroup
-                    transitionEnterTimeout={AnimationDurationInMS}
-                    transitionLeaveTimeout={AnimationDurationInMS}
-                    transitionStyle={{
-                        enter: {
-                            transform: "translate3d(0, 100%, 0)",
-                            transition: `${AnimationDurationInMS}ms ease-out`,
-                        },
-                        enterActive: {
-                            transform: "translate3d(0, 0, 0)",
-                        },
-                        leave: {
-                            transform: "translate3d(0, 0, 0)",
-                            transition: `${AnimationDurationInMS}ms ease-out`,
-                        },
-                        leaveActive: {
-                            transform: "translate3d(0, 100%, 0)",
-                        },
-                    }}
-                >
-                    {keypadActive ? (
-                        <Keypad
-                            onAnalyticsEvent={this.props.onAnalyticsEvent}
-                            extraKeys={keypadConfig?.extraKeys}
-                            onClickKey={(key) => this._handleClickKey(key)}
-                            cursorContext={cursor?.context}
-                            fractionsOnly={!isExpression}
-                            convertDotToTimes={convertDotToTimes}
-                            divisionKey={isExpression}
-                            trigonometry={isExpression}
-                            preAlgebra={isExpression}
-                            logarithms={isExpression}
-                            basicRelations={isExpression}
-                            advancedRelations={isExpression}
-                            expandedView={
-                                containerWidth > expandedViewThreshold
-                            }
-                            showDismiss
-                        />
-                    ) : null}
-                </AphroditeCssTransitionGroup>
-            </View>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    keypadContainer: {
-        bottom: 0,
-        left: 0,
-        right: 0,
-        position: "fixed",
-    },
-});
-
-export default MobileKeypadInternals;

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

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-import {KeypadContext} from "../keypad-context";
-
-import MobileKeypadInternals from "./mobile-keypad-internals";
-
-type Props = Omit<
-    React.ComponentProps<typeof MobileKeypadInternals>,
-    "keypadActive" | "setKeypadActive"
->;
-
-export function MobileKeypad(props: Props) {
-    return (
-        <KeypadContext.Consumer>
-            {({keypadActive, setKeypadActive}) => (
-                <MobileKeypadInternals
-                    {...props}
-                    keypadActive={keypadActive}
-                    setKeypadActive={setKeypadActive}
-                />
-            )}
-        </KeypadContext.Consumer>
-    );
-}