@khanacademy/math-input 15.1.0 → 16.0.0

package/src/components/keypad-legacy/iconography/tan.js

@@ -1,30 +0,0 @@
-/**
- * An autogenerated component that renders the TAN iconograpy in SVG.
- *
- * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
- */
-import PropTypes from "prop-types";
-import * as React from "react";
-
-class Tan extends React.Component {
-    static propTypes = {
-        color: PropTypes.string.isRequired,
-    };
-
-    render() {
-        return (
-            <svg width="48" height="48" viewBox="0 0 48 48">
-                <g fill="none" fillRule="evenodd">
-                    <path fill="none" d="M0 0h48v48H0z" />
-                    <path fill="none" d="M12 12h24v24H12z" />
-                    <path
-                        d="M16.93 29.168c.742 0 1.218-.196 1.484-.434l-.378-1.344c-.098.098-.35.196-.616.196-.392 0-.616-.322-.616-.742v-3.052h1.372v-1.554h-1.372V20.39h-1.792v1.848h-1.12v1.554h1.12v3.528c0 1.204.672 1.848 1.918 1.848zM25.232 29v-4.368c0-1.946-1.414-2.562-2.954-2.562-1.064 0-2.128.336-2.954 1.064l.672 1.19c.574-.532 1.246-.798 1.974-.798.896 0 1.484.448 1.484 1.134v.91c-.448-.532-1.246-.826-2.142-.826-1.078 0-2.352.602-2.352 2.184 0 1.512 1.274 2.24 2.352 2.24.882 0 1.68-.322 2.142-.868v.7h1.778zm-3.206-1.036c-.7 0-1.274-.364-1.274-.994 0-.658.574-1.022 1.274-1.022.574 0 1.134.196 1.428.588v.84c-.294.392-.854.588-1.428.588zM33.338 29v-4.774c0-1.316-.714-2.156-2.198-2.156-1.106 0-1.932.532-2.366 1.05v-.882h-1.778V29h1.778v-4.55c.294-.406.84-.798 1.54-.798.756 0 1.246.322 1.246 1.26V29h1.778z"
-                        fill={this.props.color}
-                    />
-                </g>
-            </svg>
-        );
-    }
-}
-
-export default Tan;

package/src/components/keypad-legacy/iconography/times.js

@@ -1,33 +0,0 @@
-/**
- * An autogenerated component that renders the TIMES iconograpy in SVG.
- *
- * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
- */
-import PropTypes from "prop-types";
-import * as React from "react";
-
-class Times extends React.Component {
-    static propTypes = {
-        color: PropTypes.string.isRequired,
-    };
-
-    render() {
-        return (
-            <svg width="48" height="48" viewBox="0 0 48 48">
-                <g fill="none" fillRule="evenodd">
-                    <path fill="none" d="M0 0h48v48H0z" />
-                    <path fill="none" d="M12 12h24v24H12z" />
-                    <path
-                        d="M20 20l8 8M28 20l-8 8"
-                        stroke={this.props.color}
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                    />
-                </g>
-            </svg>
-        );
-    }
-}
-
-export default Times;

package/src/components/keypad-legacy/iconography/up.js

@@ -1,16 +0,0 @@
-/**
- * A component that renders the UP iconograpy in SVG.
- */
-import * as React from "react";
-
-import Arrow from "./arrow";
-
-const Up = () => {
-    return (
-        <svg width="48" height="48" viewBox="0 0 48 48">
-            <Arrow transform="rotate(90 24 24)" />
-        </svg>
-    );
-};
-
-export default Up;

package/src/components/keypad-legacy/index.ts

@@ -1 +0,0 @@
-export {default} from "./provided-keypad";

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

@@ -1,368 +0,0 @@
-/**
- * A component that renders a keypad button.
- */
-
-import Color from "@khanacademy/wonder-blocks-color";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-import {connect} from "react-redux";
-
-import {BorderDirection, BorderStyles, KeyTypes} from "../../enums";
-import {View} from "../../fake-react-native-web/index";
-import {
-    wonderBlocksBlue,
-    innerBorderColor,
-    innerBorderStyle,
-    innerBorderWidthPx,
-    valueGrey,
-    operatorGrey,
-    controlGrey,
-    emptyGrey,
-} from "../common-style";
-
-import CornerDecal from "./corner-decal";
-import Icon from "./icon";
-import MultiSymbolGrid from "./multi-symbol-grid";
-
-import type {KeyType} from "../../enums";
-import type {Border, NonManyKeyConfig, IconConfig} from "../../types";
-import type {State} from "./store/types";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-interface ReduxProps {
-    heightPx: number;
-    widthPx: number;
-}
-
-interface Props extends ReduxProps {
-    ariaLabel?: string;
-    borders: Border;
-    childKeys: ReadonlyArray<NonManyKeyConfig>;
-    disabled: boolean;
-    focused: boolean;
-    popoverEnabled: boolean;
-    type: KeyType;
-    icon?: IconConfig;
-    style?: StyleType;
-    onTouchCancel?: (evt: React.TouchEvent<HTMLDivElement>) => void;
-    onTouchEnd?: (evt: React.TouchEvent<HTMLDivElement>) => void;
-    onTouchMove?: (evt: React.TouchEvent<HTMLDivElement>) => void;
-    onTouchStart?: (evt: React.TouchEvent<HTMLDivElement>) => void;
-    // NOTE(matthewc)[LC-754] this is a normal React thing, but TS
-    // gets mad if I don't explicitly set it as a prop
-    ref?: (any) => void;
-}
-
-// eslint-disable-next-line react/no-unsafe
-class KeypadButton extends React.PureComponent<Props> {
-    buttonSizeStyle: StyleType | undefined;
-
-    static defaultProps = {
-        borders: BorderStyles.ALL,
-        childKeys: [],
-        disabled: false,
-        focused: false,
-        popoverEnabled: false,
-    };
-
-    UNSAFE_componentWillMount() {
-        this.buttonSizeStyle = styleForButtonDimensions(
-            this.props.heightPx,
-            this.props.widthPx,
-        );
-    }
-
-    componentDidMount() {
-        this._preInjectStyles();
-    }
-
-    UNSAFE_componentWillUpdate(newProps, newState) {
-        // Only recompute the Aphrodite StyleSheet when the button height has
-        // changed. Though it is safe to recompute the StyleSheet (since
-        // they're content-addressable), it saves us a bunch of hashing and
-        // other work to cache it here.
-        if (
-            newProps.heightPx !== this.props.heightPx ||
-            newProps.widthPx !== this.props.widthPx
-        ) {
-            this.buttonSizeStyle = styleForButtonDimensions(
-                newProps.heightPx,
-                newProps.widthPx,
-            );
-
-            this._preInjectStyles();
-        }
-    }
-
-    _preInjectStyles = () => {
-        // HACK(charlie): Pre-inject all of the possible styles for the button.
-        // This avoids a flickering effect in the echo animation whereby the
-        // echoes vary in size as they animate. Note that we need to account for
-        // the "initial" styles that `View` will include, as these styles are
-        // applied to `View` components and Aphrodite will consolidate the style
-        // object. This method must be called whenever a property that
-        // influences the possible outcomes of `this._getFocusStyle` and
-        // `this._getButtonStyle` changes (such as `this.buttonSizeStyle`).
-        for (const type of KeyTypes) {
-            css(View.styles.initial, ...this._getFocusStyle(type));
-
-            for (const borders of Object.values(BorderStyles)) {
-                css(
-                    View.styles.initial,
-                    ...this._getButtonStyle(type, borders),
-                );
-            }
-        }
-    };
-
-    _getFocusStyle = (type: KeyType) => {
-        let focusBackgroundStyle;
-        if (type === "INPUT_NAVIGATION" || type === "KEYPAD_NAVIGATION") {
-            focusBackgroundStyle = styles.light;
-        } else {
-            focusBackgroundStyle = styles.bright;
-        }
-
-        return [styles.focusBox, focusBackgroundStyle];
-    };
-
-    _getButtonStyle = (type, borders, style?) => {
-        // Select the appropriate style for the button.
-        let backgroundStyle;
-        switch (type) {
-            case "EMPTY":
-                backgroundStyle = styles.empty;
-                break;
-
-            case "MANY":
-            case "VALUE":
-                backgroundStyle = styles.value;
-                break;
-
-            case "OPERATOR":
-                backgroundStyle = styles.operator;
-                break;
-
-            case "INPUT_NAVIGATION":
-            case "KEYPAD_NAVIGATION":
-                backgroundStyle = styles.control;
-                break;
-
-            case "ECHO":
-                backgroundStyle = null;
-                break;
-        }
-
-        const borderStyle = [];
-        if (borders.includes(BorderDirection.LEFT)) {
-            // @ts-expect-error TS2345
-            borderStyle.push(styles.leftBorder);
-        }
-        if (borders.includes(BorderDirection.BOTTOM)) {
-            // @ts-expect-error TS2345
-            borderStyle.push(styles.bottomBorder);
-        }
-
-        return [
-            styles.buttonBase,
-            backgroundStyle,
-            ...borderStyle,
-            type === "ECHO" && styles.echo,
-            this.buttonSizeStyle,
-            // React Native allows you to set the 'style' props on user defined
-            // components.
-            //   See: https://facebook.github.io/react-native/docs/style.html
-            ...(Array.isArray(style) ? style : [style]),
-        ];
-    };
-
-    render() {
-        const {
-            ariaLabel,
-            borders,
-            childKeys,
-            disabled,
-            focused,
-            icon,
-            onTouchCancel,
-            onTouchEnd,
-            onTouchMove,
-            onTouchStart,
-            popoverEnabled,
-            style,
-            type,
-        } = this.props;
-
-        // We render in the focus state if the key is focused, or if it's an
-        // echo.
-        const renderFocused =
-            (!disabled && focused) || popoverEnabled || type === "ECHO";
-        const buttonStyle = this._getButtonStyle(type, borders, style);
-        const focusStyle = this._getFocusStyle(type);
-        const iconWrapperStyle = [
-            styles.iconWrapper,
-            disabled ? styles.disabled : undefined,
-        ];
-
-        const eventHandlers = {
-            onTouchCancel,
-            onTouchEnd,
-            onTouchMove,
-            onTouchStart,
-        };
-
-        const maybeFocusBox = renderFocused && <View style={focusStyle} />;
-        const maybeCornerDecal = !renderFocused &&
-            !disabled &&
-            childKeys &&
-            childKeys.length > 0 && <CornerDecal style={styles.decalInset} />;
-
-        if (type === "EMPTY") {
-            return <View style={buttonStyle} {...eventHandlers} />;
-        } else if (type === "MANY") {
-            // TODO(charlie): Make the long-press interaction accessible. See
-            // the TODO in key-configs.js for more.
-            const manyButtonA11yMarkup = {
-                role: "button",
-                ariaLabel: childKeys[0].ariaLabel,
-            };
-            const icons = childKeys.map((keyConfig) => {
-                return keyConfig.icon;
-            }) as ReadonlyArray<IconConfig>;
-            return (
-                <View
-                    style={buttonStyle}
-                    {...eventHandlers}
-                    {...manyButtonA11yMarkup}
-                >
-                    {maybeFocusBox}
-                    <View style={iconWrapperStyle}>
-                        <MultiSymbolGrid
-                            icons={icons}
-                            focused={renderFocused}
-                        />
-                    </View>
-                    {maybeCornerDecal}
-                </View>
-            );
-        } else {
-            const a11yMarkup = {
-                role: "button",
-                ariaLabel: ariaLabel,
-            };
-
-            return (
-                <View style={buttonStyle} {...eventHandlers} {...a11yMarkup}>
-                    {maybeFocusBox}
-                    <View style={iconWrapperStyle}>
-                        <Icon
-                            icon={icon as IconConfig}
-                            focused={renderFocused}
-                        />
-                    </View>
-                    {maybeCornerDecal}
-                </View>
-            );
-        }
-    }
-}
-
-const focusInsetPx = 4;
-const focusBoxZIndex = 0;
-
-const styles = StyleSheet.create({
-    buttonBase: {
-        flex: 1,
-        cursor: "pointer",
-        // Make the text unselectable
-        userSelect: "none",
-        justifyContent: "center",
-        alignItems: "center",
-        // Borders are made selectively visible.
-        borderColor: innerBorderColor,
-        borderStyle: innerBorderStyle,
-        boxSizing: "border-box",
-    },
-
-    decalInset: {
-        top: focusInsetPx,
-        right: focusInsetPx,
-    },
-
-    // Overrides for the echo state, where we want to render the borders for
-    // layout purposes, but we don't want them to be visible.
-    echo: {
-        borderColor: "transparent",
-    },
-
-    // Background colors and other base styles that may vary between key types.
-    value: {
-        backgroundColor: valueGrey,
-    },
-    operator: {
-        backgroundColor: operatorGrey,
-    },
-    control: {
-        backgroundColor: controlGrey,
-    },
-    empty: {
-        backgroundColor: emptyGrey,
-        cursor: "default",
-    },
-
-    bright: {
-        backgroundColor: wonderBlocksBlue,
-    },
-    light: {
-        backgroundColor: Color.offBlack32,
-    },
-
-    iconWrapper: {
-        zIndex: focusBoxZIndex + 1,
-    },
-
-    focusBox: {
-        position: "absolute",
-        zIndex: focusBoxZIndex,
-        left: focusInsetPx,
-        right: focusInsetPx,
-        bottom: focusInsetPx,
-        top: focusInsetPx,
-        borderRadius: 1,
-    },
-
-    disabled: {
-        opacity: 0.3,
-    },
-
-    // Styles used to render the appropriate borders. Buttons are only allowed
-    // to render left and bottom borders, to simplify layout.
-    leftBorder: {
-        borderLeftWidth: innerBorderWidthPx,
-    },
-    bottomBorder: {
-        borderBottomWidth: innerBorderWidthPx,
-    },
-});
-
-const styleForButtonDimensions = (heightPx, widthPx) => {
-    return StyleSheet.create({
-        // eslint-disable-next-line react-native/no-unused-styles
-        buttonSize: {
-            height: heightPx,
-            width: widthPx,
-            maxWidth: widthPx,
-        },
-    }).buttonSize;
-};
-
-const mapStateToProps = (state: State): ReduxProps => {
-    return {
-        heightPx: state.layout.buttonDimensions.height,
-        widthPx: state.layout.buttonDimensions.width,
-    };
-};
-
-export default connect(mapStateToProps, null, null, {forwardRef: true})(
-    KeypadButton,
-);