@khanacademy/math-input 16.2.0 → 16.4.0

package/dist/utils.d.ts

@@ -3,3 +3,15 @@ export declare const DecimalSeparator: {
     readonly PERIOD: ".";
 };
 export declare const decimalSeparator: string;
+/**
+ * convertDotToTimes (aka `times`) is an option the content creators have to
+ * use × (TIMES) rather than · (CDOT) for multiplication (for younger learners).
+ * Some locales _only_ use one or the other for all multiplication regardless
+ * of age.
+ *
+ * convertDotToTimesByLocale overrides convertDotToTimes for those locales.
+ *
+ * @param {boolean} convertDotToTimes - the setting set by content creators
+ * @returns {boolean} - true to convert to × (TIMES), false to use · (CDOT)
+ */
+export declare function convertDotToTimesByLocale(convertDotToTimes: boolean): boolean;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "16.2.0",
+    "version": "16.4.0",
     "publishConfig": {
         "access": "public"
     },

package/src/components/input/math-input.tsx

@@ -7,6 +7,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 
 import {View} from "../../fake-react-native-web/index";
+import {KeypadContext} from "../keypad-context";
 
 import CursorHandle from "./cursor-handle";
 import {
@@ -217,6 +218,7 @@ class MathInput extends React.Component<Props, State> {
                         this.props.keypadElement.getDOMNode()
                     ) {
                         const [x, y] = [evt.clientX, evt.clientY];
+
                         // We only want to blur if the click is above the keypad,
                         // to the left of the keypad, or to the right of the keypad.
                         // The reasoning for not blurring for any clicks below the keypad is
@@ -604,9 +606,11 @@ class MathInput extends React.Component<Props, State> {
             });
     };
 
-    handleTouchStart: (arg1: React.TouchEvent<HTMLDivElement>) => void = (
-        e,
-    ) => {
+    handleTouchStart = (
+        e: React.TouchEvent<HTMLDivElement>,
+        keypadActive: boolean,
+        setKeypadActive: (keypadActive: boolean) => void,
+    ): void => {
         e.stopPropagation();
 
         // Hide the cursor handle on touch start, if the handle itself isn't
@@ -625,6 +629,11 @@ class MathInput extends React.Component<Props, State> {
             this._insertCursorAtClosestNode(touch.clientX, touch.clientY);
         }
 
+        // If we're already focused, but the keypad isn't active, activate it.
+        if (this.state.focused && !keypadActive) {
+            setKeypadActive(true);
+        }
+
         // Trigger a focus event, if we're not already focused.
         if (!this.state.focused) {
             this.focus();
@@ -634,7 +643,11 @@ class MathInput extends React.Component<Props, State> {
     // We want to allow the user to be able to focus the input via click
     // when using ChromeOS third-party browsers that use mobile user agents,
     // but don't actually simulate touch events.
-    handleClick = (e: React.MouseEvent<HTMLDivElement>): void => {
+    handleClick = (
+        e: React.MouseEvent<HTMLDivElement>,
+        keypadActive: boolean,
+        setKeypadActive: (keypadActive: boolean) => void,
+    ): void => {
         e.stopPropagation();
 
         // Hide the cursor handle on click
@@ -651,6 +664,11 @@ class MathInput extends React.Component<Props, State> {
             this._insertCursorAtClosestNode(e.clientX, e.clientY);
         }
 
+        // If we're already focused, but the keypad isn't active, activate it.
+        if (this.state.focused && !keypadActive) {
+            setKeypadActive(true);
+        }
+
         // Trigger a focus event, if we're not already focused.
         if (!this.state.focused) {
             this.focus();
@@ -926,46 +944,59 @@ class MathInput extends React.Component<Props, State> {
             i18n._("Tap with one or two fingers to open keyboard");
 
         return (
-            <View
-                style={styles.input}
-                onTouchStart={this.handleTouchStart}
-                onTouchMove={this.handleTouchMove}
-                onTouchEnd={this.handleTouchEnd}
-                onClick={this.handleClick}
-                role={"textbox"}
-                ariaLabel={ariaLabel}
-            >
-                {/* NOTE(charlie): This is used purely to namespace the styles in
+            <KeypadContext.Consumer>
+                {({keypadActive, setKeypadActive}) => (
+                    <View
+                        style={styles.input}
+                        onTouchStart={(e: React.TouchEvent<HTMLDivElement>) => {
+                            this.handleTouchStart(
+                                e,
+                                keypadActive,
+                                setKeypadActive,
+                            );
+                        }}
+                        onTouchMove={this.handleTouchMove}
+                        onTouchEnd={this.handleTouchEnd}
+                        onClick={(e: React.MouseEvent<HTMLDivElement>) => {
+                            this.handleClick(e, keypadActive, setKeypadActive);
+                        }}
+                        role={"textbox"}
+                        ariaLabel={ariaLabel}
+                    >
+                        {/* NOTE(charlie): This is used purely to namespace the styles in
                 overrides.css. */}
-                <div
-                    className="keypad-input"
-                    // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
-                    tabIndex={"0"}
-                    ref={(node) => {
-                        this.inputRef = node;
-                    }}
-                    onKeyUp={this.handleKeyUp}
-                >
-                    {/* NOTE(charlie): This element must be styled with inline
+                        <div
+                            className="keypad-input"
+                            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
+                            tabIndex={"0"}
+                            ref={(node) => {
+                                this.inputRef = node;
+                            }}
+                            onKeyUp={this.handleKeyUp}
+                        >
+                            {/* NOTE(charlie): This element must be styled with inline
                     styles rather than with Aphrodite classes, as MathQuill
                     modifies the class names on the DOM node. */}
-                    <div
-                        ref={(node) => {
-                            this._mathContainer = ReactDOM.findDOMNode(node);
-                        }}
-                        style={innerStyle}
-                    />
-                </div>
-                {focused && handle.visible && (
-                    <CursorHandle
-                        {...handle}
-                        onTouchStart={this.onCursorHandleTouchStart}
-                        onTouchMove={this.onCursorHandleTouchMove}
-                        onTouchEnd={this.onCursorHandleTouchEnd}
-                        onTouchCancel={this.onCursorHandleTouchCancel}
-                    />
+                            <div
+                                ref={(node) => {
+                                    this._mathContainer =
+                                        ReactDOM.findDOMNode(node);
+                                }}
+                                style={innerStyle}
+                            />
+                        </div>
+                        {focused && handle.visible && (
+                            <CursorHandle
+                                {...handle}
+                                onTouchStart={this.onCursorHandleTouchStart}
+                                onTouchMove={this.onCursorHandleTouchMove}
+                                onTouchEnd={this.onCursorHandleTouchEnd}
+                                onTouchCancel={this.onCursorHandleTouchCancel}
+                            />
+                        )}
+                    </View>
                 )}
-            </View>
+            </KeypadContext.Consumer>
         );
     }
 }

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

@@ -1,3 +1,4 @@
+import * as wbi18n from "@khanacademy/wonder-blocks-i18n";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as React from "react";
@@ -155,6 +156,42 @@ describe("keypad", () => {
         expect(screen.getByTestId("TIMES")).toBeInTheDocument();
     });
 
+    it(`forces CDOT in locales that require it`, () => {
+        // Arrange
+        jest.spyOn(wbi18n, "getLocale").mockReturnValue("az");
+
+        // Act
+        render(
+            <Keypad
+                onClickKey={() => {}}
+                convertDotToTimes={true}
+                onAnalyticsEvent={async () => {}}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByTestId("CDOT")).toBeInTheDocument();
+        expect(screen.queryByTestId("TIMES")).not.toBeInTheDocument();
+    });
+
+    it(`forces TIMES in locales that require it`, () => {
+        // Arrange
+        jest.spyOn(wbi18n, "getLocale").mockReturnValue("fr");
+
+        // Act
+        render(
+            <Keypad
+                onClickKey={() => {}}
+                convertDotToTimes={false}
+                onAnalyticsEvent={async () => {}}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByTestId("TIMES")).toBeInTheDocument();
+        expect(screen.queryByTestId("CDOT")).not.toBeInTheDocument();
+    });
+
     it(`hides the tabs if providing the Fraction Keypad`, () => {
         // Arrange
         // Act

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import Keys from "../../data/key-configs";
+import {convertDotToTimesByLocale} from "../../utils";
 
 import {KeypadButton} from "./keypad-button";
 import {getCursorContextConfig} from "./utils";
@@ -56,7 +57,11 @@ export default function SharedKeys(props: Props) {
 
             {/* Row 2 */}
             <KeypadButton
-                keyConfig={convertDotToTimes ? Keys.TIMES : Keys.CDOT}
+                keyConfig={
+                    convertDotToTimesByLocale(!!convertDotToTimes)
+                        ? Keys.TIMES
+                        : Keys.CDOT
+                }
                 onClickKey={onClickKey}
                 coord={[4, 1]}
                 secondary

package/src/index.ts

@@ -40,6 +40,7 @@ export {
 // External API of the "Provided" keypad component
 export {keypadElementPropType} from "./components/prop-types";
 export type {KeypadAPI, KeypadConfiguration} from "./types";
+export {convertDotToTimesByLocale} from "./utils";
 
 // Key list, configuration map, and types
 export type {default as Keys} from "./data/keys";

package/src/utils.test.ts

@@ -0,0 +1,33 @@
+import * as wbi18n from "@khanacademy/wonder-blocks-i18n";
+
+import {convertDotToTimesByLocale} from "./utils";
+
+describe("utils", () => {
+    describe("multiplicationSymbol", () => {
+        it("passes through convertDotToTimes in locales that don't override it", () => {
+            jest.spyOn(wbi18n, "getLocale").mockReturnValue("en");
+
+            const result1 = convertDotToTimesByLocale(true);
+            const result2 = convertDotToTimesByLocale(false);
+
+            expect(result1).toBe(true);
+            expect(result2).toBe(false);
+        });
+
+        it("overrides with false for locales that only use dot", () => {
+            jest.spyOn(wbi18n, "getLocale").mockReturnValue("az");
+
+            const result = convertDotToTimesByLocale(true);
+
+            expect(result).toBe(false);
+        });
+
+        it("overrides with true for locales that only use x", () => {
+            jest.spyOn(wbi18n, "getLocale").mockReturnValue("fr");
+
+            const result = convertDotToTimesByLocale(false);
+
+            expect(result).toBe(true);
+        });
+    });
+});

package/src/utils.ts

@@ -1,4 +1,4 @@
-import {getDecimalSeparator} from "@khanacademy/wonder-blocks-i18n";
+import {getDecimalSeparator, getLocale} from "@khanacademy/wonder-blocks-i18n";
 
 export const DecimalSeparator = {
     COMMA: ",",
@@ -15,3 +15,47 @@ export const decimalSeparator: string =
     getDecimalSeparator() === ","
         ? DecimalSeparator.COMMA
         : DecimalSeparator.PERIOD;
+
+const CDOT_ONLY = [
+    "az",
+    "cs",
+    "da",
+    "de",
+    "hu",
+    "hy",
+    "kk",
+    "ky",
+    "lt",
+    "lv",
+    "nb",
+    "sk",
+    "sr",
+    "sv",
+    "uz",
+];
+const TIMES_ONLY = ["fr", "tr", "pt-pt"];
+
+/**
+ * convertDotToTimes (aka `times`) is an option the content creators have to
+ * use × (TIMES) rather than · (CDOT) for multiplication (for younger learners).
+ * Some locales _only_ use one or the other for all multiplication regardless
+ * of age.
+ *
+ * convertDotToTimesByLocale overrides convertDotToTimes for those locales.
+ *
+ * @param {boolean} convertDotToTimes - the setting set by content creators
+ * @returns {boolean} - true to convert to × (TIMES), false to use · (CDOT)
+ */
+export function convertDotToTimesByLocale(convertDotToTimes: boolean): boolean {
+    const locale = getLocale();
+
+    if (CDOT_ONLY.includes(locale)) {
+        return false;
+    }
+
+    if (TIMES_ONLY.includes(locale)) {
+        return true;
+    }
+
+    return convertDotToTimes;
+}