@khanacademy/math-input 6.0.2 → 7.0.0

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import ReactDOM from "react-dom";
 import { CursorContext } from "./components/input/cursor-contexts";
 import Key from "./data/keys";
 import { BorderDirection, EchoAnimationType, IconType, KeyType, KeypadType } from "./enums";
@@ -62,4 +63,12 @@ export type LayoutProps = {
     initialBounds: Bound;
 };
 export type ClickKeyCallback = (key: Key) => void;
+export interface KeypadAPI {
+    activate: () => void;
+    dismiss: () => void;
+    configure: (configuration: KeypadConfiguration, cb: () => void) => void;
+    setCursor: (cursor: Cursor) => void;
+    setKeyHandler: (keyHandler: KeyHandler) => void;
+    getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
+}
 export {};

package/dist/types.js.flow

@@ -4,6 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
+import ReactDOM from "react-dom";
 import { CursorContext } from "./components/input/cursor-contexts";
 import Key from "./data/keys";
 import {
@@ -77,3 +78,14 @@ export type LayoutProps = {|
   initialBounds: Bound,
 |};
 export type ClickKeyCallback = (key: Key) => void;
+export interface KeypadAPI {
+  activate: () => void;
+  dismiss: () => void;
+  configure: (configuration: KeypadConfiguration, cb: () => void) => void;
+  setCursor: (cursor: Cursor) => void;
+  setKeyHandler: (keyHandler: KeyHandler) => void;
+  getDOMNode: () => $Call<
+    <R>((...args: any[]) => R) => R,
+    typeof ReactDOM.findDOMNode
+  >;
+}

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "6.0.2",
+    "version": "7.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -20,7 +20,7 @@
     "scripts": {},
     "dependencies": {
         "@khanacademy/perseus-core": "0.0.2",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#32d9f351aaa68537170b3120a52e99b8def3a2c3",
         "performance-now": "^0.2.0"
     },
     "devDependencies": {

package/src/components/input/math-input.tsx

@@ -12,19 +12,18 @@ import {
     wonderBlocksBlue,
     offBlack,
 } from "../common-style";
-import ProvidedKeypad from "../keypad-legacy/provided-keypad";
 
 import CursorHandle from "./cursor-handle";
 import DragListener from "./drag-listener";
 import MathWrapper from "./math-wrapper";
 import {scrollIntoView} from "./scroll-into-view";
 
-import type {Cursor} from "../../types";
+import type {Cursor, KeypadAPI} from "../../types";
 
 const constrainingFrictionFactor = 0.8;
 
 type Props = {
-    keypadElement: ProvidedKeypad;
+    keypadElement?: KeypadAPI;
     onBlur: () => void;
     onChange: (value: string, callback: any) => void;
     onFocus: () => void;
@@ -267,7 +266,7 @@ class MathInput extends React.Component<Props, State> {
     /** Gets and cache they bounds of the keypadElement */
     _getKeypadBounds: () => any = () => {
         if (!this._keypadBounds) {
-            const node = this.props.keypadElement.getDOMNode();
+            const node = this.props.keypadElement?.getDOMNode();
             this._cacheKeypadBounds(node);
         }
         return this._keypadBounds;
@@ -341,7 +340,7 @@ class MathInput extends React.Component<Props, State> {
     focus: () => void = () => {
         // Pass this component's handleKey method to the keypad so it can call
         // it whenever it needs to trigger a keypress action.
-        this.props.keypadElement.setKeyHandler((key) => {
+        this.props.keypadElement?.setKeyHandler((key) => {
             const cursor = this.mathField.pressKey(key);
 
             // Trigger an `onChange` if the value in the input changed, and hide

package/src/components/keypad/index.tsx

@@ -1,173 +1,2 @@
-import Color from "@khanacademy/wonder-blocks-color";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-import {useEffect} from "react";
-
-import Key from "../../data/keys";
-import {ClickKeyCallback} from "../../types";
-import {CursorContext} from "../input/cursor-contexts";
-import Tabbar from "../tabbar/tabbar";
-import {TabbarItemType} from "../tabbar/types";
-
-import ExtrasPage from "./keypad-pages/extras-page";
-import GeometryPage from "./keypad-pages/geometry-page";
-import NumbersPage from "./keypad-pages/numbers-page";
-import OperatorsPage from "./keypad-pages/operators-page";
-import SharedKeys from "./shared-keys";
-
-import type {SendEventFn} from "@khanacademy/perseus-core";
-
-export type Props = {
-    extraKeys: ReadonlyArray<Key>;
-    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
-    showDismiss?: boolean;
-
-    multiplicationDot?: boolean;
-    divisionKey?: boolean;
-
-    trigonometry?: boolean;
-    preAlgebra?: boolean;
-    logarithms?: boolean;
-    basicRelations?: boolean;
-    advancedRelations?: boolean;
-
-    onClickKey: ClickKeyCallback;
-    sendEvent: SendEventFn;
-};
-
-const defaultProps = {
-    extraKeys: [],
-};
-
-function allPages(props: Props): ReadonlyArray<TabbarItemType> {
-    const pages: Array<TabbarItemType> = ["Numbers"];
-
-    if (
-        // OperatorsButtonSets
-        props.preAlgebra ||
-        props.logarithms ||
-        props.basicRelations ||
-        props.advancedRelations
-    ) {
-        pages.push("Operators");
-    }
-
-    if (props.trigonometry) {
-        pages.push("Geometry");
-    }
-
-    if (props.extraKeys?.length) {
-        pages.push("Extras");
-    }
-
-    return pages;
-}
-
-// The main (v2) Keypad. Use this component to present an accessible, onscreen
-// keypad to learners for entering math expressions.
-export default function Keypad(props: Props) {
-    const [selectedPage, setSelectedPage] =
-        React.useState<TabbarItemType>("Numbers");
-    const [isMounted, setIsMounted] = React.useState<boolean>(false);
-
-    const availablePages = allPages(props);
-
-    const {
-        onClickKey,
-        cursorContext,
-        extraKeys,
-        multiplicationDot,
-        divisionKey,
-        preAlgebra,
-        logarithms,
-        basicRelations,
-        advancedRelations,
-        showDismiss,
-        sendEvent,
-    } = props;
-
-    useEffect(() => {
-        if (!isMounted) {
-            sendEvent({
-                type: "math-input:keypad-opened",
-                payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
-            });
-            setIsMounted(true);
-        }
-        return () => {
-            if (isMounted) {
-                sendEvent({
-                    type: "math-input:keypad-closed",
-                    payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
-                });
-                setIsMounted(false);
-            }
-        };
-    }, [sendEvent, isMounted]);
-
-    return (
-        <View>
-            <Tabbar
-                items={availablePages}
-                selectedItem={selectedPage}
-                onSelectItem={(tabbarItem: TabbarItemType) => {
-                    setSelectedPage(tabbarItem);
-                }}
-                style={styles.tabbar}
-                onClickClose={
-                    showDismiss ? () => onClickKey("DISMISS") : undefined
-                }
-            />
-
-            <View
-                style={styles.grid}
-                role="grid"
-                tabIndex={0}
-                aria-label="Keypad"
-            >
-                {selectedPage === "Numbers" && (
-                    <NumbersPage onClickKey={onClickKey} />
-                )}
-                {selectedPage === "Extras" && (
-                    <ExtrasPage onClickKey={onClickKey} extraKeys={extraKeys} />
-                )}
-                {selectedPage === "Operators" && (
-                    <OperatorsPage
-                        onClickKey={onClickKey}
-                        preAlgebra={preAlgebra}
-                        logarithms={logarithms}
-                        basicRelations={basicRelations}
-                        advancedRelations={advancedRelations}
-                    />
-                )}
-                {selectedPage === "Geometry" && (
-                    <GeometryPage onClickKey={onClickKey} />
-                )}
-                <SharedKeys
-                    onClickKey={onClickKey}
-                    cursorContext={cursorContext}
-                    multiplicationDot={multiplicationDot}
-                    divisionKey={divisionKey}
-                    selectedPage={selectedPage}
-                />
-            </View>
-        </View>
-    );
-}
-
-Keypad.defaultProps = defaultProps;
-
-const styles = StyleSheet.create({
-    tabbar: {
-        background: Color.white,
-    },
-    grid: {
-        display: "grid",
-        gridTemplateColumns: "repeat(6, 1fr)",
-        gridTemplateRows: "repeat(4, 1fr)",
-        backgroundColor: "#DBDCDD",
-        maxHeight: 200,
-        maxWidth: 300,
-    },
-});
+export {default} from "./keypad";
+export {default as MobileKeypad} from "./mobile-keypad";

package/src/components/keypad/keypad.stories.tsx

@@ -3,7 +3,7 @@ import {INITIAL_VIEWPORTS} from "@storybook/addon-viewport";
 import {ComponentStory} from "@storybook/react";
 import * as React from "react";
 
-import Keypad, {Props as KeypadProps} from "./index";
+import Keypad, {Props as KeypadProps} from "./keypad";
 
 const opsPage = "Operators Page";
 const numsPage = "Numbers Page";
@@ -26,6 +26,7 @@ export default {
         multiplicationDot: false,
         preAlgebra: false,
         trigonometry: false,
+        sendEvent: () => {},
     },
     argTypes: {
         advancedRelations: {

package/src/components/keypad/keypad.tsx

@@ -0,0 +1,171 @@
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+import {useEffect} from "react";
+
+import Key from "../../data/keys";
+import {ClickKeyCallback} from "../../types";
+import {CursorContext} from "../input/cursor-contexts";
+import Tabbar from "../tabbar";
+
+import ExtrasPage from "./keypad-pages/extras-page";
+import GeometryPage from "./keypad-pages/geometry-page";
+import NumbersPage from "./keypad-pages/numbers-page";
+import OperatorsPage from "./keypad-pages/operators-page";
+import SharedKeys from "./shared-keys";
+
+import type {TabbarItemType} from "../tabbar";
+import type {SendEventFn} from "@khanacademy/perseus-core";
+
+export type Props = {
+    extraKeys: ReadonlyArray<Key>;
+    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
+    showDismiss?: boolean;
+
+    multiplicationDot?: boolean;
+    divisionKey?: boolean;
+
+    trigonometry?: boolean;
+    preAlgebra?: boolean;
+    logarithms?: boolean;
+    basicRelations?: boolean;
+    advancedRelations?: boolean;
+
+    onClickKey: ClickKeyCallback;
+    sendEvent: SendEventFn;
+};
+
+const defaultProps = {
+    extraKeys: [],
+};
+
+function allPages(props: Props): ReadonlyArray<TabbarItemType> {
+    const pages: Array<TabbarItemType> = ["Numbers"];
+
+    if (
+        // OperatorsButtonSets
+        props.preAlgebra ||
+        props.logarithms ||
+        props.basicRelations ||
+        props.advancedRelations
+    ) {
+        pages.push("Operators");
+    }
+
+    if (props.trigonometry) {
+        pages.push("Geometry");
+    }
+
+    if (props.extraKeys?.length) {
+        pages.push("Extras");
+    }
+
+    return pages;
+}
+
+// The main (v2) Keypad. Use this component to present an accessible, onscreen
+// keypad to learners for entering math expressions.
+export default function Keypad(props: Props) {
+    const [selectedPage, setSelectedPage] =
+        React.useState<TabbarItemType>("Numbers");
+    const [isMounted, setIsMounted] = React.useState<boolean>(false);
+
+    const availablePages = allPages(props);
+
+    const {
+        onClickKey,
+        cursorContext,
+        extraKeys,
+        multiplicationDot,
+        divisionKey,
+        preAlgebra,
+        logarithms,
+        basicRelations,
+        advancedRelations,
+        showDismiss,
+        sendEvent,
+    } = props;
+
+    useEffect(() => {
+        if (!isMounted) {
+            sendEvent({
+                type: "math-input:keypad-opened",
+                payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
+            });
+            setIsMounted(true);
+        }
+        return () => {
+            if (isMounted) {
+                sendEvent({
+                    type: "math-input:keypad-closed",
+                    payload: {virtualKeypadVersion: "MATH_INPUT_KEYPAD_V2"},
+                });
+                setIsMounted(false);
+            }
+        };
+    }, [sendEvent, isMounted]);
+
+    return (
+        <View>
+            <Tabbar
+                items={availablePages}
+                selectedItem={selectedPage}
+                onSelectItem={(tabbarItem: TabbarItemType) => {
+                    setSelectedPage(tabbarItem);
+                }}
+                style={styles.tabbar}
+                onClickClose={
+                    showDismiss ? () => onClickKey("DISMISS") : undefined
+                }
+            />
+
+            <View
+                style={styles.grid}
+                role="grid"
+                tabIndex={0}
+                aria-label="Keypad"
+            >
+                {selectedPage === "Numbers" && (
+                    <NumbersPage onClickKey={onClickKey} />
+                )}
+                {selectedPage === "Extras" && (
+                    <ExtrasPage onClickKey={onClickKey} extraKeys={extraKeys} />
+                )}
+                {selectedPage === "Operators" && (
+                    <OperatorsPage
+                        onClickKey={onClickKey}
+                        preAlgebra={preAlgebra}
+                        logarithms={logarithms}
+                        basicRelations={basicRelations}
+                        advancedRelations={advancedRelations}
+                    />
+                )}
+                {selectedPage === "Geometry" && (
+                    <GeometryPage onClickKey={onClickKey} />
+                )}
+                <SharedKeys
+                    onClickKey={onClickKey}
+                    cursorContext={cursorContext}
+                    multiplicationDot={multiplicationDot}
+                    divisionKey={divisionKey}
+                    selectedPage={selectedPage}
+                />
+            </View>
+        </View>
+    );
+}
+
+Keypad.defaultProps = defaultProps;
+
+const styles = StyleSheet.create({
+    tabbar: {
+        background: Color.white,
+    },
+    grid: {
+        display: "grid",
+        gridTemplateColumns: "repeat(6, 1fr)",
+        gridTemplateRows: "repeat(4, 1fr)",
+        backgroundColor: "#DBDCDD",
+    },
+});

package/src/components/keypad/mobile-keypad.tsx

@@ -0,0 +1,165 @@
+import {StyleType} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+import Key from "../../data/keys";
+import {View} from "../../fake-react-native-web/index";
+import {Cursor, KeypadConfiguration, KeyHandler, KeypadAPI} from "../../types";
+
+import Keypad from "./index";
+
+/**
+ * This is the v2 equivalent of v1's ProvidedKeypad. It follows the same
+ * external API so that it can be hot-swapped with the v1 keypad and
+ * is responsible for connecting the keypad with MathInput and the Renderer.
+ *
+ * Ideally this strategy of attaching methods on the class component for
+ * other components to call will be replaced props/callbacks since React
+ * doesn't support this type of code anymore (functional components
+ * can't have methods attached to them).
+ */
+
+type Props = {
+    onElementMounted?: (arg1: any) => void;
+    onDismiss?: () => void;
+    style?: StyleType;
+};
+
+type State = {
+    active: boolean;
+    keypadConfig?: KeypadConfiguration;
+    keyHandler?: KeyHandler;
+    cursor?: Cursor;
+};
+
+class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
+    hasMounted = false;
+
+    state: State = {
+        active: false,
+    };
+
+    activate: () => void = () => {
+        this.setState({active: true});
+    };
+
+    dismiss: () => void = () => {
+        this.setState({active: false}, () => {
+            this.props.onDismiss?.();
+        });
+    };
+
+    configure: (configuration: KeypadConfiguration, cb: () => void) => void = (
+        configuration,
+        cb,
+    ) => {
+        this.setState({keypadConfig: configuration});
+
+        // TODO(matthewc)[LC-1080]: this was brought in from v1's ProvidedKeypad.
+        // We need to investigate whether we still need this.
+        // 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: (cursor: Cursor) => void = (cursor) => {
+        this.setState({cursor});
+    };
+
+    setKeyHandler: (keyHandler: KeyHandler) => void = (keyHandler) => {
+        this.setState({keyHandler});
+    };
+
+    getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode> = () => {
+        return ReactDOM.findDOMNode(this);
+    };
+
+    _handleClickKey(key: Key) {
+        if (key === "DISMISS") {
+            this.dismiss();
+            return;
+        }
+
+        const cursor = this.state.keyHandler?.(key);
+        this.setState({cursor});
+    }
+
+    render(): React.ReactNode {
+        const {active, cursor, keypadConfig} = this.state;
+
+        const containerStyle = [
+            styles.keypadContainer,
+            active ? styles.activeKeypadContainer : null,
+        ];
+
+        const isExpression = keypadConfig?.keypadType === "EXPRESSION";
+
+        return (
+            <View
+                style={containerStyle}
+                ref={(element) => {
+                    if (!this.hasMounted && element) {
+                        // TODO(matthewc)[LC-1081]: clean up this weird
+                        // object and type the onElementMounted callback
+                        // 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,
+                        } as const;
+
+                        this.hasMounted = true;
+                        this.props.onElementMounted?.(
+                            elementWithDispatchMethods,
+                        );
+                    }
+                }}
+            >
+                <Keypad
+                    // TODO(jeremy)
+                    sendEvent={async () => {}}
+                    extraKeys={keypadConfig?.extraKeys}
+                    onClickKey={(key) => this._handleClickKey(key)}
+                    cursorContext={cursor?.context}
+                    multiplicationDot={isExpression}
+                    divisionKey={isExpression}
+                    trigonometry={isExpression}
+                    preAlgebra={isExpression}
+                    logarithms={isExpression}
+                    basicRelations={isExpression}
+                    advancedRelations={isExpression}
+                    showDismiss
+                />
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    keypadContainer: {
+        bottom: 0,
+        left: 0,
+        right: 0,
+        position: "fixed",
+        transition: `200ms ease-out`,
+        transitionProperty: "transform",
+        transform: "translate3d(0, 100%, 0)",
+    },
+
+    activeKeypadContainer: {
+        transform: "translate3d(0, 0, 0)",
+    },
+});
+
+export default MobileKeypad;

package/src/components/keypad/shared-keys.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import Keys from "../../data/key-configs";
 import {ClickKeyCallback} from "../../types";
 import {CursorContext} from "../input/cursor-contexts";
-import {TabbarItemType} from "../tabbar/types";
+import {TabbarItemType} from "../tabbar";
 
 import {KeypadButton} from "./keypad-button";
 

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

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

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

@@ -12,7 +12,12 @@ import {
 } from "./store/actions";
 import {createStore} from "./store/index";
 
-import type {Cursor, KeypadConfiguration, KeyHandler} from "../../types";
+import type {
+    Cursor,
+    KeypadConfiguration,
+    KeyHandler,
+    KeypadAPI,
+} from "../../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type Props = {
@@ -21,7 +26,7 @@ type Props = {
     style?: StyleType;
 };
 
-class ProvidedKeypad extends React.Component<Props> {
+class ProvidedKeypad extends React.Component<Props> implements KeypadAPI {
     store: any;
 
     constructor(props) {

package/src/components/keypad-legacy/two-page-keypad.tsx

@@ -14,13 +14,14 @@ import {
     innerBorderWidthPx,
     offBlack16,
 } from "../common-style";
-import Tabbar from "../tabbar/tabbar";
-import {TabbarItemType} from "../tabbar/types";
+import Tabbar from "../tabbar";
 
 import Keypad from "./keypad";
 import {State as ReduxState} from "./store/types";
 import Styles from "./styles";
 
+import type {TabbarItemType} from "../tabbar";
+
 const {column, row, fullWidth} = Styles;
 
 interface ReduxProps {

package/src/components/prop-types.js

@@ -5,7 +5,6 @@
 import PropTypes from "prop-types";
 
 // NOTE(jared): This is no longer guaranteed to be React element
-// NOTE(matthewc): only seems to be used in Perseus
 export const keypadElementPropType = PropTypes.shape({
     activate: PropTypes.func.isRequired,
     dismiss: PropTypes.func.isRequired,