@khanacademy/math-input 0.7.2 → 1.0.0

package/src/components/{echo-manager.js → echo-manager.tsx}

@@ -2,7 +2,6 @@
  * A component that renders and animates the selection state effect effect.
  */
 
-import PropTypes from "prop-types";
 import * as React from "react";
 import {TransitionGroup, CSSTransition} from "react-transition-group";
 
@@ -10,23 +9,20 @@ import {KeyTypes, EchoAnimationTypes} from "../consts";
 import KeyConfigs from "../data/key-configs";
 
 import KeypadButton from "./keypad-button";
-import {
-    echoPropType,
-    bordersPropType,
-    boundingBoxPropType,
-    keyIdPropType,
-} from "./prop-types";
 import * as zIndexes from "./z-indexes";
 
-class Echo extends React.Component {
-    static propTypes = {
-        animationDurationMs: PropTypes.number.isRequired,
-        borders: bordersPropType,
-        id: keyIdPropType.isRequired,
-        initialBounds: boundingBoxPropType.isRequired,
-        onAnimationFinish: PropTypes.func.isRequired,
-    };
+import type {Key} from "../data/keys";
+import type {Border, Bound} from "../types";
+
+type EchoProps = {
+    animationDurationMs: number;
+    borders: Border;
+    id: Key;
+    initialBounds: Bound;
+    onAnimationFinish: () => void;
+};
 
+class Echo extends React.Component<EchoProps> {
     componentDidMount() {
         // NOTE(charlie): This is somewhat unfortunate, as the component is
         // encoding information about its own animation, of which it should be
@@ -41,7 +37,7 @@ class Echo extends React.Component {
         const {borders, id, initialBounds} = this.props;
         const {icon} = KeyConfigs[id];
 
-        const containerStyle = {
+        const containerStyle: any = {
             zIndex: zIndexes.echo,
             position: "absolute",
             pointerEvents: "none",
@@ -56,7 +52,6 @@ class Echo extends React.Component {
         return (
             <div style={containerStyle}>
                 <KeypadButton
-                    name={id}
                     icon={icon}
                     type={KeyTypes.ECHO}
                     borders={borders}
@@ -66,12 +61,20 @@ class Echo extends React.Component {
     }
 }
 
-class EchoManager extends React.Component {
-    static propTypes = {
-        echoes: PropTypes.arrayOf(echoPropType),
-        onAnimationFinish: PropTypes.func.isRequired,
-    };
+type EchoPropType = {
+    animationId: string;
+    animationType: keyof typeof EchoAnimationTypes;
+    borders: Border;
+    id: Key;
+    initialBounds: Bound;
+};
+
+type EchoManagerProps = {
+    echoes: ReadonlyArray<EchoPropType>;
+    onAnimationFinish?: (animationId: string) => void;
+};
 
+class EchoManager extends React.Component<EchoManagerProps> {
     _animationConfigForType = (animationType) => {
         // NOTE(charlie): These must be kept in sync with the transition
         // durations and classnames specified in echo.css.
@@ -95,7 +98,9 @@ class EchoManager extends React.Component {
                 break;
 
             default:
-                throw new Error("Invalid echo animation type:", animationType);
+                throw new Error(
+                    `Invalid echo animation type: ${animationType}`,
+                );
         }
 
         return {
@@ -142,7 +147,7 @@ class EchoManager extends React.Component {
                                                 animationDurationMs
                                             }
                                             onAnimationFinish={() =>
-                                                onAnimationFinish(animationId)
+                                                onAnimationFinish?.(animationId)
                                             }
                                             {...echo}
                                         />

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

@@ -2,7 +2,6 @@
  * A keypad button containing no symbols and triggering no actions on click.
  */
 
-import PropTypes from "prop-types";
 import * as React from "react";
 import {connect} from "react-redux";
 
@@ -11,11 +10,13 @@ import KeyConfigs from "../data/key-configs";
 import GestureManager from "./gesture-manager";
 import KeypadButton from "./keypad-button";
 
-class EmptyKeypadButton extends React.Component {
-    static propTypes = {
-        gestureManager: PropTypes.instanceOf(GestureManager),
-    };
+import type {State} from "../store/types";
+
+interface ReduxProps {
+    gestureManager: GestureManager;
+}
 
+class EmptyKeypadButton extends React.Component<ReduxProps> {
     render() {
         const {gestureManager, ...rest} = this.props;
 
@@ -26,10 +27,16 @@ class EmptyKeypadButton extends React.Component {
         // to focus them or trigger presses.
         return (
             <KeypadButton
-                onTouchStart={(evt) => gestureManager.onTouchStart(evt)}
-                onTouchEnd={(evt) => gestureManager.onTouchEnd(evt)}
-                onTouchMove={(evt) => gestureManager.onTouchMove(evt)}
-                onTouchCancel={(evt) => gestureManager.onTouchCancel(evt)}
+                onTouchStart={(evt: TouchEvent) =>
+                    gestureManager.onTouchStart(evt)
+                }
+                onTouchEnd={(evt: TouchEvent) => gestureManager.onTouchEnd(evt)}
+                onTouchMove={(evt: TouchEvent) =>
+                    gestureManager.onTouchMove(evt)
+                }
+                onTouchCancel={(evt: TouchEvent) =>
+                    gestureManager.onTouchCancel(evt)
+                }
                 {...KeyConfigs.NOOP}
                 {...rest}
             />
@@ -37,7 +44,7 @@ class EmptyKeypadButton extends React.Component {
     }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: State): ReduxProps => {
     const {gestures} = state;
     return {
         gestureManager: gestures.gestureManager,

package/src/components/{expression-keypad.js → expression-keypad.tsx}

@@ -3,7 +3,6 @@
  */
 
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 import {connect} from "react-redux";
 
@@ -14,34 +13,40 @@ import {View} from "../fake-react-native-web/index";
 import {valueGrey, controlGrey} from "./common-style";
 import * as CursorContexts from "./input/cursor-contexts";
 import ManyKeypadButton from "./many-keypad-button";
-import {cursorContextPropType, keyIdPropType} from "./prop-types";
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
 import TwoPageKeypad from "./two-page-keypad";
 
+import type {State} from "../store/types";
+import type {KeypadLayout} from "../types";
+import type {CursorContext} from "./input/cursor-contexts";
+
 const {row, column, oneColumn, fullWidth, roundedTopLeft, roundedTopRight} =
     Styles;
 
-class ExpressionKeypad extends React.Component {
-    static propTypes = {
-        currentPage: PropTypes.number.isRequired,
-        cursorContext: cursorContextPropType.isRequired,
-        dynamicJumpOut: PropTypes.bool,
-        extraKeys: PropTypes.arrayOf(keyIdPropType),
-        roundTopLeft: PropTypes.bool,
-        roundTopRight: PropTypes.bool,
-    };
-
-    static rows = 4;
-    static columns = 5;
+interface ReduxProps {
+    currentPage: number;
+    cursorContext?: CursorContext;
+    dynamicJumpOut: boolean;
+}
 
-    // Though we include an infinite-key popover in the bottom-left, it's
-    // assumed that we don't need to accommodate cases in which that key
-    // contains more than four children.
-    static maxVisibleRows = 4;
+interface Props extends ReduxProps {
+    extraKeys?: ReadonlyArray<string>;
+    roundTopLeft: boolean;
+    roundTopRight: boolean;
+}
 
-    static numPages = 2;
+export const expressionKeypadLayout: KeypadLayout = {
+    rows: 4,
+    columns: 5,
+    numPages: 2,
+    // Since we include a two-key popover in the top-right, when the popover
+    // is visible, the keypad will expand to fill the equivalent of five
+    // rows vertically.
+    maxVisibleRows: 4,
+};
 
+class ExpressionKeypad extends React.Component<Props> {
     render() {
         const {
             currentPage,
@@ -109,10 +114,7 @@ class ExpressionKeypad extends React.Component {
                         keyConfig={KeyConfigs.NUM_1}
                         borders={BorderStyles.BOTTOM}
                     />
-                    <ManyKeypadButton
-                        keys={extraKeys}
-                        borders={BorderStyles.NONE}
-                    />
+                    <ManyKeypadButton keys={extraKeys} />
                 </View>
                 <View style={[column, oneColumn]}>
                     <TouchableKeypadButton
@@ -310,10 +312,10 @@ const styles = StyleSheet.create({
     },
 });
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: State): ReduxProps => {
     return {
         currentPage: state.pager.currentPage,
-        cursorContext: state.input.cursor.context,
+        cursorContext: state.input.cursor?.context,
         dynamicJumpOut: !state.layout.navigationPadEnabled,
     };
 };

package/src/components/{fraction-keypad.js → fraction-keypad.tsx}

@@ -3,7 +3,6 @@
  * with fractions, decimals, and percents.
  */
 
-import PropTypes from "prop-types";
 import * as React from "react";
 import {connect} from "react-redux";
 
@@ -13,30 +12,36 @@ import {View} from "../fake-react-native-web/index";
 
 import * as CursorContexts from "./input/cursor-contexts";
 import Keypad from "./keypad";
-import {cursorContextPropType} from "./prop-types";
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
 
+import type {State} from "../store/types";
+import type {KeypadLayout} from "../types";
+import type {CursorContext} from "./input/cursor-contexts";
+
 const {row, roundedTopLeft, roundedTopRight} = Styles;
 
-class FractionKeypad extends React.Component {
-    static propTypes = {
-        cursorContext: cursorContextPropType.isRequired,
-        dynamicJumpOut: PropTypes.bool,
-        roundTopLeft: PropTypes.bool,
-        roundTopRight: PropTypes.bool,
-    };
+interface ReduxProps {
+    cursorContext?: CursorContext;
+    dynamicJumpOut: boolean;
+}
 
-    static rows = 4;
-    static columns = 4;
+interface Props extends ReduxProps {
+    roundTopLeft: boolean;
+    roundTopRight: boolean;
+}
 
+export const fractionKeypadLayout: KeypadLayout = {
+    rows: 4,
+    columns: 4,
+    numPages: 1,
     // Since we include a two-key popover in the top-right, when the popover
     // is visible, the keypad will expand to fill the equivalent of five
     // rows vertically.
-    static maxVisibleRows = 5;
-
-    static numPages = 1;
+    maxVisibleRows: 5,
+};
 
+class FractionKeypad extends React.Component<Props> {
     render() {
         const {cursorContext, dynamicJumpOut, roundTopLeft, roundTopRight} =
             this.props;
@@ -164,9 +169,9 @@ class FractionKeypad extends React.Component {
     }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: State): ReduxProps => {
     return {
-        cursorContext: state.input.cursor.context,
+        cursorContext: state.input.cursor?.context,
         dynamicJumpOut: !state.layout.navigationPadEnabled,
     };
 };

package/src/components/{gesture-manager.js → gesture-manager.tsx}

@@ -13,6 +13,12 @@ const coordsForEvent = (evt) => {
 };
 
 class GestureManager {
+    swipeEnabled: boolean;
+    trackEvents: boolean;
+    nodeManager: NodeManager;
+    popoverStateMachine: PopoverStateMachine;
+    gestureStateMachine: GestureStateMachine;
+
     constructor(options, handlers, disabledSwipeKeys, multiPressableKeys) {
         const {swipeEnabled} = options;
 
@@ -94,7 +100,7 @@ class GestureManager {
      * @param {string} id - the identifier of the DOM node in which the touch
      *                      occurred
      */
-    onTouchStart(evt, id) {
+    onTouchStart(evt: TouchEvent, id?) {
         if (!this.trackEvents) {
             return;
         }
@@ -124,7 +130,7 @@ class GestureManager {
      *
      * @param {TouchEvent} evt - the raw touch event from the browser
      */
-    onTouchMove(evt) {
+    onTouchMove(evt: TouchEvent) {
         if (!this.trackEvents) {
             return;
         }
@@ -148,7 +154,7 @@ class GestureManager {
      *
      * @param {TouchEvent} evt - the raw touch event from the browser
      */
-    onTouchEnd(evt) {
+    onTouchEnd(evt: TouchEvent) {
         if (!this.trackEvents) {
             return;
         }
@@ -169,7 +175,7 @@ class GestureManager {
      *
      * @param {TouchEvent} evt - the raw touch event from the browser
      */
-    onTouchCancel(evt) {
+    onTouchCancel(evt: TouchEvent) {
         if (!this.trackEvents) {
             return;
         }

package/src/components/{gesture-state-machine.js → gesture-state-machine.ts}

@@ -1,3 +1,5 @@
+import type {Key} from "../data/keys";
+
 /**
  * The state machine that backs our gesture system. In particular, this state
  * machine manages the interplay between focuses, touch ups, and swiping.
@@ -6,17 +8,61 @@
  * multi-touch interactions, tracking gesture state on a per-touch basis.
  */
 
-const defaults = {
+// exported for tests
+export type Handlers = {
+    onFocus: (id: string) => void;
+    onBlur: () => void;
+    onTrigger: (id: string) => void;
+    onLongPress: (id: string) => void;
+    onSwipeChange: (x: number) => void;
+    onSwipeEnd: (x: number) => void;
+    onTouchEnd: (id: string) => void;
+};
+
+type Options = {
+    longPressWaitTimeMs: number;
+    swipeThresholdPx: number;
+    holdIntervalMs: number;
+};
+
+type TouchState = {
+    activeNodeId: Key;
+    pressAndHoldIntervalId: number | null;
+    longPressTimeoutId: number | null;
+    swipeLocked: boolean;
+    startX: number;
+};
+
+type TouchStateMap = Record<Key, TouchState>;
+
+type SwipeState = {
+    touchId: Key;
+    startX: number;
+};
+
+const defaultOptions: Options = {
     longPressWaitTimeMs: 50,
     swipeThresholdPx: 20,
     holdIntervalMs: 250,
 };
 
 class GestureStateMachine {
-    constructor(handlers, options, swipeDisabledNodeIds, multiPressableKeys) {
+    handlers: Handlers;
+    options: Options;
+    swipeDisabledNodeIds: Partial<[Key]>;
+    multiPressableKeys: Partial<[Key]>;
+    touchState: Partial<TouchStateMap>;
+    swipeState: SwipeState | null;
+
+    constructor(
+        handlers: Handlers,
+        options: Partial<Options>,
+        swipeDisabledNodeIds?: [Key],
+        multiPressableKeys?: [Key],
+    ) {
         this.handlers = handlers;
         this.options = {
-            ...defaults,
+            ...defaultOptions,
             ...options,
         };
         this.swipeDisabledNodeIds = swipeDisabledNodeIds || [];

package/src/components/{icon.js → icon.tsx}

@@ -3,34 +3,32 @@
  */
 
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import {IconTypes} from "../consts";
 
 import {offBlack} from "./common-style";
 import MathIcon from "./math-icon";
-import {iconPropType} from "./prop-types";
 import SvgIcon from "./svg-icon";
 import TextIcon from "./text-icon";
 
+import type {Icon as IconPropType} from "../types";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
 const focusedColor = "#FFF";
 const unfocusedColor = offBlack;
 
-class Icon extends React.PureComponent {
-    static propTypes = {
-        focused: PropTypes.bool,
-        icon: iconPropType.isRequired,
-        // An Aphrodite style object, or an array of Aphrodite style objects.
-        // Note that custom styles will only be applied to text and math icons
-        // (and not SVG icons).
-        style: PropTypes.any,
-    };
+type Props = {
+    focused: boolean;
+    icon: IconPropType;
+    style?: StyleType;
+};
 
+class Icon extends React.PureComponent<Props> {
     render() {
         const {focused, icon, style} = this.props;
 
-        const styleWithFocus = [
+        const styleWithFocus: StyleType = [
             focused ? styles.focused : styles.unfocused,
             ...(Array.isArray(style) ? style : [style]),
         ];
@@ -55,9 +53,9 @@ class Icon extends React.PureComponent {
                 return (
                     <TextIcon character={icon.data} style={styleWithFocus} />
                 );
+            default:
+                throw new Error("No icon or symbol provided");
         }
-
-        throw new Error("No icon or symbol provided");
     }
 }
 

package/src/components/input/cursor-handle.tsx

@@ -18,7 +18,7 @@ const cursorHeightPx = cursorHandleDistanceMultiplier * (cursorRadiusPx * 4);
 const cursorWidthPx = 4 * cursorRadiusPx;
 
 type Props = {
-    animateIntoPosition: boolean | null | undefined;
+    animateIntoPosition: boolean;
     onTouchCancel: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
     onTouchEnd: (arg1: React.TouchEvent<HTMLSpanElement>) => void;
     onTouchMove: (arg1: React.TouchEvent<HTMLSpanElement>) => void;

package/src/components/input/{drag-listener.js → drag-listener.ts}

@@ -9,6 +9,10 @@
 const touchSlopPx = 8;
 
 class DragListener {
+    _scrollListener: () => void;
+    _moveListener: (evt: TouchEvent) => void;
+    _endAndCancelListener: (evt: TouchEvent) => void;
+
     constructor(onDrag, initialEvent) {
         // We detect drags in two ways. First, by listening for the window
         // scroll event (we consider any legitimate scroll to be a drag).

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

@@ -13,18 +13,21 @@ import {
     wonderBlocksBlue,
     offBlack,
 } from "../common-style";
+import ProvidedKeypad from "../provided-keypad";
 
 import CursorHandle from "./cursor-handle";
 import DragListener from "./drag-listener";
 import MathWrapper from "./math-wrapper";
 import {scrollIntoView} from "./scroll-into-view";
 
+import type {Cursor} from "../../types";
+
 const constrainingFrictionFactor = 0.8;
 
 type Props = {
-    keypadElement: any;
+    keypadElement: ProvidedKeypad;
     onBlur: () => void;
-    onChange: any;
+    onChange: (value: string, callback: any) => void;
     onFocus: () => void;
     style: any;
     value: string;
@@ -36,7 +39,7 @@ type DefaultProps = {
 };
 
 type HandleState = {
-    animateIntoPosition?: boolean | null | undefined;
+    animateIntoPosition?: boolean;
     visible: boolean;
     x?: number;
     y?: number;
@@ -89,7 +92,7 @@ class MathInput extends React.Component<Props, State> {
             this._mathContainer,
             {},
             {
-                onCursorMove: (cursor) => {
+                onCursorMove: (cursor: Cursor) => {
                     // TODO(charlie): It's not great that there is so much coupling
                     // between this keypad and the input behavior. We should wrap
                     // this `MathInput` component in an intermediary component
@@ -275,9 +278,7 @@ class MathInput extends React.Component<Props, State> {
         return this._keypadBounds;
     };
 
-    _updateCursorHandle: (arg1?: boolean | null | undefined) => void = (
-        animateIntoPosition,
-    ) => {
+    _updateCursorHandle: (arg1?: boolean) => void = (animateIntoPosition) => {
         const containerBounds = this._container.getBoundingClientRect();
         const cursor: any = this._container.querySelector(".mq-cursor");
         const cursorBounds = cursor.getBoundingClientRect();
@@ -460,10 +461,10 @@ class MathInput extends React.Component<Props, State> {
 
             // Contains only DOMNodes without child elements.  These should
             // contain some amount of text though.
-            const leafElements: Array<null | HTMLElement> = [];
+            const leafElements: ReadonlyArray<null | HTMLElement> = [];
 
             // Contains only DOMNodes with child elements.
-            const nonLeafElements: Array<null | HTMLElement> = [];
+            const nonLeafElements: ReadonlyArray<null | HTMLElement> = [];
 
             let max = 0;
             const counts: {

package/src/components/input/{math-wrapper.js → math-wrapper.ts}

@@ -119,6 +119,10 @@ const KeysForJumpContext = {
 };
 
 class MathWrapper {
+    MQ: any; // MathQuill interface
+    mathField: any; // MathQuill input
+    callbacks: any;
+
     constructor(element, options = {}, callbacks = {}) {
         this.MQ = MathQuill.getInterface(2);
         this.mathField = this.MQ.MathField(element, {
@@ -150,7 +154,7 @@ class MathWrapper {
         controller.blurred = true;
     }
 
-    _writeNormalFunction(name) {
+    _writeNormalFunction(name: string) {
         this.mathField.write(`\\${name}\\left(\\right)`);
         this.mathField.keystroke("Left");
     }
@@ -161,7 +165,7 @@ class MathWrapper {
      * @param {Key} key - an enum representing the key that was pressed
      * @returns {object} a cursor object, consisting of a cursor context
      */
-    pressKey(key) {
+    pressKey(key: string) {
         const cursor = this.mathField.__controller.cursor;
 
         if (key in KeyActions) {
@@ -211,7 +215,7 @@ class MathWrapper {
             this._handleBackspace(cursor);
         } else if (key === Keys.LEFT) {
             this._handleLeftArrow(cursor);
-        } else if (key === Keys.RIGHT || key === Keys.JUMP_OUT) {
+        } else if (key === Keys.RIGHT) {
             this._handleRightArrow(cursor);
         } else if (/^[a-zA-Z]$/.test(key)) {
             this.mathField[WRITE](key);
@@ -246,7 +250,7 @@ class MathWrapper {
      *                         to determine on which side of the node the cursor
      *                         should be placed
      */
-    setCursorPosition(x, y, hitNode) {
+    setCursorPosition(x: number, y: number, hitNode: HTMLElement) {
         const el = hitNode || document.elementFromPoint(x, y);
 
         if (el) {
@@ -295,7 +299,7 @@ class MathWrapper {
         return this.mathField.latex();
     }
 
-    setContent(latex) {
+    setContent(latex: string) {
         this.mathField.latex(latex);
     }
 
@@ -789,7 +793,7 @@ class MathWrapper {
             const grandparent = cursor.parent.parent;
             const command = this._maybeFindCommandBeforeParens(grandparent);
 
-            cursor.insLeftOf(command.startNode);
+            cursor.insLeftOf(command?.startNode);
             cursor.startSelection();
 
             if (grandparent[this.MQ.R] !== MQ_END) {