@khanacademy/math-input 0.4.1 → 0.5.2

package/src/components/keypad.js

@@ -0,0 +1,154 @@
+/**
+ * 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 PropTypes from "prop-types";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import {connect} from "react-redux";
+
+import {removeEcho} from "../actions/index.js";
+import {View} from "../fake-react-native-web/index.js";
+
+import EchoManager from "./echo-manager.js";
+import PopoverManager from "./popover-manager.js";
+import {echoPropType, popoverPropType} from "./prop-types.js";
+
+// eslint-disable-next-line react/no-unsafe
+class Keypad extends React.Component {
+    static propTypes = {
+        children: PropTypes.oneOfType([
+            PropTypes.arrayOf(PropTypes.node),
+            PropTypes.node,
+        ]),
+        removeEcho: PropTypes.func.isRequired,
+        style: PropTypes.any,
+
+        // The props below are injected by redux
+
+        // Whether the keypad is active, i.e., whether it should be rendered as
+        // visible or invisible.
+        active: PropTypes.bool,
+        echoes: PropTypes.arrayOf(echoPropType).isRequired,
+        popover: popoverPropType,
+    };
+
+    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);
+        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 = 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: {
+                    top: initialBounds.top - this._container.top,
+                    right: initialBounds.right - this._container.left,
+                    bottom: initialBounds.bottom - this._container.top,
+                    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:
+                    this._container.height -
+                    (popover.bounds.bottom - this._container.top),
+                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) => {
+    return {
+        ...state.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/many-keypad-button.js

@@ -0,0 +1,44 @@
+/**
+ * A keypad button that displays an arbitrary number of symbols, with no
+ * 'default' symbol.
+ */
+
+import PropTypes from "prop-types";
+import * as React from "react";
+
+import {KeyTypes} from "../consts.js";
+import KeyConfigs from "../data/key-configs.js";
+import Keys from "../data/keys.js";
+
+import EmptyKeypadButton from "./empty-keypad-button.js";
+import {keyIdPropType} from "./prop-types.js";
+import TouchableKeypadButton from "./touchable-keypad-button.js";
+
+class ManyKeypadButton extends React.Component {
+    static propTypes = {
+        keys: PropTypes.arrayOf(keyIdPropType).isRequired,
+    };
+
+    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 {...rest} />;
+        } else if (keys.length === 1) {
+            const keyConfig = KeyConfigs[keys[0]];
+            return <TouchableKeypadButton keyConfig={keyConfig} {...rest} />;
+        } else {
+            const keyConfig = {
+                id: Keys.MANY,
+                type: KeyTypes.MANY,
+                childKeyIds: keys,
+            };
+            return <TouchableKeypadButton keyConfig={keyConfig} {...rest} />;
+        }
+    }
+}
+
+export default ManyKeypadButton;

package/src/components/math-icon.js

@@ -0,0 +1,65 @@
+/**
+ * A component that renders an icon with math (via KaTeX).
+ */
+
+import {StyleSheet} from "aphrodite";
+import katex from "katex";
+import PropTypes from "prop-types";
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+import {View} from "../fake-react-native-web/index.js";
+
+import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style.js";
+import Styles from "./styles.js";
+
+const {row, centered} = Styles;
+
+class MathIcon extends React.Component {
+    static propTypes = {
+        math: PropTypes.string.isRequired,
+        style: PropTypes.any,
+    };
+
+    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;

package/src/components/multi-symbol-grid.js

@@ -0,0 +1,182 @@
+/**
+ * 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 PropTypes from "prop-types";
+import * as React from "react";
+
+import {IconTypes} from "../consts.js";
+import {View} from "../fake-react-native-web/index.js";
+
+import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style.js";
+import Icon from "./icon.js";
+import {iconPropType} from "./prop-types.js";
+import Styles from "./styles.js";
+
+const {row, column, centered, fullWidth} = Styles;
+
+class MultiSymbolGrid extends React.Component {
+    static propTypes = {
+        focused: PropTypes.bool,
+        icons: PropTypes.arrayOf(iconPropType).isRequired,
+    };
+
+    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 !== IconTypes.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/multi-symbol-popover.js

@@ -0,0 +1,59 @@
+/**
+ * A popover that renders a set of keys floating above the page.
+ */
+
+import {StyleSheet} from "aphrodite";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+import {BorderStyles} from "../consts.js";
+import {View} from "../fake-react-native-web/index.js";
+
+import {keyConfigPropType} from "./prop-types.js";
+import TouchableKeypadButton from "./touchable-keypad-button.js";
+import * as zIndexes from "./z-indexes.js";
+
+class MultiSymbolPopover extends React.Component {
+    static propTypes = {
+        keys: PropTypes.arrayOf(keyConfigPropType),
+    };
+
+    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
+                            key={key.id}
+                            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/navigation-pad.js

@@ -0,0 +1,139 @@
+/**
+ * A component that renders a navigation pad, which consists of an arrow for
+ * each possible direction.
+ */
+
+import {StyleSheet} from "aphrodite";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+import {BorderStyles} from "../consts.js";
+import KeyConfigs from "../data/key-configs.js";
+import {View} from "../fake-react-native-web/index.js";
+
+import {
+    navigationPadWidthPx,
+    controlGrey,
+    valueGrey,
+    offBlack16,
+} from "./common-style.js";
+import Styles from "./styles.js";
+import TouchableKeypadButton from "./touchable-keypad-button.js";
+
+const {row, column, centered, stretch, roundedTopLeft} = Styles;
+
+class NavigationPad extends React.Component {
+    static propTypes = {
+        roundTopLeft: PropTypes.bool,
+        style: PropTypes.any,
+    };
+
+    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;