@khanacademy/math-input 0.3.2 → 0.5.0

package/src/components/keypad-button.js

@@ -0,0 +1,366 @@
+/**
+ * A component that renders a keypad button.
+ */
+
+import {StyleSheet, css} from "aphrodite";
+import PropTypes from "prop-types";
+import * as React from "react";
+import {connect} from "react-redux";
+
+import {KeyTypes, BorderDirections, BorderStyles} from "../consts.js";
+import {View} from "../fake-react-native-web/index.js";
+
+import {
+    wonderBlocksBlue,
+    innerBorderColor,
+    innerBorderStyle,
+    innerBorderWidthPx,
+    valueGrey,
+    operatorGrey,
+    controlGrey,
+    emptyGrey,
+} from "./common-style.js";
+import CornerDecal from "./corner-decal.js";
+import Icon from "./icon.js";
+import MultiSymbolGrid from "./multi-symbol-grid.js";
+import {
+    bordersPropType,
+    iconPropType,
+    keyConfigPropType,
+} from "./prop-types.js";
+
+// eslint-disable-next-line react/no-unsafe
+class KeypadButton extends React.PureComponent {
+    static propTypes = {
+        ariaLabel: PropTypes.string,
+        // The borders to display on the button. Typically, this should be set
+        // using one of the preset `BorderStyles` options.
+        borders: bordersPropType,
+        // Any additional keys that can be accessed by long-pressing on the
+        // button.
+        childKeys: PropTypes.arrayOf(keyConfigPropType),
+        // Whether the button should be rendered in a 'disabled' state, i.e.,
+        // without any touch feedback.
+        disabled: PropTypes.bool,
+        focused: PropTypes.bool,
+        heightPx: PropTypes.number.isRequired,
+        icon: iconPropType,
+        onTouchCancel: PropTypes.func,
+        onTouchEnd: PropTypes.func,
+        onTouchMove: PropTypes.func,
+        onTouchStart: PropTypes.func,
+        popoverEnabled: PropTypes.bool,
+        style: PropTypes.any,
+        type: PropTypes.oneOf(Object.keys(KeyTypes)).isRequired,
+        // NOTE(charlie): We may want to make this optional for phone layouts
+        // (and rely on Flexbox instead), since it might not be pixel perfect
+        // with borders and such.
+        widthPx: PropTypes.number.isRequired,
+    };
+
+    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 Object.keys(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) => {
+        let focusBackgroundStyle;
+        if (
+            type === KeyTypes.INPUT_NAVIGATION ||
+            type === KeyTypes.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 KeyTypes.EMPTY:
+                backgroundStyle = styles.empty;
+                break;
+
+            case KeyTypes.MANY:
+            case KeyTypes.VALUE:
+                backgroundStyle = styles.value;
+                break;
+
+            case KeyTypes.OPERATOR:
+                backgroundStyle = styles.operator;
+                break;
+
+            case KeyTypes.INPUT_NAVIGATION:
+            case KeyTypes.KEYPAD_NAVIGATION:
+                backgroundStyle = styles.control;
+                break;
+
+            case KeyTypes.ECHO:
+                backgroundStyle = null;
+                break;
+        }
+
+        const borderStyle = [];
+        if (borders.indexOf(BorderDirections.LEFT) !== -1) {
+            borderStyle.push(styles.leftBorder);
+        }
+        if (borders.indexOf(BorderDirections.BOTTOM) !== -1) {
+            borderStyle.push(styles.bottomBorder);
+        }
+
+        return [
+            styles.buttonBase,
+            backgroundStyle,
+            ...borderStyle,
+            type === KeyTypes.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 === KeyTypes.ECHO;
+        const buttonStyle = this._getButtonStyle(type, borders, style);
+        const focusStyle = this._getFocusStyle(type);
+        const iconWrapperStyle = [
+            styles.iconWrapper,
+            disabled && styles.disabled,
+        ];
+
+        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 === KeyTypes.EMPTY) {
+            return <View style={buttonStyle} {...eventHandlers} />;
+        } else if (type === KeyTypes.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;
+            });
+            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} focused={renderFocused} />
+                    </View>
+                    {maybeCornerDecal}
+                </View>
+            );
+        }
+    }
+}
+
+const focusInsetPx = 4;
+const focusBoxZIndex = 0;
+
+const styles = StyleSheet.create({
+    buttonBase: {
+        // HACK(benkomalo): support old style flex box in Android browsers
+        "-webkit-box-flex": "1",
+        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: "rgba(33, 36, 44, 0.1)",
+    },
+
+    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) => {
+    return state.layout.buttonDimensions;
+};
+
+export default connect(mapStateToProps, null, null, {forwardRef: true})(
+    KeypadButton,
+);

package/src/components/keypad-container.js

@@ -0,0 +1,303 @@
+import {StyleSheet} from "aphrodite";
+import PropTypes from "prop-types";
+import * as React from "react";
+import {connect} from "react-redux";
+
+import {setPageSize} from "../actions/index.js";
+import {KeypadTypes, LayoutModes} from "../consts.js";
+import {View} from "../fake-react-native-web/index.js";
+
+import {
+    innerBorderColor,
+    innerBorderStyle,
+    innerBorderWidthPx,
+    compactKeypadBorderRadiusPx,
+} from "./common-style.js";
+import ExpressionKeypad from "./expression-keypad.js";
+import FractionKeypad from "./fraction-keypad.js";
+import NavigationPad from "./navigation-pad.js";
+import {keyIdPropType} from "./prop-types.js";
+import Styles from "./styles.js";
+import * as zIndexes from "./z-indexes.js";
+
+const {row, centered, fullWidth} = Styles;
+
+// eslint-disable-next-line react/no-unsafe
+class KeypadContainer extends React.Component {
+    static propTypes = {
+        active: PropTypes.bool,
+        extraKeys: PropTypes.arrayOf(keyIdPropType),
+        keypadType: PropTypes.oneOf(Object.keys(KeypadTypes)).isRequired,
+        layoutMode: PropTypes.oneOf(Object.keys(LayoutModes)).isRequired,
+        navigationPadEnabled: PropTypes.bool.isRequired,
+        onDismiss: PropTypes.func,
+        // A callback that should be triggered with the root React element on
+        // mount.
+        onElementMounted: PropTypes.func,
+        onPageSizeChange: PropTypes.func.isRequired,
+        style: PropTypes.any,
+    };
+
+    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,
+        );
+    }
+
+    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,
+        );
+    }
+
+    _throttleResizeHandler = () => {
+        // Throttle the resize callbacks.
+        // https://developer.mozilla.org/en-US/docs/Web/Events/resize
+        if (this._resizeTimeout == null) {
+            this._resizeTimeout = 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,
+        });
+
+        this.props.onPageSizeChange(window.innerWidth, window.innerHeight);
+    };
+
+    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 === LayoutModes.COMPACT && !navigationPadEnabled,
+            roundTopRight: layoutMode === LayoutModes.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 KeypadTypes.FRACTION:
+                return <FractionKeypad {...keypadProps} />;
+
+            case KeypadTypes.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.
+        const dynamicStyle = {
+            ...(active ? inlineStyles.active : inlineStyles.hidden),
+            ...(!active && !hasBeenActivated ? inlineStyles.invisible : {}),
+        };
+
+        const keypadContainerStyle = [
+            row,
+            centered,
+            fullWidth,
+            styles.keypadContainer,
+            ...(Array.isArray(style) ? style : [style]),
+        ];
+
+        const keypadStyle = [
+            row,
+            styles.keypadBorder,
+            layoutMode === LayoutModes.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"
+            >
+                <View
+                    style={keypadStyle}
+                    ref={(element) => {
+                        if (!this.hasMounted && element) {
+                            this.hasMounted = true;
+                            onElementMounted(element);
+                        }
+                    }}
+                >
+                    {navigationPadEnabled && (
+                        <NavigationPad
+                            roundTopLeft={layoutMode === LayoutModes.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: {
+        msTransform: "translate3d(0, 100%, 0)",
+        WebkitTransform: "translate3d(0, 100%, 0)",
+        transform: "translate3d(0, 100%, 0)",
+    },
+
+    active: {
+        msTransform: "translate3d(0, 0, 0)",
+        WebkitTransform: "translate3d(0, 0, 0)",
+        transform: "translate3d(0, 0, 0)",
+    },
+};
+
+const mapStateToProps = (state) => {
+    return {
+        ...state.keypad,
+        layoutMode: state.layout.layoutMode,
+        navigationPadEnabled: state.layout.navigationPadEnabled,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        onPageSizeChange: (pageWidthPx, pageHeightPx) => {
+            dispatch(setPageSize(pageWidthPx, pageHeightPx));
+        },
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps, null, {
+    forwardRef: true,
+})(KeypadContainer);