@khanacademy/math-input 0.7.2 → 1.0.1

package/src/index.ts

@@ -5,10 +5,7 @@
 import "../less/main.less";
 
 export {default as KeypadInput} from "./components/input/math-input";
-export {
-    keypadConfigurationPropType,
-    keypadElementPropType,
-} from "./components/prop-types";
+export {keypadElementPropType} from "./components/prop-types";
 export {default as Keypad} from "./components/provided-keypad";
 export {KeypadTypes} from "./consts";
 export {default as KeyConfigs} from "./data/key-configs";

package/src/math-input.stories.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+import {Keypad, KeypadInput, KeypadTypes} from "./index";
+
+export default {
+    title: "Full MathInput",
+};
+
+export const Basic = () => {
+    const [value, setValue] = React.useState("");
+    const [keypadElement, setKeypadElement] = React.useState<any>(null);
+    const [keypadType, setKeypadType] = React.useState<
+        keyof typeof KeypadTypes
+    >(KeypadTypes.FRACTION);
+
+    React.useEffect(() => {
+        keypadElement?.configure({
+            keypadType: keypadType,
+            extraKeys: ["x", "y", "PI", "THETA"],
+        });
+    }, [keypadElement, keypadType]);
+
+    function handleChangeKeypadType() {
+        setKeypadType(
+            keypadType === KeypadTypes.FRACTION
+                ? KeypadTypes.EXPRESSION
+                : KeypadTypes.FRACTION,
+        );
+    }
+
+    return (
+        <div>
+            <div style={{padding: "1rem 0"}}>
+                <button onClick={handleChangeKeypadType}>
+                    {`Use ${
+                        keypadType === KeypadTypes.FRACTION
+                            ? "Expression"
+                            : "Fraction"
+                    } 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 && !keypadElement) {
+                        setKeypadElement(node);
+                    }
+                }}
+            />
+        </div>
+    );
+};

package/src/store/actions.ts

@@ -0,0 +1,178 @@
+import type {Key} from "../data/keys";
+import type {
+    KeypadConfiguration,
+    KeyHandler,
+    Cursor,
+    ActiveNodesObj,
+    Border,
+} from "../types";
+
+// naming convention: verb + noun
+// the noun should be one of the other properties in the object that's
+// being dispatched
+
+type DismissKeypadAction = {
+    type: "DismissKeypad";
+};
+
+export const dismissKeypad = (): DismissKeypadAction => {
+    return {
+        type: "DismissKeypad",
+    };
+};
+
+type ActivateKeypadAction = {
+    type: "ActivateKeypad";
+};
+
+export const activateKeypad = (): ActivateKeypadAction => {
+    return {
+        type: "ActivateKeypad",
+    };
+};
+
+/**
+ * Configure the keypad with the provided configuration parameters.
+ */
+type ConfigureKeypadAction = {
+    type: "ConfigureKeypad";
+    configuration: KeypadConfiguration;
+};
+
+export const configureKeypad = (
+    configuration: KeypadConfiguration,
+): ConfigureKeypadAction => {
+    return {
+        type: "ConfigureKeypad",
+        configuration,
+    };
+};
+
+type SetPageSizeAction = {
+    type: "SetPageSize";
+    pageWidthPx: number;
+    pageHeightPx: number;
+};
+
+export const setPageSize = (
+    pageWidthPx: number,
+    pageHeightPx: number,
+): SetPageSizeAction => {
+    return {
+        type: "SetPageSize",
+        pageWidthPx,
+        pageHeightPx,
+    };
+};
+
+type RemoveEchoAction = {
+    type: "RemoveEcho";
+    animationId: string;
+};
+
+export const removeEcho = (animationId: string): RemoveEchoAction => {
+    return {
+        type: "RemoveEcho",
+        animationId,
+    };
+};
+
+// Input-related actions.
+type SetKeyHandlerAction = {
+    type: "SetKeyHandler";
+    keyHandler: KeyHandler;
+};
+
+export const setKeyHandler = (keyHandler: KeyHandler): SetKeyHandlerAction => {
+    return {
+        type: "SetKeyHandler",
+        keyHandler,
+    };
+};
+
+type SetCursorAction = {
+    type: "SetCursor";
+    cursor: Cursor;
+};
+
+export const setCursor = (cursor: Cursor): SetCursorAction => {
+    return {
+        type: "SetCursor",
+        cursor,
+    };
+};
+
+// Gesture actions
+type OnSwipeChangeAction = {
+    type: "OnSwipeChange";
+    dx: number;
+};
+
+export const onSwipeChange = (dx: number): OnSwipeChangeAction => {
+    return {
+        type: "OnSwipeChange",
+        dx,
+    };
+};
+
+type OnSwipeEndAction = {
+    type: "OnSwipeEnd";
+    dx: number;
+};
+
+export const onSwipeEnd = (dx: number): OnSwipeEndAction => {
+    return {
+        type: "OnSwipeEnd",
+        dx,
+    };
+};
+
+type SetActiveNodesAction = {
+    type: "SetActiveNodes";
+    activeNodes: any;
+};
+
+export const setActiveNodes = (
+    activeNodes: ActiveNodesObj,
+): SetActiveNodesAction => {
+    return {
+        type: "SetActiveNodes",
+        activeNodes,
+    };
+};
+
+type PressKeyAction = {
+    type: "PressKey";
+    key: Key;
+    borders: Border;
+    initialBounds: DOMRect;
+    inPopover: boolean;
+};
+
+export const pressKey = (
+    key: Key,
+    borders: Border,
+    initialBounds: DOMRect,
+    inPopover: any,
+): PressKeyAction => {
+    return {
+        type: "PressKey",
+        key,
+        borders,
+        initialBounds,
+        inPopover,
+    };
+};
+
+export type Action =
+    | DismissKeypadAction
+    | ActivateKeypadAction
+    | ConfigureKeypadAction
+    | SetPageSizeAction
+    | RemoveEchoAction
+    | SetKeyHandlerAction
+    | SetCursorAction
+    | OnSwipeChangeAction
+    | OnSwipeEndAction
+    | SetActiveNodesAction
+    | PressKeyAction;

package/src/store/echo-reducer.ts

@@ -0,0 +1,61 @@
+import {EchoAnimationTypes, KeyTypes} from "../consts";
+import KeyConfigs from "../data/key-configs";
+
+import type {Action} from "./actions";
+import type {EchoState} from "./types";
+
+// Used to generate unique animation IDs for the echo animations. The actual
+// values are irrelevant as long as they are unique.
+let _lastAnimationId = 0;
+
+const initialEchoState = {
+    echoes: [],
+} as const;
+
+const echoReducer = function (
+    state: EchoState = initialEchoState,
+    action: Action,
+): EchoState {
+    switch (action.type) {
+        case "PressKey":
+            const keyConfig = KeyConfigs[action.key];
+
+            // Add in the echo animation if the user performs a math
+            // operation.
+            if (
+                keyConfig.type === KeyTypes.VALUE ||
+                keyConfig.type === KeyTypes.OPERATOR
+            ) {
+                return {
+                    ...state,
+                    echoes: [
+                        ...state.echoes,
+                        {
+                            animationId: "" + _lastAnimationId++,
+                            animationType: action.inPopover
+                                ? EchoAnimationTypes.LONG_FADE_ONLY
+                                : EchoAnimationTypes.FADE_ONLY,
+                            borders: action.borders,
+                            id: keyConfig.id,
+                            initialBounds: action.initialBounds,
+                        },
+                    ],
+                };
+            }
+            return state;
+
+        case "RemoveEcho":
+            const remainingEchoes = state.echoes.filter((echo) => {
+                return echo.animationId !== action.animationId;
+            });
+            return {
+                ...state,
+                echoes: remainingEchoes,
+            };
+
+        default:
+            return state;
+    }
+};
+
+export default echoReducer;