@khanacademy/math-input 15.1.0 → 16.0.0

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

@@ -1,163 +0,0 @@
-/**
- * A touchable wrapper around the base KeypadButton component. This button is
- * responsible for keeping our button ID system (which will be used to handle
- * touch events globally) opaque to the KeypadButton.
- */
-
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-import ReactDOM from "react-dom";
-import {connect} from "react-redux";
-
-import KeyConfigs from "../../data/key-configs";
-
-import KeypadButton from "./keypad-button";
-
-import type Key from "../../data/keys";
-import type {KeyType} from "../../enums";
-import type {Border, IconConfig, KeyConfig} from "../../types";
-import type GestureManager from "./gesture-manager";
-import type {State} from "./store/types";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-interface SharedProps {
-    borders?: Border;
-    disabled?: boolean;
-    style?: StyleType;
-}
-
-interface OwnProps extends SharedProps {
-    keyConfig: KeyConfig;
-}
-
-interface Props extends SharedProps {
-    childKeyIds?: ReadonlyArray<string>;
-    gestureManager: GestureManager;
-    id: Key;
-    focused: boolean;
-    popoverEnabled: boolean;
-    childKeys?: ReadonlyArray<KeyConfig>;
-    ariaLabel?: string;
-    icon?: IconConfig;
-    type: KeyType;
-}
-
-class TouchableKeypadButton extends React.Component<Props> {
-    shouldComponentUpdate(newProps: Props) {
-        // We take advantage of a few different properties of our key
-        // configuration system. Namely, we know that the other props flow
-        // directly from the ID, and thus don't need to be checked. If a key has
-        // a custom style, we bail out (this should be rare).
-        return (
-            newProps.id !== this.props.id ||
-            newProps.gestureManager !== this.props.gestureManager ||
-            newProps.focused !== this.props.focused ||
-            newProps.disabled !== this.props.disabled ||
-            newProps.popoverEnabled !== this.props.popoverEnabled ||
-            newProps.type !== this.props.type ||
-            !!newProps.style
-        );
-    }
-
-    componentWillUnmount() {
-        const {gestureManager, id} = this.props;
-        gestureManager.unregisterDOMNode(id);
-    }
-
-    render() {
-        const {
-            borders,
-            childKeyIds,
-            disabled,
-            gestureManager,
-            id,
-            style,
-            ...rest
-        } = this.props;
-
-        // Only bind the relevant event handlers if the key is enabled.
-        const eventHandlers = disabled
-            ? {
-                  onTouchStart: (evt) => evt.preventDefault(),
-              }
-            : {
-                  onTouchStart: (evt) => gestureManager.onTouchStart(evt, id),
-                  onTouchEnd: (evt) => gestureManager.onTouchEnd(evt),
-                  onTouchMove: (evt) => gestureManager.onTouchMove(evt),
-                  onTouchCancel: (evt) => gestureManager.onTouchCancel(evt),
-              };
-
-        const styleWithAddons = [
-            ...(Array.isArray(style) ? style : [style]),
-            styles.preventScrolls,
-        ];
-
-        return (
-            <KeypadButton
-                ref={(node) =>
-                    gestureManager.registerDOMNode(
-                        id,
-                        ReactDOM.findDOMNode(node),
-                        childKeyIds,
-                    )
-                }
-                borders={borders}
-                disabled={disabled}
-                style={styleWithAddons}
-                {...eventHandlers}
-                {...rest}
-            />
-        );
-    }
-}
-
-const extractProps = (keyConfig: KeyConfig) => {
-    const {ariaLabel, icon, type} = keyConfig;
-    return {ariaLabel, icon, type};
-};
-
-const mapStateToProps = (state: State, ownProps: OwnProps): Props => {
-    const {gestures} = state;
-
-    const {keyConfig, ...rest} = ownProps;
-    const {id, type} = keyConfig;
-
-    const childKeyIds =
-        "childKeyIds" in keyConfig ? keyConfig.childKeyIds : undefined;
-
-    const childKeys: readonly KeyConfig[] | undefined = childKeyIds
-        ? childKeyIds.map((id) => KeyConfigs[id])
-        : undefined;
-
-    // Override with the default child props, if the key is a multi-symbol key
-    // (but not a many-symbol key, which operates under different rules).
-    const useFirstChildProps =
-        type !== "MANY" && childKeys && childKeys.length > 0;
-
-    return {
-        ...rest,
-        childKeyIds: childKeyIds,
-        gestureManager: gestures.gestureManager,
-        id: id,
-
-        // Add in some gesture state.
-        focused: gestures.focus === id,
-        popoverEnabled: gestures.popover?.parentId === id,
-
-        // Pass down the child keys and any extracted props.
-        childKeys,
-        ...extractProps(useFirstChildProps ? childKeys[0] : keyConfig),
-    };
-};
-
-const styles = StyleSheet.create({
-    preventScrolls: {
-        // Touch events that start in the touchable buttons shouldn't be
-        // allowed to produce page scrolls.
-        touchAction: "none",
-    },
-});
-
-export default connect(mapStateToProps, null, null, {forwardRef: true})(
-    TouchableKeypadButton,
-);

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

@@ -1,115 +0,0 @@
-/**
- * A keypad with two pages of keys.
- */
-
-import Color from "@khanacademy/wonder-blocks-color";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-import {connect} from "react-redux";
-
-import {View} from "../../fake-react-native-web/index";
-import {
-    innerBorderColor,
-    innerBorderStyle,
-    innerBorderWidthPx,
-    offBlack16,
-} from "../common-style";
-import Tabbar from "../tabbar";
-
-import Keypad from "./keypad";
-import Styles from "./styles";
-
-import type {KeypadPageType} from "../../types";
-import type {State as ReduxState} from "./store/types";
-
-const {column, row, fullWidth} = Styles;
-
-interface ReduxProps {
-    paginationEnabled: boolean;
-}
-
-interface Props extends ReduxProps {
-    leftPage: React.ReactNode;
-    rightPage: React.ReactNode;
-}
-
-type State = {
-    selectedPage: KeypadPageType;
-};
-
-class TwoPageKeypad extends React.Component<Props, State> {
-    state: State = {
-        selectedPage: "Numbers",
-    };
-
-    render() {
-        const {leftPage, paginationEnabled, rightPage} = this.props;
-
-        const {selectedPage} = this.state;
-
-        if (paginationEnabled) {
-            return (
-                <Keypad style={[column, styles.keypad]}>
-                    <Tabbar
-                        items={["Numbers", "Operators"]}
-                        selectedItem={selectedPage}
-                        onSelectItem={(selectedItem) => {
-                            this.setState({selectedPage: selectedItem});
-                        }}
-                        style={styles.tabbar}
-                    />
-                    <View style={styles.borderTop}>
-                        {selectedPage === "Numbers" && rightPage}
-                        {selectedPage === "Operators" && leftPage}
-                    </View>
-                </Keypad>
-            );
-        } else {
-            return (
-                <Keypad style={styles.keypad}>
-                    <View style={row}>
-                        <View style={fullWidth}>{leftPage}</View>
-                        <View style={[styles.borderLeft, fullWidth]}>
-                            {rightPage}
-                        </View>
-                    </View>
-                </Keypad>
-            );
-        }
-    }
-}
-
-const styles = StyleSheet.create({
-    keypad: {
-        // Set the background to light grey, so that when the user drags the
-        // keypad pages past the edges, there's a grey backdrop.
-        backgroundColor: offBlack16,
-    },
-
-    borderTop: {
-        borderTop:
-            `${innerBorderWidthPx}px ${innerBorderStyle} ` +
-            `${innerBorderColor}`,
-    },
-    borderLeft: {
-        borderLeft:
-            `${innerBorderWidthPx}px ${innerBorderStyle} ` +
-            `${innerBorderColor}`,
-        boxSizing: "content-box",
-    },
-    tabbar: {
-        background: Color.offWhite,
-        borderTop: `1px solid ${Color.offBlack50}`,
-        borderBottom: `1px solid ${Color.offBlack50}`,
-    },
-});
-
-const mapStateToProps = (state: ReduxState): ReduxProps => {
-    return {
-        paginationEnabled: state.layout.paginationEnabled,
-    };
-};
-
-export default connect(mapStateToProps, null, null, {forwardRef: true})(
-    TwoPageKeypad,
-);

package/src/components/keypad-legacy/z-indexes.ts

@@ -1,8 +0,0 @@
-/**
- * This file contains all of the z-index values used throughout the math-input
- * component and its children.
- */
-
-export const popover = 1;
-export const echo = 2;
-export const keypad = 1060;

package/src/components/keypad-switch.tsx

@@ -1,42 +0,0 @@
-import * as React from "react";
-
-import {MobileKeypad} from "./keypad";
-import {KeypadContext} from "./keypad-context";
-import LegacyKeypad from "./keypad-legacy";
-
-import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-type Props = {
-    onElementMounted?: (arg1: any) => void;
-    onDismiss?: () => void;
-    style?: StyleType;
-
-    useV2Keypad?: boolean;
-    onAnalyticsEvent: AnalyticsEventHandlerFn;
-};
-
-function KeypadSwitch(props: Props) {
-    const {useV2Keypad = false, ...rest} = props;
-
-    const KeypadComponent = useV2Keypad ? MobileKeypad : LegacyKeypad;
-
-    // Note: Although we pass the "onAnalyticsEvent" to both keypad components,
-    // only the current one uses it. There's no point in instrumenting the
-    // legacy keypad given that it's on its way out the door.
-    return (
-        <KeypadContext.Consumer>
-            {({setKeypadActive, keypadActive}) => {
-                return (
-                    <KeypadComponent
-                        {...rest}
-                        keypadActive={keypadActive}
-                        setKeypadActive={setKeypadActive}
-                    />
-                );
-            }}
-        </KeypadContext.Consumer>
-    );
-}
-
-export default KeypadSwitch;