@khanacademy/math-input 14.1.0 → 14.2.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "14.1.0",
+    "version": "14.2.0",
     "publishConfig": {
         "access": "public"
     },
@@ -20,8 +20,8 @@
     "source": "src/index.ts",
     "scripts": {},
     "dependencies": {
-        "@khanacademy/perseus-core": "1.1.1",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#32d9f351aaa68537170b3120a52e99b8def3a2c3",
+        "@khanacademy/perseus-core": "1.1.2",
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc",
         "performance-now": "^0.2.0"
     },
     "devDependencies": {
@@ -30,6 +30,7 @@
         "@khanacademy/wonder-blocks-core": "^6.0.0",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-popover": "^2.0.11",
+        "@khanacademy/wonder-blocks-timing": "^4.0.2",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "aphrodite": "^1.1.0",
         "jquery": "^2.1.1",
@@ -49,6 +50,7 @@
         "@khanacademy/wonder-blocks-color": "^2.0.1",
         "@khanacademy/wonder-blocks-core": "^6.0.0",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
+        "@khanacademy/wonder-blocks-timing": "^4.0.2",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "aphrodite": "^1.1.0",
         "jquery": "^2.1.1",

package/src/components/aphrodite-css-transition-group/index.tsx

@@ -0,0 +1,78 @@
+/**
+ * Aphrodite doesn't play well with CSSTransition from react-transition-group,
+ * which assumes that you have CSS classes and it can combine them arbitrarily.
+ *
+ * There are also some issue with react-transition-group that make it difficult
+ * to work.  Even if the CSS classes are defined ahead of time it makes no
+ * guarantee that the start style will be applied by the browser before the
+ * active style is applied.  This can cause the first time a transition runs to
+ * fail.
+ *
+ * AphroditeCSSTransitionGroup provides a wrapper around TransitionGroup to
+ * address these issues.
+ *
+ * There are three types of transitions:
+ * - appear: the time the child is added to the render tree
+ * - enter: whenever the child is added to the render tree after "appear".  If
+ *   no "appear" transition is specified then the "enter" transition will also
+ *   be used for the first time the child is added to the render tree.
+ * - leave: whenever the child is removed from the render tree
+ *
+ * Each transition type has two states:
+ * - base: e.g. css(enter)
+ * - active: e.g. css(enter, enterActive)
+ *
+ * If "done" styles are not provided, the "active" style will remain on the
+ * component after the animation has completed.
+ *
+ * Usage: TBD
+ *
+ * Limitations:
+ * - This component only supports a single child whereas TransitionGroup supports
+ *   multiple children.
+ * - We ignore inline styles that are provided as part of AnimationStyles.
+ *
+ * TODOs:
+ * - (FEI-3211): Change the API for AphroditeCSSTransitionGroup so that it makes
+ *   bad states impossible.
+ */
+import * as React from "react";
+import {TransitionGroup} from "react-transition-group";
+
+import TransitionChild from "./transition-child";
+
+import type {AnimationStyles} from "./types";
+
+type Props = {
+    // If a function is provided, that function will be called to retrieve the
+    // current set of animation styles to be used when animating the children.
+    transitionStyle: AnimationStyles | (() => AnimationStyles);
+    transitionAppearTimeout?: number;
+    transitionEnterTimeout?: number;
+    transitionLeaveTimeout?: number;
+    children?: React.ReactNode;
+};
+
+class AphroditeCSSTransitionGroup extends React.Component<Props> {
+    render(): React.ReactNode {
+        const {children} = this.props;
+        return (
+            // `component={null}` prevents wrapping each child with a <div>
+            // which can muck with certain layouts.
+            <TransitionGroup component={null}>
+                {React.Children.map(children, (child) => (
+                    <TransitionChild
+                        transitionStyles={this.props.transitionStyle}
+                        appearTimeout={this.props.transitionAppearTimeout}
+                        enterTimeout={this.props.transitionEnterTimeout}
+                        leaveTimeout={this.props.transitionLeaveTimeout}
+                    >
+                        {child}
+                    </TransitionChild>
+                ))}
+            </TransitionGroup>
+        );
+    }
+}
+
+export default AphroditeCSSTransitionGroup;

package/src/components/aphrodite-css-transition-group/transition-child.tsx

@@ -0,0 +1,191 @@
+import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+import {processStyleType} from "./util";
+
+import type {AnimationStyles} from "./types";
+import type {WithActionSchedulerProps} from "@khanacademy/wonder-blocks-timing";
+
+type ChildProps = {
+    transitionStyles: AnimationStyles | (() => AnimationStyles);
+    appearTimeout?: number; // default appearTimeout to be the same as enterTimeout
+    enterTimeout?: number;
+    leaveTimeout?: number;
+    children: React.ReactNode;
+    in?: boolean; // provided by TransitionGroup
+} & WithActionSchedulerProps;
+
+type ChildState = {
+    // Keeps track of whether we should render our children or not.
+    status: "mounted" | "unmounted";
+};
+
+class TransitionChild extends React.Component<ChildProps, ChildState> {
+    // Each 2-tuple in the queue represents two classnames: one to remove and
+    // one to add (in that order).
+    classNameQueue: Array<[string, string]>;
+    // We keep track of all of the current applied classes so that we can remove
+    // them before a new transition starts in the case of the current transition
+    // being interrupted.
+    appliedClassNames: Set<string>;
+    _isMounted = false;
+
+    // The use of getDerivedStateFromProps here is to avoid an extra call to
+    // setState if the component re-enters.  This can happen if TransitionGroup
+    // sets `in` from `false` to `true`.
+    // eslint-disable-next-line no-restricted-syntax
+    static getDerivedStateFromProps(
+        {in: nextIn}: ChildProps,
+        prevState: ChildState,
+    ): Partial<ChildState> | null {
+        if (nextIn && prevState.status === "unmounted") {
+            return {status: "mounted"};
+        }
+        return null;
+    }
+
+    constructor(props: ChildProps) {
+        super(props);
+
+        this._isMounted = false;
+        this.classNameQueue = [];
+        this.appliedClassNames = new Set();
+
+        this.state = {
+            status: "mounted",
+        };
+    }
+
+    componentDidMount() {
+        this._isMounted = true;
+
+        if (typeof this.props.appearTimeout === "number") {
+            this.transition("appear", this.props.appearTimeout);
+        } else {
+            this.transition("enter", this.props.enterTimeout);
+        }
+    }
+
+    componentDidUpdate(oldProps: ChildProps, oldState: ChildState) {
+        if (oldProps.in && !this.props.in) {
+            this.transition("leave", this.props.leaveTimeout);
+        } else if (!oldProps.in && this.props.in) {
+            this.transition("enter", this.props.enterTimeout);
+        }
+
+        if (oldState.status !== "mounted" && this.state.status === "mounted") {
+            // Remove the node from the DOM
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({status: "unmounted"});
+        }
+    }
+
+    // NOTE: This will only get called when the parent TransitionGroup becomes
+    // unmounted.  This is because that component clones all of its children and
+    // keeps them around so that they can be animated when leaving and also so
+    // that the can be animated when re-rentering if that occurs.
+    componentWillUnmount() {
+        this._isMounted = false;
+        this.props.schedule.clearAll();
+    }
+
+    removeAllClasses(node: Element) {
+        for (const className of this.appliedClassNames) {
+            this.removeClass(node, className);
+        }
+    }
+
+    addClass = (elem: Element, className: string): void => {
+        if (className) {
+            elem.classList.add(className);
+            this.appliedClassNames.add(className);
+        }
+    };
+
+    removeClass = (elem: Element, className: string): void => {
+        if (className) {
+            elem.classList.remove(className);
+            this.appliedClassNames.delete(className);
+        }
+    };
+
+    transition(
+        animationType: "appear" | "enter" | "leave",
+        duration?: number | null,
+    ) {
+        const node = ReactDOM.findDOMNode(this);
+
+        if (!(node instanceof Element)) {
+            return;
+        }
+
+        // Remove any classes from previous transitions.
+        this.removeAllClasses(node);
+
+        // A previous transition may still be in progress so clear its timers.
+        this.props.schedule.clearAll();
+
+        const transitionStyles =
+            typeof this.props.transitionStyles === "function"
+                ? this.props.transitionStyles()
+                : this.props.transitionStyles;
+
+        const {className} = processStyleType(transitionStyles[animationType]);
+        const {className: activeClassName} = processStyleType([
+            transitionStyles[animationType],
+            transitionStyles[animationType + "Active"],
+        ]);
+
+        // Put the node in the starting position.
+        this.addClass(node, className);
+
+        // Queue the component to show the "active" style.
+        this.queueClass(className, activeClassName);
+
+        // Unmount the children after the 'leave' transition has completed.
+        if (animationType === "leave") {
+            this.props.schedule.timeout(() => {
+                if (this._isMounted) {
+                    this.setState({status: "unmounted"});
+                }
+            }, duration || 0);
+        }
+    }
+
+    queueClass(removeClassName: string, addClassName: string) {
+        this.classNameQueue.push([removeClassName, addClassName]);
+        this.props.schedule.animationFrame(this.flushClassNameQueue);
+    }
+
+    flushClassNameQueue = () => {
+        if (this._isMounted) {
+            const node = ReactDOM.findDOMNode(this);
+            if (node instanceof Element) {
+                this.classNameQueue.forEach(
+                    ([removeClassName, addClassName]: [any, any]) => {
+                        // Remove the old class before adding a new class just
+                        // in case the new class is the same as the old one.
+                        this.removeClass(node, removeClassName);
+                        this.addClass(node, addClassName);
+                    },
+                );
+            }
+        }
+
+        // Remove all items in the Array.
+        this.classNameQueue.length = 0;
+    };
+
+    render(): React.ReactNode {
+        const {status} = this.state;
+
+        if (status === "unmounted") {
+            return null;
+        }
+
+        return this.props.children;
+    }
+}
+
+export default withActionScheduler(TransitionChild);

package/src/components/aphrodite-css-transition-group/types.ts

@@ -0,0 +1,20 @@
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+import type {CSSProperties} from "aphrodite";
+
+export type AnimationStyles = {
+    enter?: StyleType;
+    enterActive?: StyleType;
+    leave?: StyleType;
+    leaveActive?: StyleType;
+    appear?: StyleType;
+    appearActive?: StyleType;
+};
+
+export type InAnimationStyles = {
+    enter?: CSSProperties;
+    enterActive?: CSSProperties;
+    leave?: CSSProperties;
+    leaveActive?: CSSProperties;
+    appear?: CSSProperties;
+    appearActive?: CSSProperties;
+};

package/src/components/aphrodite-css-transition-group/util.ts

@@ -0,0 +1,97 @@
+import {entries} from "@khanacademy/wonder-stuff-core";
+import {StyleSheet, css} from "aphrodite";
+
+import type {InAnimationStyles} from "./types";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+import type {CSSProperties} from "aphrodite";
+
+function flatten(list?: StyleType): ReadonlyArray<CSSProperties> {
+    const result: Array<CSSProperties> = [];
+
+    if (!list) {
+        return result;
+    }
+    if (Array.isArray(list)) {
+        for (const item of list) {
+            result.push(...flatten(item));
+        }
+    } else {
+        result.push(list as any);
+    }
+
+    return result;
+}
+
+export function processStyleType(style?: StyleType): {
+    className: string;
+    style: Record<any, any>;
+} {
+    const stylesheetStyles: Array<CSSProperties> = [];
+    const inlineStyles: Array<CSSProperties> = [];
+
+    if (!style) {
+        return {
+            style: {},
+            className: "",
+        };
+    }
+
+    // Check to see if we should inline all the styles for snapshot tests.
+    const shouldInlineStyles =
+        typeof globalThis !== "undefined" &&
+        globalThis.SNAPSHOT_INLINE_APHRODITE;
+
+    flatten(style).forEach((child) => {
+        // Check for aphrodite internal property
+        const _definition = (child as any)._definition;
+        if (_definition != null) {
+            if (shouldInlineStyles) {
+                const def: Record<string, any> = {};
+                // React 16 complains about invalid keys in inline styles.
+                // It doesn't accept kebab-case in media queries and instead
+                // prefers camelCase.
+                for (const [key, value] of entries(_definition)) {
+                    // This regex converts all instances of -{lowercaseLetter}
+                    // to the uppercase version of that letter, without the
+                    // leading dash.
+                    def[
+                        key.replace(/-[a-z]/g, (match) =>
+                            match[1].toUpperCase(),
+                        )
+                    ] = value;
+                }
+                inlineStyles.push(def);
+            } else {
+                stylesheetStyles.push(child);
+            }
+        } else {
+            inlineStyles.push(child);
+        }
+    });
+
+    const inlineStylesObject = Object.assign({}, ...inlineStyles);
+
+    // TODO(somewhatabstract): When aphrodite no longer puts "!important" on
+    // all the styles, remove this <ADD JIRA ISSUE HERE IF THIS PASSES REVIEW>
+    // If we're not snapshotting styles, let's create a class for the inline
+    // styles so that they can apply to the element even with aphrodite's
+    // use of !important.
+    if (inlineStyles.length > 0 && !shouldInlineStyles) {
+        const inlineStylesStyleSheet = StyleSheet.create({
+            inlineStyles: inlineStylesObject,
+        });
+        stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);
+    }
+
+    return {
+        style: shouldInlineStyles ? inlineStylesObject : {},
+        className: css(...stylesheetStyles),
+    };
+}
+
+export const createTransition = (styles: InAnimationStyles) => {
+    // NOTE(kevinb): TypeScript infers the optional properties on `InAnimationStyles`
+    // as `CSSProperties | undefined`.  This is not compatible with `StyleSheet.create`
+    // which expects `CSSProperties` on the object that's passed in to it.
+    return StyleSheet.create(styles as any);
+};