@khanacademy/math-input 0.4.1 → 0.5.2

package/src/components/node-manager.js

@@ -0,0 +1,129 @@
+/**
+ * A manager for our node-to-ID system. In particular, this class is
+ * responsible for maintaing a mapping between DOM nodes and node IDs, and
+ * translating touch events from the raw positions at which they occur to the
+ * nodes over which they are occurring. This differs from browser behavior, in
+ * which touch events are only sent to the node in which a touch started.
+ */
+
+class NodeManager {
+    constructor() {
+        // A mapping from IDs to DOM nodes.
+        this._nodesById = {};
+
+        // A mapping from IDs to the borders around the DOM nodes, which can be
+        // useful for layout purposes.
+        this._bordersById = {};
+
+        // An ordered list of IDs, where DOM nodes that are "higher" on the
+        // page come earlier in the list. Note that an ID may be present in
+        // this ordered list but not be registered to a DOM node (i.e., if it
+        // is registered as a child of another DOM node, but hasn't appeared in
+        // the DOM yet).
+        this._orderedIds = [];
+
+        // Cache bounding boxes aggressively, re-computing on page resize. Our
+        // caching here makes the strict assumption that if a node is reasonably
+        // assumed to be on-screen, its bounds won't change. For example, if we
+        // see that a touch occurred within the bounds of a node, we cache those
+        // bounds.
+        // TODO(charlie): It'd be great if we could pre-compute these when the
+        // page is idle and the keypad is visible (i.e., the nodes are in their
+        // proper positions).
+        this._cachedBoundingBoxesById = {};
+        window.addEventListener("resize", () => {
+            this._cachedBoundingBoxesById = {};
+        });
+    }
+
+    /**
+     * Register a DOM node with a given identifier.
+     *
+     * @param {string} id - the identifier of the given node
+     * @param {node} domNode - the DOM node linked to the identifier
+     * @param {object} borders - an opaque object describing the node's borders
+     */
+    registerDOMNode(id, domNode, childIds, borders) {
+        this._nodesById[id] = domNode;
+        this._bordersById[id] = borders;
+
+        // Make sure that any children appear first.
+        // TODO(charlie): This is a very simplistic system that wouldn't
+        // properly handle multiple levels of nesting.
+        const allIds = [...(childIds || []), id, ...this._orderedIds];
+
+        // De-dupe the list of IDs.
+        const orderedIds = [];
+        const seenIds = {};
+        for (const id of allIds) {
+            if (!seenIds[id]) {
+                orderedIds.push(id);
+                seenIds[id] = true;
+            }
+        }
+
+        this._orderedIds = orderedIds;
+    }
+
+    /**
+     * Unregister the DOM node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node to unregister
+     */
+    unregisterDOMNode(id) {
+        delete this._nodesById[id];
+    }
+
+    /**
+     * Return the identifier of the topmost node located at the given
+     * coordinates.
+     *
+     * @param {number} x - the x coordinate at which to search for a node
+     * @param {number} y - the y coordinate at which to search for a node
+     * @returns {null|string} - null or the identifier of the topmost node at
+     *                          the given coordinates
+     */
+    idForCoords(x, y) {
+        for (const id of this._orderedIds) {
+            const domNode = this._nodesById[id];
+            if (domNode) {
+                const bounds = domNode.getBoundingClientRect();
+                if (
+                    bounds.left <= x &&
+                    bounds.right > x &&
+                    bounds.top <= y &&
+                    bounds.bottom > y
+                ) {
+                    this._cachedBoundingBoxesById[id] = bounds;
+                    return id;
+                }
+            }
+        }
+    }
+
+    /**
+     * Return the necessary layout information, including the bounds and border
+     * values, for the node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node for which to return the
+     *                      layout information
+     * @returns {object} - the bounding client rect for the given node, along
+     *                     with its borders
+     */
+    layoutPropsForId(id) {
+        if (!this._cachedBoundingBoxesById[id]) {
+            const node = this._nodesById[id];
+
+            this._cachedBoundingBoxesById[id] = node
+                ? node.getBoundingClientRect()
+                : new DOMRect();
+        }
+
+        return {
+            initialBounds: this._cachedBoundingBoxesById[id],
+            borders: this._bordersById[id],
+        };
+    }
+}
+
+export default NodeManager;

package/src/components/popover-manager.js

@@ -0,0 +1,76 @@
+/**
+ * A component that renders and animates the popovers that appear over the
+ * multi-functional keys.
+ */
+
+import PropTypes from "prop-types";
+import * as React from "react";
+import {CSSTransition} from "react-transition-group";
+
+import KeyConfigs from "../data/key-configs.js";
+
+import MultiSymbolPopover from "./multi-symbol-popover.js";
+import {
+    boundingBoxPropType,
+    keyConfigPropType,
+    popoverPropType,
+} from "./prop-types.js";
+
+// NOTE(charlie): These must be kept in sync with the transition durations and
+// classnames specified in popover.less.
+const animationTransitionName = "popover";
+const animationDurationMs = 200;
+
+// A container component used to position a popover absolutely at a specific
+// position.
+class PopoverContainer extends React.Component {
+    static propTypes = {
+        bounds: boundingBoxPropType.isRequired,
+        childKeys: PropTypes.arrayOf(keyConfigPropType).isRequired,
+    };
+
+    render() {
+        const {bounds, childKeys} = this.props;
+
+        const containerStyle = {
+            position: "absolute",
+            ...bounds,
+        };
+
+        return (
+            <div style={containerStyle}>
+                <MultiSymbolPopover keys={childKeys} />
+            </div>
+        );
+    }
+}
+
+class PopoverManager extends React.Component {
+    static propTypes = {
+        popover: popoverPropType,
+    };
+
+    render() {
+        const {popover} = this.props;
+
+        return popover ? (
+            <CSSTransition
+                in={true}
+                classNames={animationTransitionName}
+                enter={true}
+                exit={false}
+                timeout={{
+                    enter: animationDurationMs,
+                }}
+            >
+                <PopoverContainer
+                    key={popover.childKeyIds[0]}
+                    bounds={popover.bounds}
+                    childKeys={popover.childKeyIds.map((id) => KeyConfigs[id])}
+                />
+            </CSSTransition>
+        ) : null;
+    }
+}
+
+export default PopoverManager;

package/src/components/popover-state-machine.js

@@ -0,0 +1,173 @@
+/**
+ * A state machine for the popover state. In particular, this class manages the
+ * mapping of parent nodes to their children, and translates touch events that
+ * traverse various nodes to actions that are conditioned on whether a popover
+ * is present.
+ */
+
+class PopoverStateMachine {
+    constructor(handlers) {
+        this.handlers = handlers;
+
+        this.activePopover = null;
+        this.popovers = {};
+    }
+
+    /**
+     * Register a popover container as containing a set of children.
+     *
+     * @param {string} id - the identifier of the popover container
+     * @param {string[]} childIds - the identifiers of the nodes contained in
+     *                              the popover container
+     */
+    registerPopover(id, childIds) {
+        this.popovers[id] = childIds;
+    }
+
+    /**
+     * Unregister a popover container.
+     *
+     * @param {string} id - the identifier of the popover container to
+     *                      unregister
+     */
+    unregisterPopover(id) {
+        delete this.popovers[id];
+    }
+
+    /**
+     * @returns {boolean} - whether a popover is active and visible
+     */
+    isPopoverVisible() {
+        return this.activePopover != null;
+    }
+
+    /**
+     * Blur the active nodes.
+     */
+    onBlur() {
+        this.activePopover = null;
+        this.handlers.onActiveNodesChanged({
+            popover: null,
+            focus: null,
+        });
+    }
+
+    /**
+     * Handle a focus event on the node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node that was focused
+     */
+    onFocus(id) {
+        if (this.activePopover) {
+            // If we have a popover that is currently active, we focus this
+            // node if it's in the popover, and remove any highlight otherwise.
+            if (this._isNodeInsidePopover(this.activePopover, id)) {
+                this.handlers.onActiveNodesChanged({
+                    popover: {
+                        parentId: this.activePopover,
+                        childIds: this.popovers[this.activePopover],
+                    },
+                    focus: id,
+                });
+            } else {
+                this.handlers.onActiveNodesChanged({
+                    popover: {
+                        parentId: this.activePopover,
+                        childIds: this.popovers[this.activePopover],
+                    },
+                    focus: null,
+                });
+            }
+        } else {
+            this.activePopover = null;
+            this.handlers.onActiveNodesChanged({
+                popover: null,
+                focus: id,
+            });
+        }
+    }
+
+    /**
+     * Handle a long press event on the node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node that was long-pressed
+     */
+    onLongPress(id) {
+        // We only care about long presses if they occur on a popover, and we
+        // don't already have a popover active.
+        if (!this.activePopover && this.popovers[id]) {
+            // NOTE(charlie): There's an assumption here that focusing the
+            // first child is the correct behavior for a newly focused popover.
+            // This relies on the fact that the children are rendered
+            // bottom-up. If that rendering changes, this logic will need to
+            // change as well.
+            this.activePopover = id;
+            this.handlers.onActiveNodesChanged({
+                popover: {
+                    parentId: this.activePopover,
+                    childIds: this.popovers[this.activePopover],
+                },
+                focus: this._defaultNodeForPopover(this.activePopover),
+            });
+        }
+    }
+
+    /**
+     * Handle the trigger (click or hold) of the node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node that was triggered
+     */
+    onTrigger(id) {
+        this.handlers.onClick(id, id, false);
+    }
+
+    /**
+     * Handle a touch-end event on the node with the given identifier.
+     *
+     * @param {string} id - the identifier of the node over which the touch
+     *                      ended
+     */
+    onTouchEnd(id) {
+        const inPopover = !!this.activePopover;
+        if (inPopover) {
+            // If we have a popover that is currently active, we trigger a
+            // click on this node if and only if it's in the popover, with the
+            // exception that, if the node passed back _is_ the active popover,
+            // then we trigger its default node. This latter case should only
+            // be triggered if the user were to tap down on a popover-enabled
+            // node, hold for long enough for the popover to appear, and then
+            // release without ever moving their finger, in which case, the
+            // underlying gesture system would have no idea that the popover's
+            // first child node was now focused.
+            if (this._isNodeInsidePopover(this.activePopover, id)) {
+                this.handlers.onClick(id, id, inPopover);
+            } else if (this.activePopover === id) {
+                const keyId = this._defaultNodeForPopover(id);
+                this.handlers.onClick(keyId, keyId, inPopover);
+            }
+        } else if (this.popovers[id]) {
+            // Otherwise, if the node is itself a popover revealer, trigger the
+            // clicking of its default node, but pass back the popover node ID
+            // for layout purposes.
+            const keyId = this._defaultNodeForPopover(id);
+            const domNodeId = id;
+            this.handlers.onClick(keyId, domNodeId, inPopover);
+        } else if (id != null) {
+            // Finally, if we have no active popover, and we touched up over a
+            // valid key, trigger a click.
+            this.onTrigger(id);
+        }
+
+        this.onBlur();
+    }
+
+    _isNodeInsidePopover(popover, id) {
+        return this.popovers[popover].includes(id);
+    }
+
+    _defaultNodeForPopover(popover) {
+        return this.popovers[popover][0];
+    }
+}
+
+export default PopoverStateMachine;

package/src/components/prop-types.js

@@ -0,0 +1,82 @@
+/**
+ * React PropTypes that may be shared between components.
+ */
+
+import PropTypes from "prop-types";
+
+import {
+    BorderDirections,
+    EchoAnimationTypes,
+    IconTypes,
+    KeyTypes,
+    KeypadTypes,
+} from "../consts.js";
+import KeyConfigs from "../data/key-configs.js";
+
+import * as CursorContexts from "./input/cursor-contexts.js";
+
+export const iconPropType = PropTypes.shape({
+    type: PropTypes.oneOf(Object.keys(IconTypes)).isRequired,
+    data: PropTypes.string.isRequired,
+});
+
+export const keyIdPropType = PropTypes.oneOf(Object.keys(KeyConfigs));
+
+export const keyConfigPropType = PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    id: keyIdPropType.isRequired,
+    type: PropTypes.oneOf(Object.keys(KeyTypes)).isRequired,
+    childKeyIds: PropTypes.arrayOf(keyIdPropType),
+    icon: iconPropType.isRequired,
+});
+
+export const keypadConfigurationPropType = PropTypes.shape({
+    keypadType: PropTypes.oneOf(Object.keys(KeypadTypes)).isRequired,
+    extraKeys: PropTypes.arrayOf(keyIdPropType),
+});
+
+// NOTE(jared): This is no longer guaranteed to be React element
+export const keypadElementPropType = PropTypes.shape({
+    activate: PropTypes.func.isRequired,
+    dismiss: PropTypes.func.isRequired,
+    configure: PropTypes.func.isRequired,
+    setCursor: PropTypes.func.isRequired,
+    setKeyHandler: PropTypes.func.isRequired,
+    getDOMNode: PropTypes.func.isRequired,
+});
+
+export const bordersPropType = PropTypes.arrayOf(
+    PropTypes.oneOf(Object.keys(BorderDirections)),
+);
+
+export const boundingBoxPropType = PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    top: PropTypes.number,
+    right: PropTypes.number,
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+});
+
+export const echoPropType = PropTypes.shape({
+    animationId: PropTypes.string.isRequired,
+    animationType: PropTypes.oneOf(Object.keys(EchoAnimationTypes)).isRequired,
+    borders: bordersPropType,
+    id: keyIdPropType.isRequired,
+    initialBounds: boundingBoxPropType.isRequired,
+});
+
+export const cursorContextPropType = PropTypes.oneOf(
+    Object.keys(CursorContexts),
+);
+
+export const popoverPropType = PropTypes.shape({
+    parentId: keyIdPropType.isRequired,
+    bounds: boundingBoxPropType.isRequired,
+    childKeyIds: PropTypes.arrayOf(keyIdPropType).isRequired,
+});
+
+export const childrenPropType = PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+]);

package/src/components/provided-keypad.js

@@ -0,0 +1,103 @@
+/* eslint-disable react/no-unsafe */
+// @flow
+import * as React from "react";
+import ReactDOM from "react-dom";
+import {Provider} from "react-redux";
+
+import {
+    activateKeypad,
+    dismissKeypad,
+    configureKeypad,
+    setCursor,
+    setKeyHandler,
+} from "../actions/index.js";
+import {createStore} from "../store/index.js";
+
+import KeypadContainer from "./keypad-container.js";
+
+import type {CSSProperties} from "aphrodite";
+
+type Props = {|
+    onElementMounted?: ($FlowFixMe) => void,
+    onDismiss?: () => mixed,
+    style?: CSSProperties,
+|};
+
+class ProvidedKeypad extends React.Component<Props> {
+    mounted: boolean;
+    store: $FlowFixMe;
+
+    UNSAFE_componentWillMount() {
+        this.store = createStore();
+    }
+
+    componentDidMount() {
+        this.mounted = true;
+    }
+
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+
+    activate: () => void = () => {
+        this.store.dispatch(activateKeypad());
+    };
+
+    dismiss: () => void = () => {
+        this.store.dispatch(dismissKeypad());
+    };
+
+    configure: () => void = (configuration, cb) => {
+        this.store.dispatch(configureKeypad(configuration));
+
+        // 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: () => void = (cursor) => {
+        this.store.dispatch(setCursor(cursor));
+    };
+
+    setKeyHandler: (keyHandler: $FlowFixMe) => void = (keyHandler) => {
+        this.store.dispatch(setKeyHandler(keyHandler));
+    };
+
+    getDOMNode: () => $Call<typeof ReactDOM.findDOMNode, any> = () => {
+        return ReactDOM.findDOMNode(this);
+    };
+
+    render(): React.Node {
+        const {onElementMounted, ...rest} = this.props;
+
+        return (
+            <Provider store={this.store}>
+                <KeypadContainer
+                    onElementMounted={(element) => {
+                        // Append the dispatch methods that we want to expose
+                        // externally to the returned React element.
+                        const elementWithDispatchMethods = {
+                            ...element,
+                            activate: this.activate,
+                            dismiss: this.dismiss,
+                            configure: this.configure,
+                            setCursor: this.setCursor,
+                            setKeyHandler: this.setKeyHandler,
+                            getDOMNode: this.getDOMNode,
+                        };
+                        onElementMounted &&
+                            onElementMounted(elementWithDispatchMethods);
+                    }}
+                    {...rest}
+                />
+            </Provider>
+        );
+    }
+}
+
+export default ProvidedKeypad;

package/src/components/styles.js

@@ -0,0 +1,38 @@
+/**
+ * Common styles shared across components.
+ */
+
+import {StyleSheet} from "aphrodite";
+
+import {compactKeypadBorderRadiusPx} from "./common-style.js";
+
+export default StyleSheet.create({
+    row: {
+        flexDirection: "row",
+    },
+    column: {
+        flexDirection: "column",
+    },
+    oneColumn: {
+        flexGrow: 1,
+    },
+    fullWidth: {
+        width: "100%",
+    },
+    stretch: {
+        alignItems: "stretch",
+    },
+    centered: {
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    centeredText: {
+        textAlign: "center",
+    },
+    roundedTopLeft: {
+        borderTopLeftRadius: compactKeypadBorderRadiusPx,
+    },
+    roundedTopRight: {
+        borderTopRightRadius: compactKeypadBorderRadiusPx,
+    },
+});

package/src/components/svg-icon.js

@@ -0,0 +1,25 @@
+/**
+ * A component that renders a single SVG icon.
+ */
+
+import PropTypes from "prop-types";
+import * as React from "react";
+
+import * as Iconography from "./iconography/index.js";
+
+class SvgIcon extends React.Component {
+    static propTypes = {
+        color: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+    };
+
+    render() {
+        const {color, name} = this.props;
+
+        // eslint-disable-next-line import/namespace
+        const SvgForName = Iconography[name];
+        return <SvgForName color={color} />;
+    }
+}
+
+export default SvgIcon;

package/src/components/tabbar/__tests__/tabbar_test.js

@@ -0,0 +1,65 @@
+import {mount} from "enzyme";
+import * as React from "react";
+
+import Tabbar from "../tabbar.js";
+
+describe("<Tabbar />", () => {
+    it("defaults to selecting the first item", () => {
+        // Arrange
+        const wrapper = mount(
+            <Tabbar
+                items={["Numbers", "Geometry", "Operators"]}
+                onSelect={() => {}}
+            />,
+        );
+
+        // Assert
+        expect(wrapper).toHaveState("selectedItem", 0);
+        const firstItem = wrapper.find("TabbarItem").first();
+        expect(firstItem).toHaveProp("itemState", "active");
+    });
+
+    it("selects the second item", () => {
+        // Arrange
+        const wrapper = mount(
+            <Tabbar
+                items={["Numbers", "Geometry", "Operators"]}
+                onSelect={() => {}}
+            />,
+        );
+
+        // Act
+        let secondItem = wrapper.find("TabbarItem").at(1);
+        secondItem.simulate("click");
+
+        // Assert
+        expect(wrapper).toHaveState("selectedItem", 1);
+        const firstItem = wrapper.find("TabbarItem").at(0);
+        expect(firstItem).toHaveProp("itemState", "inactive");
+        // NOTE: we have to re-get the second item to get it's updated state
+        secondItem = wrapper.find("TabbarItem").at(1);
+        expect(secondItem).toHaveProp("itemState", "active");
+    });
+
+    it("tapping an already selected item doesn't change selection", () => {
+        // Arrange
+        const wrapper = mount(
+            <Tabbar
+                items={["Numbers", "Geometry", "Operators"]}
+                onSelect={() => {}}
+            />,
+        );
+
+        // Assert
+        expect(wrapper).toHaveState("selectedItem", 0);
+        const firstItem = wrapper.find("TabbarItem").first();
+        expect(firstItem).toHaveProp("itemState", "active");
+
+        // Act
+        firstItem.simulate("click");
+
+        // Assert
+        expect(wrapper).toHaveState("selectedItem", 0);
+        expect(firstItem).toHaveProp("itemState", "active");
+    });
+});