@khanacademy/math-input 4.2.0 → 4.3.1

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,9 +44,14 @@ export function V2KeypadWithMathquill() {
         <div style={{maxWidth: "400px", margin: "2em"}}>
             <Popover
                 content={
-                    <div>
+                    <PopoverContentCore
+                        style={{
+                            padding: 10,
+                            maxWidth: "initial",
+                        }}
+                    >
                         <Keypad
-                            extraKeys={["a", "b", "c"]}
+                            extraKeys={["x", "y", "PI", "THETA"]}
                             onClickKey={handleClickKey}
                             advancedRelations
                             basicRelations
@@ -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]}
+            />
+        </>
+    );
+}

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

@@ -89,3 +89,14 @@ Trigonometry.args = {
     preAlgebra: true,
     trigonometry: true,
 };
+
+export const Everything = Template.bind({});
+Everything.args = {
+    advancedRelations: true,
+    basicRelations: true,
+    divisionKey: true,
+    logarithms: true,
+    multiplicationDot: false,
+    preAlgebra: true,
+    trigonometry: true,
+};