@khanacademy/math-input 6.0.3 → 8.0.0

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/keypad-switch.tsx

@@ -0,0 +1,23 @@
+import {StyleType} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+import {MobileKeypad} from "./keypad";
+import LegacyKeypad from "./keypad-legacy";
+
+type Props = {
+    onElementMounted?: (arg1: any) => void;
+    onDismiss?: () => void;
+    style?: StyleType;
+
+    useV2Keypad?: boolean;
+};
+
+function KeypadSwitch(props: Props) {
+    const {useV2Keypad = false, ...rest} = props;
+
+    const KeypadComponent = useV2Keypad ? MobileKeypad : LegacyKeypad;
+
+    return <KeypadComponent {...rest} />;
+}
+
+export default KeypadSwitch;

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,

package/src/components/tabbar/index.ts

@@ -0,0 +1,2 @@
+export {default} from "./tabbar";
+export {TabbarItemType} from "./types";

package/src/full-math-input.stories.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+
+import {KeypadAPI} from "./types";
+
+import {KeypadInput, KeypadType, Keypad} from "./index";
+
+export default {
+    title: "Full Mobile MathInput",
+};
+
+export const Basic = () => {
+    const [value, setValue] = React.useState("");
+    // Reference to the keypad
+    const [keypadElement, setKeypadElement] = React.useState<KeypadAPI>();
+    // Whether to use Expression or Fraction keypad
+    const [expression, setExpression] = React.useState<boolean>(true);
+    // Whether to use v1 or v2 keypad
+    const [v2Keypad, setV2Keypad] = React.useState<boolean>(true);
+
+    React.useEffect(() => {
+        keypadElement?.configure(
+            {
+                keypadType: expression
+                    ? KeypadType.EXPRESSION
+                    : KeypadType.FRACTION,
+                extraKeys: expression ? ["x", "y", "PI", "THETA"] : [],
+            },
+            () => {},
+        );
+    }, [keypadElement, expression]);
+
+    return (
+        <div>
+            <div style={{padding: "1rem 0"}}>
+                <button onClick={() => setExpression(!expression)}>
+                    {`Use ${expression ? "Fraction" : "Expression"} Keypad`}
+                </button>
+                <button onClick={() => setV2Keypad(!v2Keypad)}>
+                    {`Use ${v2Keypad ? "Legacy" : "New"} Keypad`}
+                </button>
+            </div>
+
+            <KeypadInput
+                value={value}
+                keypadElement={keypadElement}
+                onChange={(newValue, callback) => {
+                    setValue(newValue);
+                    callback();
+                }}
+                onFocus={() => {
+                    keypadElement?.activate();
+                }}
+                onBlur={() => {
+                    keypadElement?.dismiss();
+                }}
+            />
+
+            <Keypad
+                onElementMounted={(node) => {
+                    if (node) {
+                        setKeypadElement(node);
+                    }
+                }}
+                useV2Keypad={v2Keypad}
+            />
+        </div>
+    );
+};

package/src/index.ts

@@ -4,20 +4,39 @@
 
 import "../less/main.less";
 
-export {CursorContext} from "./components/input/cursor-contexts";
+// MathInput input field (MathQuill wrapper)
 export {default as KeypadInput} from "./components/input/math-input";
+
+export {
+    // Helper to create a MathQuill MathField
+    createMathField,
+    // Instance of the MathQuill library
+    mathQuillInstance,
+} from "./components/input/mathquill-instance";
+
+// MathQuill MathField type
+export {type MathFieldInterface} from "./components/input/mathquill-types";
+
+// Cursor context data: where in a forumla the cursor is in
+// ex: in numerator, in parenthesis, in subscript
+export {CursorContext} from "./components/input/cursor-contexts";
+
+// Helper to get cursor context from MathField
 export {getCursorContext} from "./components/input/mathquill-helpers";
 
+// Wrapper around v1 and v2 keypads to switch between them
+export {default as Keypad} from "./components/keypad-switch";
+
+// Context used to pass data/refs around
+export {default as KeypadContext} from "./components/keypad-context";
+
+// External API of the "Provided" keypad component
 export {keypadElementPropType} from "./components/prop-types";
-export {default as LegacyKeypad} from "./components/keypad-legacy/provided-keypad";
-export {default as KeyConfigs} from "./data/key-configs";
+
+// Key list, configuration map, and types
 export type {default as Keys} from "./data/keys";
+export {default as KeyConfigs} from "./data/key-configs";
 export {type KeyType, KeypadType} from "./enums";
 
-export {default as Keypad} from "./components/keypad/index";
+// Helper to translate key pressed to MathField update
 export {default as keyTranslator} from "./components/key-handlers/key-translator";
-export {
-    createMathField,
-    mathQuillInstance,
-} from "./components/input/mathquill-instance";
-export {type MathFieldInterface} from "./components/input/mathquill-types";

package/src/types.ts

@@ -1,3 +1,5 @@
+import ReactDOM from "react-dom";
+
 import {CursorContext} from "./components/input/cursor-contexts";
 import Key from "./data/keys";
 import {
@@ -85,3 +87,12 @@ export type ActiveNodesObj = {
 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>;
+}