@khanacademy/math-input 4.1.1 → 4.3.0

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

@@ -0,0 +1,128 @@
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import {KeyConfig, ClickKeyCallback} from "../../types";
+
+import ButtonAsset from "./button-assets";
+
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
+export type KeypadButtonProps = {
+    // 0 indexed [x, y] position in keypad CSS grid
+    coord: readonly [number, number];
+    keyConfig: KeyConfig;
+    onClickKey: ClickKeyCallback;
+    // Apply action button styles
+    action?: boolean;
+    // Apply secondary button styles
+    secondary?: boolean;
+    style?: StyleType;
+};
+
+export const KeypadButton = ({
+    coord,
+    keyConfig,
+    onClickKey,
+    style,
+    secondary,
+    action,
+}: KeypadButtonProps): React.ReactElement => {
+    const tintColor = secondary ? "#F6F6F7" : action ? "#DBDCDD" : undefined;
+
+    return (
+        <View
+            style={{
+                gridColumn: coord[0] + 1,
+                gridRow: coord[1] + 1,
+                ...style,
+            }}
+        >
+            <Clickable
+                onClick={() => onClickKey(keyConfig.id)}
+                style={styles.clickable}
+                aria-label={keyConfig.ariaLabel}
+            >
+                {({hovered, focused, pressed}) => {
+                    return (
+                        <View
+                            style={[
+                                styles.outerBoxBase,
+                                hovered && styles.outerBoxHover,
+                                pressed && styles.outerBoxPressed,
+                            ]}
+                        >
+                            <View
+                                style={[
+                                    styles.base,
+                                    tintColor != null
+                                        ? {background: tintColor}
+                                        : undefined,
+                                    hovered && styles.hovered,
+                                    focused && styles.focused,
+                                    pressed && styles.pressed,
+                                ]}
+                            >
+                                <ButtonAsset id={keyConfig.id} />
+                            </View>
+                        </View>
+                    );
+                }}
+            </Clickable>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    base: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
+        boxSizing: "border-box",
+        background: Color.white,
+        borderRadius: 4,
+        border: `1px solid transparent`,
+        flex: 1,
+        minHeight: 42,
+        minWidth: 42,
+        padding: 1,
+    },
+    hovered: {
+        border: `1px solid ${Color.blue}`,
+        padding: 1,
+        boxShadow: "none",
+    },
+    focused: {
+        border: `2px solid ${Color.blue}`,
+        padding: 0,
+        boxShadow: "none",
+    },
+    pressed: {
+        border: "2px solid #1B50B3",
+        padding: 0,
+        background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+        boxShadow: "none",
+    },
+    outerBoxBase: {
+        padding: 1,
+        height: "100%",
+        width: "100%",
+        boxSizing: "border-box",
+        borderRadius: 7,
+        border: "2px solid transparent",
+    },
+    outerBoxHover: {
+        border: `2px solid ${Color.blue}`,
+    },
+    outerBoxPressed: {
+        border: "2px solid #1B50B3",
+    },
+    clickable: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+    },
+});

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

@@ -1,10 +1,11 @@
 import Color from "@khanacademy/wonder-blocks-color";
-import {Popover} from "@khanacademy/wonder-blocks-popover";
-import MathQuill from "mathquill";
+import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import * as React from "react";
 
 import Key from "../../data/keys";
-import keyTranslator from "../key-translator";
+import {createMathField} from "../input/mathquill-instance";
+import {MathFieldInterface} from "../input/mathquill-types";
+import keyTranslator from "../key-handlers/key-translator";
 
 import Keypad from "./index";
 
@@ -12,36 +13,27 @@ export default {
     title: "v2 Keypad With Mathquill",
 };
 
-const mathQuillConfig = {
-    autoCommands: "pi theta phi sqrt nthroot",
-    charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
-    supSubsRequireOperand: true,
-    spaceBehavesLikeTab: true,
-};
-
 export function V2KeypadWithMathquill() {
-    const mathquillWrapperRef = React.useRef<HTMLDivElement>(null);
-    const [mathQuill, setMathQuill] = React.useState<MathQuill>();
+    const mathFieldWrapperRef = React.useRef<HTMLDivElement>(null);
+    const [mathField, setMathField] = React.useState<MathFieldInterface>();
 
     React.useEffect(() => {
-        if (!mathQuill && mathquillWrapperRef.current) {
-            const MQ = MathQuill.getInterface(2);
-            const mathQuillInstance = MQ.MathField(
-                mathquillWrapperRef.current,
-                mathQuillConfig,
+        if (!mathField && mathFieldWrapperRef.current) {
+            const mathFieldInstance = createMathField(
+                mathFieldWrapperRef.current,
             );
-            setMathQuill(mathQuillInstance);
+            setMathField(mathFieldInstance);
         }
-    }, [mathQuill]);
+    }, [mathField]);
 
     function handleClickKey(key: Key) {
-        if (!mathQuill) {
+        if (!mathField) {
             return;
         }
 
-        const mathQuillCallback = keyTranslator[key];
-        if (mathQuillCallback) {
-            mathQuillCallback(mathQuill, key);
+        const mathFieldCallback = keyTranslator[key];
+        if (mathFieldCallback) {
+            mathFieldCallback(mathField, key);
         } else {
             // eslint-disable-next-line no-console
             console.warn(`No translation to Mathquill for: ${key}`);
@@ -52,7 +44,12 @@ export function V2KeypadWithMathquill() {
         <div style={{maxWidth: "400px", margin: "2em"}}>
             <Popover
                 content={
-                    <div>
+                    <PopoverContentCore
+                        style={{
+                            padding: 10,
+                            maxWidth: "initial",
+                        }}
+                    >
                         <Keypad
                             extraKeys={["a", "b", "c"]}
                             onClickKey={handleClickKey}
@@ -64,9 +61,10 @@ export function V2KeypadWithMathquill() {
                             preAlgebra
                             trigonometry
                         />
-                    </div>
+                    </PopoverContentCore>
                 }
                 dismissEnabled
+                opened
             >
                 <div
                     style={{
@@ -74,7 +72,7 @@ export function V2KeypadWithMathquill() {
                         marginBottom: "1em",
                         border: `1px solid ${Color.offBlack16}`,
                     }}
-                    ref={mathquillWrapperRef}
+                    ref={mathFieldWrapperRef}
                 />
             </Popover>
         </div>

package/src/components/keypad/keypad-pages/extras-page.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+import Keys from "../../../data/key-configs";
+import Key from "../../../data/keys";
+import {ClickKeyCallback} from "../../../types";
+import {KeypadButton} from "../keypad-button";
+
+type Props = {
+    extraKeys: ReadonlyArray<Key>;
+    onClickKey: ClickKeyCallback;
+};
+
+const columns = 4;
+
+export default function ExtrasPage(props: Props) {
+    const {extraKeys, onClickKey} = props;
+    return (
+        <>
+            {extraKeys.map((key, i) => {
+                // Map 1D array to Cartesian coordinates
+                const coordX = i % columns;
+                const coordY = i / columns;
+                return (
+                    <KeypadButton
+                        key={key}
+                        keyConfig={Keys[key]}
+                        onClickKey={onClickKey}
+                        coord={[coordX, coordY]}
+                    />
+                );
+            })}
+        </>
+    );
+}

package/src/components/keypad/keypad-pages/geometry-page.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import Keys from "../../../data/key-configs";
+import {ClickKeyCallback} from "../../../types";
+import {KeypadButton} from "../keypad-button";
+
+type Props = {
+    onClickKey: ClickKeyCallback;
+};
+
+export default function GeometryPage(props: Props) {
+    const {onClickKey} = props;
+    return (
+        <>
+            {/* Row 1 */}
+            <KeypadButton
+                keyConfig={Keys.SIN}
+                onClickKey={onClickKey}
+                coord={[0, 0]}
+            />
+            <KeypadButton
+                keyConfig={Keys.COS}
+                onClickKey={onClickKey}
+                coord={[1, 0]}
+            />
+            <KeypadButton
+                keyConfig={Keys.TAN}
+                onClickKey={onClickKey}
+                coord={[2, 0]}
+            />
+        </>
+    );
+}

package/src/components/keypad/keypad-pages/numbers-page.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+
+import Keys from "../../../data/key-configs";
+import {ClickKeyCallback} from "../../../types";
+import {KeypadButton} from "../keypad-button";
+
+type Props = {
+    onClickKey: ClickKeyCallback;
+};
+
+export default function NumbersPage(props: Props) {
+    const {onClickKey} = props;
+    return (
+        <>
+            {/* Row 1 */}
+            <KeypadButton
+                keyConfig={Keys.NUM_7}
+                onClickKey={onClickKey}
+                coord={[0, 0]}
+            />
+            <KeypadButton
+                keyConfig={Keys.NUM_8}
+                onClickKey={onClickKey}
+                coord={[1, 0]}
+            />
+            <KeypadButton
+                keyConfig={Keys.NUM_9}
+                onClickKey={onClickKey}
+                coord={[2, 0]}
+            />
+
+            {/* Row 2 */}
+            <KeypadButton
+                keyConfig={Keys.NUM_4}
+                onClickKey={onClickKey}
+                coord={[0, 1]}
+            />
+            <KeypadButton
+                keyConfig={Keys.NUM_5}
+                onClickKey={onClickKey}
+                coord={[1, 1]}
+            />
+            <KeypadButton
+                keyConfig={Keys.NUM_6}
+                onClickKey={onClickKey}
+                coord={[2, 1]}
+            />
+
+            {/* Row 3 */}
+            <KeypadButton
+                keyConfig={Keys.NUM_1}
+                onClickKey={onClickKey}
+                coord={[0, 2]}
+            />
+            <KeypadButton
+                keyConfig={Keys.NUM_2}
+                onClickKey={onClickKey}
+                coord={[1, 2]}
+            />
+            <KeypadButton
+                keyConfig={Keys.NUM_3}
+                onClickKey={onClickKey}
+                coord={[2, 2]}
+            />
+
+            {/* Row 4 */}
+            <KeypadButton
+                keyConfig={Keys.NUM_0}
+                onClickKey={onClickKey}
+                coord={[0, 3]}
+            />
+            <KeypadButton
+                keyConfig={Keys.DECIMAL}
+                onClickKey={onClickKey}
+                coord={[1, 3]}
+            />
+            <KeypadButton
+                keyConfig={Keys.NEGATIVE}
+                onClickKey={onClickKey}
+                coord={[2, 3]}
+            />
+        </>
+    );
+}

package/src/components/keypad/keypad-pages/operators-page.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+
+import Keys from "../../../data/key-configs";
+import {ClickKeyCallback} from "../../../types";
+import {KeypadButton} from "../keypad-button";
+
+type Props = {
+    onClickKey: ClickKeyCallback;
+    preAlgebra?: boolean;
+    logarithms?: boolean;
+    basicRelations?: boolean;
+    advancedRelations?: boolean;
+};
+
+export default function OperatorsPage(props: Props) {
+    const {
+        onClickKey,
+        preAlgebra,
+        logarithms,
+        basicRelations,
+        advancedRelations,
+    } = props;
+
+    return (
+        <>
+            {/* Row 1 */}
+            {preAlgebra && (
+                <>
+                    <KeypadButton
+                        keyConfig={Keys.EXP_2}
+                        onClickKey={onClickKey}
+                        coord={[0, 0]}
+                    />
+                    <KeypadButton
+                        keyConfig={Keys.EXP}
+                        onClickKey={onClickKey}
+                        coord={[1, 0]}
+                    />
+                    <KeypadButton
+                        keyConfig={Keys.SQRT}
+                        onClickKey={onClickKey}
+                        coord={[2, 0]}
+                    />
+                    <KeypadButton
+                        keyConfig={Keys.RADICAL}
+                        onClickKey={onClickKey}
+                        coord={[3, 0]}
+                    />
+                </>
+            )}
+
+            {/* Row 2 */}
+            {logarithms && (
+                <>
+                    <KeypadButton
+                        keyConfig={Keys.LOG}
+                        onClickKey={onClickKey}
+                        coord={[0, 1]}
+                    />
+                    <KeypadButton
+                        keyConfig={Keys.LOG_N}
+                        onClickKey={onClickKey}
+                        coord={[1, 1]}
+                    />
+                    <KeypadButton
+                        keyConfig={Keys.LN}
+                        onClickKey={onClickKey}
+                        coord={[2, 1]}
+                    />
+                </>
+            )}
+
+            {/* Row 3 */}
+            {basicRelations && (
+                <>
+                    <KeypadButton
+                        keyConfig={Keys.EQUAL}
+                        onClickKey={onClickKey}
+                        coord={[0, 2]}
+                    />
+                    <KeypadButton
+                        keyConfig={Keys.LT}
+                        onClickKey={onClickKey}
+                        coord={[1, 2]}
+                    />
+                    <KeypadButton
+                        keyConfig={Keys.GT}
+                        onClickKey={onClickKey}
+                        coord={[2, 2]}
+                    />
+                </>
+            )}
+
+            {/* Row 4 */}
+            {advancedRelations && (
+                <>
+                    <KeypadButton
+                        keyConfig={Keys.NEQ}
+                        onClickKey={onClickKey}
+                        coord={[0, 3]}
+                    />
+                    <KeypadButton
+                        keyConfig={Keys.LEQ}
+                        onClickKey={onClickKey}
+                        coord={[1, 3]}
+                    />
+                    <KeypadButton
+                        keyConfig={Keys.GEQ}
+                        onClickKey={onClickKey}
+                        coord={[2, 3]}
+                    />
+                </>
+            )}
+        </>
+    );
+}

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import Keys from "../../data/key-configs";
+import {ClickKeyCallback} from "../../types";
+
+import {KeypadButton} from "./keypad-button";
+
+type Props = {
+    onClickKey: ClickKeyCallback;
+    multiplicationDot?: boolean;
+    divisionKey?: boolean;
+};
+
+export default function SharedKeys(props: Props) {
+    const {onClickKey, divisionKey, multiplicationDot} = props;
+
+    return (
+        <>
+            {/* Row 1 */}
+            <KeypadButton
+                keyConfig={Keys.PLUS}
+                onClickKey={onClickKey}
+                coord={[4, 0]}
+                secondary
+            />
+            <KeypadButton
+                keyConfig={Keys.MINUS}
+                onClickKey={onClickKey}
+                coord={[5, 0]}
+                secondary
+            />
+
+            {/* Row 2 */}
+            <KeypadButton
+                keyConfig={multiplicationDot ? Keys.CDOT : Keys.TIMES}
+                onClickKey={onClickKey}
+                coord={[4, 1]}
+                secondary
+            />
+            {divisionKey && (
+                <KeypadButton
+                    keyConfig={Keys.DIVIDE}
+                    onClickKey={onClickKey}
+                    coord={[5, 1]}
+                    secondary
+                />
+            )}
+
+            {/* Row 3 */}
+            <KeypadButton
+                keyConfig={Keys.LEFT_PAREN}
+                onClickKey={onClickKey}
+                coord={[4, 2]}
+                secondary
+            />
+            <KeypadButton
+                keyConfig={Keys.RIGHT_PAREN}
+                onClickKey={onClickKey}
+                coord={[5, 2]}
+                secondary
+            />
+
+            {/* Row 4 */}
+            <KeypadButton
+                keyConfig={Keys.FRAC_INCLUSIVE}
+                onClickKey={onClickKey}
+                coord={[4, 3]}
+                secondary
+            />
+            <KeypadButton
+                keyConfig={Keys.BACKSPACE}
+                onClickKey={onClickKey}
+                coord={[5, 3]}
+                action
+            />
+        </>
+    );
+}

package/src/index.ts

@@ -13,4 +13,9 @@ export type {default as Keys} from "./data/keys";
 export {type KeyType, KeypadType} from "./enums";
 
 export {default as Keypad} from "./components/keypad/index";
-export {default as keyTranslator} from "./components/key-translator";
+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";