@khanacademy/math-input 4.2.0 → 4.3.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": "4.2.0",
+    "version": "4.3.0",
     "publishConfig": {
         "access": "public"
     },
@@ -19,6 +19,7 @@
     "source": "src/index.ts",
     "scripts": {},
     "dependencies": {
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
         "performance-now": "^0.2.0"
     },
     "devDependencies": {
@@ -31,7 +32,6 @@
         "aphrodite": "^1.1.0",
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
         "perseus-build-settings": "^0.1.0",
         "prop-types": "15.6.1",
         "react": "^16.8.0",
@@ -51,7 +51,6 @@
         "aphrodite": "^1.1.0",
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
         "prop-types": "15.6.1",
         "react": "^16.8.0",
         "react-dom": "^16.8.0",

package/src/components/input/__tests__/test-math-wrapper.ts

@@ -1,8 +1,5 @@
-import MathQuill from "mathquill";
-
 import MathWrapper from "../math-wrapper";
-
-const MQ = MathQuill.getInterface(2);
+import {mathQuillInstance} from "../mathquill-instance";
 
 export default class TestMathWrapper extends MathWrapper {
     getContent() {
@@ -18,7 +15,7 @@ export default class TestMathWrapper extends MathWrapper {
     }
 
     moveToStart() {
-        this.mathField.moveToDirEnd(MQ.L);
+        this.mathField.moveToDirEnd(mathQuillInstance.L);
     }
 
     isSelected() {

package/src/components/input/mathquill-types.ts

@@ -62,6 +62,12 @@ export interface MathFieldInterface {
     // Clears the selection
     // https://docs.mathquill.com/en/latest/Api_Methods/#clearselection
     clearSelection: () => void;
+    // Custom helper in our MathQuill fork
+    // check to see if cursor is on right end
+    cursorAtRightEnd: () => boolean;
+    // Custom helper in our MathQuill fork
+    // check to see if cursor is on left end
+    cursorAtLeftEnd: () => boolean;
     // This isn't part of the MathQuill public API
     // I don't know what it is and it feels wrong using it
     __controller: any;

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

@@ -4,15 +4,16 @@ import * as React from "react";
 import "@testing-library/jest-dom";
 
 import Keys from "../../../data/key-configs";
-import {KeypadButton} from "../keypad-page-items";
+import {KeypadButton} from "../keypad-button";
 
 describe("<KeypadButton />", () => {
     it("uses the aria label from the key config", () => {
         // Arrange
         render(
             <KeypadButton
-                onClickKey={(config) => {}}
+                onClickKey={() => {}}
                 keyConfig={Keys.LEFT_PAREN}
+                coord={[0, 0]}
             />,
         );
 
@@ -29,6 +30,7 @@ describe("<KeypadButton />", () => {
             <KeypadButton
                 onClickKey={mockClickKeyCallback}
                 keyConfig={Keys.LEFT_PAREN}
+                coord={[0, 0]}
             />,
         );
 

package/src/components/keypad/index.tsx

@@ -8,35 +8,27 @@ import {ClickKeyCallback} from "../../types";
 import Tabbar from "../tabbar/tabbar";
 import {TabbarItemType} from "../tabbar/types";
 
-import ExtrasPage from "./extras-page";
-import GeometryPage from "./geometry-page";
-import NumbersPage from "./numbers-page";
-import {NumbersPageOptions} from "./numbers-page/types";
-import OperatorsPage from "./operators-page";
-import {OperatorsButtonSets} from "./operators-page/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";
 
 export type Props = {
     onClickKey: ClickKeyCallback;
     trigonometry?: boolean;
     extraKeys: ReadonlyArray<Key>;
-} & OperatorsButtonSets &
-    NumbersPageOptions;
-
-type State = {
-    selectedPage: TabbarItemType;
-};
-
-type DefaultProps = {
-    extraKeys: Props["extraKeys"];
+    multiplicationDot?: boolean;
+    divisionKey?: boolean;
+    preAlgebra?: boolean;
+    logarithms?: boolean;
+    basicRelations?: boolean;
+    advancedRelations?: boolean;
 };
 
 function allPages(props: Props): ReadonlyArray<TabbarItemType> {
     const pages: Array<TabbarItemType> = ["Numbers"];
 
-    if (props.extraKeys?.length) {
-        pages.push("Extras");
-    }
-
     if (
         // OperatorsButtonSets
         props.preAlgebra ||
@@ -51,48 +43,80 @@ function allPages(props: Props): ReadonlyArray<TabbarItemType> {
         pages.push("Geometry");
     }
 
+    if (props.extraKeys?.length) {
+        pages.push("Extras");
+    }
+
     return pages;
 }
 
-export default class Keypad extends React.Component<Props, State> {
-    state: State = {
-        selectedPage: "Numbers",
-    };
-
-    static defaultProps: DefaultProps = {
-        extraKeys: [],
-    };
-
-    render(): React.ReactNode {
-        const {selectedPage} = this.state;
-
-        const availablePages = allPages(this.props);
-
-        return (
-            <View>
-                <Tabbar
-                    items={availablePages}
-                    selectedItem={selectedPage}
-                    onSelectItem={(tabbarItem: TabbarItemType) => {
-                        this.setState({selectedPage: tabbarItem});
-                    }}
-                    style={styles.tabbar}
-                />
-                {selectedPage === "Numbers" && <NumbersPage {...this.props} />}
-                {selectedPage === "Extras" && <ExtrasPage {...this.props} />}
+export default function Keypad(props: Props) {
+    const [selectedPage, setSelectedPage] =
+        React.useState<TabbarItemType>("Numbers");
+
+    const availablePages = allPages(props);
+
+    const {
+        onClickKey,
+        extraKeys = [],
+        multiplicationDot,
+        divisionKey,
+        preAlgebra,
+        logarithms,
+        basicRelations,
+        advancedRelations,
+    } = props;
+
+    return (
+        <View>
+            <Tabbar
+                items={availablePages}
+                selectedItem={selectedPage}
+                onSelectItem={(tabbarItem: TabbarItemType) => {
+                    setSelectedPage(tabbarItem);
+                }}
+                style={styles.tabbar}
+            />
+
+            <View style={styles.grid}>
+                {selectedPage === "Numbers" && (
+                    <NumbersPage onClickKey={onClickKey} />
+                )}
+                {selectedPage === "Extras" && (
+                    <ExtrasPage onClickKey={onClickKey} extraKeys={extraKeys} />
+                )}
                 {selectedPage === "Operators" && (
-                    <OperatorsPage {...this.props} />
+                    <OperatorsPage
+                        onClickKey={onClickKey}
+                        preAlgebra={preAlgebra}
+                        logarithms={logarithms}
+                        basicRelations={basicRelations}
+                        advancedRelations={advancedRelations}
+                    />
                 )}
                 {selectedPage === "Geometry" && (
-                    <GeometryPage {...this.props} />
+                    <GeometryPage onClickKey={onClickKey} />
                 )}
+                <SharedKeys
+                    onClickKey={onClickKey}
+                    multiplicationDot={multiplicationDot}
+                    divisionKey={divisionKey}
+                />
             </View>
-        );
-    }
+        </View>
+    );
 }
 
 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,
+    },
 });

package/src/components/keypad/{button.stories.tsx → keypad-button.stories.tsx}

@@ -4,7 +4,7 @@ import * as React from "react";
 
 import KeyConfigs from "../../data/key-configs";
 
-import {KeypadButton, KeypadButtonProps} from "./keypad-page-items";
+import {KeypadButton, KeypadButtonProps} from "./keypad-button";
 
 export default {
     title: "Keypad Button",
@@ -70,6 +70,7 @@ export const AllButtons: ComponentStory<typeof KeypadButton> = ({
                 <KeypadButton
                     keyConfig={KeyConfigs[key]}
                     onClickKey={action("pressed")}
+                    coord={[0, 0]}
                 />
             </div>
         ))}

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,5 +1,5 @@
 import Color from "@khanacademy/wonder-blocks-color";
-import {Popover} from "@khanacademy/wonder-blocks-popover";
+import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import * as React from "react";
 
 import Key from "../../data/keys";
@@ -44,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}
@@ -56,9 +61,10 @@ export function V2KeypadWithMathquill() {
                             preAlgebra
                             trigonometry
                         />
-                    </div>
+                    </PopoverContentCore>
                 }
                 dismissEnabled
+                opened
             >
                 <div
                     style={{

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]}
+            />
+        </>
+    );
+}