@khanacademy/math-input 0.7.2 → 1.0.0

package/dist/components/gesture-state-machine.js.flow

@@ -0,0 +1,118 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+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.
+ * It is entirely ignorant of the existence of popovers and the positions of
+ * DOM nodes, operating solely on IDs. The state machine does accommodate for
+ * multi-touch interactions, tracking gesture state on a per-touch basis.
+ */
+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,
+|};
+declare type Options = {|
+  longPressWaitTimeMs: number,
+  swipeThresholdPx: number,
+  holdIntervalMs: number,
+|};
+declare type TouchState = {|
+  activeNodeId: Key,
+  pressAndHoldIntervalId: number | null,
+  longPressTimeoutId: number | null,
+  swipeLocked: boolean,
+  startX: number,
+|};
+declare type TouchStateMap = { [key: Key]: TouchState };
+declare type SwipeState = {|
+  touchId: Key,
+  startX: number,
+|};
+declare class GestureStateMachine {
+  handlers: Handlers;
+  options: Options;
+  swipeDisabledNodeIds: $Rest<[Key], {}>;
+  multiPressableKeys: $Rest<[Key], {}>;
+  touchState: $Rest<TouchStateMap, {}>;
+  swipeState: SwipeState | null;
+  constructor(
+    handlers: Handlers,
+    options: $Rest<Options, {}>,
+    swipeDisabledNodeIds?: [Key],
+    multiPressableKeys?: [Key]
+  ): this;
+  _maybeCancelLongPressForTouch(touchId: any): void;
+  _maybeCancelPressAndHoldForTouch(touchId: any): void;
+  _cleanupTouchEvent(touchId: any): void;
+
+  /**
+   * Handle a focus event on the node with the given identifier, which may be
+   * `null` to indicate that the user has dragged their finger off of any
+   * registered nodes, but is still in the middle of a gesture.
+   * @param {string | null} id - the identifier of the newly focused node, or
+   *   `null` if no node is focused
+   * @param {number} touchId - a unique identifier associated with the touch
+   */
+  _onFocus(id: any, touchId: any): void;
+
+  /**
+   * Clear out all active gesture information.
+   */
+  _onSwipeStart(): void;
+
+  /**
+   * A function that returns the identifier of the node over which the touch
+   * event occurred. This is provided as a piece of lazy computation, as
+   * computing the DOM node for a given point is expensive, and the state
+   * machine won't always need that information. For example, if the user is
+   * swiping, then `onTouchMove` needs to be performant and doesn't care about
+   * the node over which the touch occurred.
+   * @typedef idComputation
+   * @returns {DOMNode} - the identifier of the node over which the touch
+   *  occurred
+   */
+  /**
+   * Handle a touch-start event on the node with the given identifer.
+   * @param {idComputation} getId - a function that returns identifier of the
+   *   node over which the start event occurred
+   * @param {number} touchId - a unique identifier associated with the touch
+   */
+  onTouchStart(getId: any, touchId: any, pageX: any): void;
+
+  /**
+   * Handle a touch-move event on the node with the given identifer.
+   * @param {idComputation} getId - a function that returns identifier of the
+   *   node over which the move event occurred
+   * @param {number} touchId - a unique identifier associated with the touch
+   * @param {number} pageX - the x coordinate of the touch
+   * @param {boolean} swipeEnabled - whether the system should allow for
+   *   transitions into a swiping state
+   */
+  onTouchMove(getId: any, touchId: any, pageX: any, swipeEnabled: any): void;
+
+  /**
+   * Handle a touch-end event on the node with the given identifer.
+   * @param {idComputation} getId - a function that returns identifier of the
+   *   node over which the end event occurred
+   * @param {number} touchId - a unique identifier associated with the touch
+   * @param {number} pageX - the x coordinate of the touch
+   */
+  onTouchEnd(getId: any, touchId: any, pageX: any): void;
+
+  /**
+   * Handle a touch-cancel event.
+   */
+  onTouchCancel(touchId: any): void;
+}
+declare export default typeof GestureStateMachine;

package/dist/components/icon.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A component that renders an icon for a symbol with the given name.
+ */
+import * as React from "react";
+import type { Icon as IconPropType } from "../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    focused: boolean;
+    icon: IconPropType;
+    style?: StyleType;
+};
+declare class Icon extends React.PureComponent<Props> {
+    render(): JSX.Element;
+}
+export default Icon;

package/dist/components/icon.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { Icon as IconPropType } from "../types";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare type Props = {|
+  focused: boolean,
+  icon: IconPropType,
+  style?: StyleType,
+|};
+declare class Icon extends React.PureComponent<Props> {
+  render(): React$Node;
+}
+declare export default typeof Icon;

package/dist/components/input/__tests__/test-math-wrapper.d.ts

@@ -0,0 +1,8 @@
+import MathWrapper from "../math-wrapper";
+export default class TestMathWrapper extends MathWrapper {
+    getContent(): any;
+    selectAll(): void;
+    clearSelection(): void;
+    moveToStart(): void;
+    isSelected(): boolean;
+}

package/dist/components/input/__tests__/test-math-wrapper.js.flow

@@ -0,0 +1,14 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import MathWrapper from "../math-wrapper";
+declare export default class TestMathWrapper extends MathWrapper {
+  getContent(): any;
+  selectAll(): void;
+  clearSelection(): void;
+  moveToStart(): void;
+  isSelected(): boolean;
+}

package/dist/components/input/cursor-handle.d.ts

@@ -3,7 +3,7 @@
  */
 import * as React from "react";
 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/dist/components/input/cursor-handle.js.flow

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 declare type Props = {|
-  animateIntoPosition: boolean | null | void,
+  animateIntoPosition: boolean,
   onTouchCancel: (arg1: SyntheticTouchEvent<HTMLSpanElement>) => void,
   onTouchEnd: (arg1: SyntheticTouchEvent<HTMLSpanElement>) => void,
   onTouchMove: (arg1: SyntheticTouchEvent<HTMLSpanElement>) => void,

package/dist/components/input/drag-listener.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A gesture recognizer that detects 'drags', crudely defined as either scrolls
+ * or touches that move a sufficient distance.
+ */
+declare class DragListener {
+    _scrollListener: () => void;
+    _moveListener: (evt: TouchEvent) => void;
+    _endAndCancelListener: (evt: TouchEvent) => void;
+    constructor(onDrag: any, initialEvent: any);
+    attach(): void;
+    detach(): void;
+}
+export default DragListener;

package/dist/components/input/drag-listener.js.flow

@@ -0,0 +1,19 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+/**
+ * A gesture recognizer that detects 'drags', crudely defined as either scrolls
+ * or touches that move a sufficient distance.
+ */
+declare class DragListener {
+  _scrollListener: () => void;
+  _moveListener: (evt: TouchEvent) => void;
+  _endAndCancelListener: (evt: TouchEvent) => void;
+  constructor(onDrag: any, initialEvent: any): this;
+  attach(): void;
+  detach(): void;
+}
+declare export default typeof DragListener;

package/dist/components/input/math-input.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
+import ProvidedKeypad from "../provided-keypad";
 type Props = {
-    keypadElement: any;
+    keypadElement: ProvidedKeypad;
     onBlur: () => void;
-    onChange: any;
+    onChange: (value: string, callback: any) => void;
     onFocus: () => void;
     style: any;
     value: string;
@@ -12,7 +13,7 @@ type DefaultProps = {
     value: Props["value"];
 };
 type HandleState = {
-    animateIntoPosition?: boolean | null | undefined;
+    animateIntoPosition?: boolean;
     visible: boolean;
     x?: number;
     y?: number;
@@ -46,7 +47,7 @@ declare class MathInput extends React.Component<Props, State> {
     _updateInputPadding: () => void;
     /** Gets and cache they bounds of the keypadElement */
     _getKeypadBounds: () => any;
-    _updateCursorHandle: (arg1?: boolean | null | undefined) => void;
+    _updateCursorHandle: (arg1?: boolean) => void;
     _hideCursorHandle: () => void;
     _handleScroll: () => void;
     blur: () => void;

package/dist/components/input/math-input.js.flow

@@ -5,10 +5,11 @@
  * @flow
  */
 import * as React from "react";
+import ProvidedKeypad from "../provided-keypad";
 declare type Props = {|
-  keypadElement: any,
+  keypadElement: ProvidedKeypad,
   onBlur: () => void,
-  onChange: any,
+  onChange: (value: string, callback: any) => void,
   onFocus: () => void,
   style: any,
   value: string,
@@ -18,7 +19,7 @@ declare type DefaultProps = {|
   value: $PropertyType<Props, "value">,
 |};
 declare type HandleState = {|
-  animateIntoPosition?: boolean | null | void,
+  animateIntoPosition?: boolean,
   visible: boolean,
   x?: number,
   y?: number,
@@ -55,7 +56,7 @@ declare class MathInput extends React.Component<Props, State> {
    * Gets and cache they bounds of the keypadElement
    */
   _getKeypadBounds: () => any;
-  _updateCursorHandle: (arg1?: boolean | null | void) => void;
+  _updateCursorHandle: (arg1?: boolean) => void;
   _hideCursorHandle: () => void;
   _handleScroll: () => void;
   blur: () => void;

package/dist/components/input/math-wrapper.d.ts

@@ -0,0 +1,110 @@
+/**
+ * This file contains a wrapper around MathQuill so that we can provide a
+ * more regular interface for the functionality we need while insulating us
+ * from MathQuill changes.
+ */
+declare class MathWrapper {
+    MQ: any;
+    mathField: any;
+    callbacks: any;
+    constructor(element: any, options?: {}, callbacks?: {});
+    focus(): void;
+    blur(): void;
+    _writeNormalFunction(name: string): void;
+    /**
+     * Handle a key press and return the resulting cursor state.
+     *
+     * @param {Key} key - an enum representing the key that was pressed
+     * @returns {object} a cursor object, consisting of a cursor context
+     */
+    pressKey(key: string): {
+        context: string;
+    };
+    /**
+     * Place the cursor beside the node located at the given coordinates.
+     *
+     * @param {number} x - the x coordinate in the viewport
+     * @param {number} y - the y coordinate in the viewport
+     * @param {Node} hitNode - the node next to which the cursor should be
+     *                         placed; if provided, the coordinates will be used
+     *                         to determine on which side of the node the cursor
+     *                         should be placed
+     */
+    setCursorPosition(x: number, y: number, hitNode: HTMLElement): void;
+    getCursor(): any;
+    getSelection(): any;
+    getContent(): any;
+    setContent(latex: string): void;
+    isEmpty(): boolean;
+    _handleBackspaceInNthRoot(cursor: any): void;
+    /**
+     * Advances the cursor to the next logical position.
+     *
+     * @param {cursor} cursor
+     * @private
+     */
+    _handleJumpOut(cursor: any, key: any): void;
+    /**
+     * Selects and deletes part of the expression based on the cursor location.
+     * See inline comments for precise behavior of different cases.
+     *
+     * @param {cursor} cursor
+     * @private
+     */
+    _handleBackspace(cursor: any): void;
+    _handleLeftArrow(cursor: any): void;
+    _handleRightArrow(cursor: any): void;
+    _handleExponent(cursor: any, key: any): void;
+    /**
+     * Return the start node, end node, and full name of the command of which
+     * the initial node is a part, or `null` if the node is not part of a
+     * command.
+     *
+     * @param {node} initialNode - the node to included as part of the command
+     * @returns {null|object} - `null` or an object containing the start node
+     *                          (`startNode`), end node (`endNode`), and full
+     *                          name (`name`) of the command
+     * @private
+     */
+    _maybeFindCommand(initialNode: any): {
+        name: string;
+        startNode: any;
+        endNode: any;
+    } | null;
+    /**
+     * Return the start node, end node, and full name of the command to the left
+     * of `\\left(`, or `null` if there is no command.
+     *
+     * @param {node} leftParenNode - node where .ctrlSeq == `\\left(`
+     * @returns {null|object} - `null` or an object containing the start node
+     *                          (`startNode`), end node (`endNode`), and full
+     *                          name (`name`) of the command
+     * @private
+     */
+    _maybeFindCommandBeforeParens(leftParenNode: any): {
+        name: string;
+        startNode: any;
+        endNode: any;
+    } | null;
+    _selectNode(node: any, cursor: any): void;
+    _isFraction(node: any): any;
+    _isNumerator(node: any): any;
+    _isDenominator(node: any): any;
+    _isSubScript(node: any): any;
+    _isSuperScript(node: any): any;
+    _isParens(node: any): any;
+    _isLeaf(node: any): any;
+    _isSquareRoot(node: any): any;
+    _isNthRoot(node: any): any;
+    _isNthRootIndex(node: any): any;
+    _isInsideLogIndex(cursor: any): boolean;
+    _isInsideEmptyNode(cursor: any): boolean;
+    _handleBackspaceInRootIndex(cursor: any): void;
+    _handleBackspaceInLogIndex(cursor: any): void;
+    _handleBackspaceOutsideParens(cursor: any): void;
+    _handleBackspaceInsideParens(cursor: any): void;
+    _handleBackspaceAfterLigaturedSymbol(cursor: any): void;
+    contextForCursor(cursor: any): "NONE" | "IN_PARENS" | "IN_SUPER_SCRIPT" | "IN_SUB_SCRIPT" | "IN_NUMERATOR" | "IN_DENOMINATOR" | "BEFORE_FRACTION";
+    _isAtTopLevel(cursor: any): boolean;
+}
+export default MathWrapper;

package/dist/components/input/math-wrapper.js.flow

@@ -0,0 +1,125 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+/**
+ * This file contains a wrapper around MathQuill so that we can provide a
+ * more regular interface for the functionality we need while insulating us
+ * from MathQuill changes.
+ */
+declare class MathWrapper {
+  MQ: any;
+  mathField: any;
+  callbacks: any;
+  constructor(element: any, options?: {||}, callbacks?: {||}): this;
+  focus(): void;
+  blur(): void;
+  _writeNormalFunction(name: string): void;
+
+  /**
+   * Handle a key press and return the resulting cursor state.
+   * @param {Key} key - an enum representing the key that was pressed
+   * @returns {{...}} a cursor object, consisting of a cursor context
+   */
+  pressKey(key: string): {|
+    context: string,
+  |};
+
+  /**
+   * Place the cursor beside the node located at the given coordinates.
+   * @param {number} x - the x coordinate in the viewport
+   * @param {number} y - the y coordinate in the viewport
+   * @param {Node} hitNode - the node next to which the cursor should be
+   *   placed; if provided, the coordinates will be used
+   *   to determine on which side of the node the cursor
+   *   should be placed
+   */
+  setCursorPosition(x: number, y: number, hitNode: HTMLElement): void;
+  getCursor(): any;
+  getSelection(): any;
+  getContent(): any;
+  setContent(latex: string): void;
+  isEmpty(): boolean;
+  _handleBackspaceInNthRoot(cursor: any): void;
+
+  /**
+   * Advances the cursor to the next logical position.
+   * @param {cursor} cursor
+   * @private
+   */
+  _handleJumpOut(cursor: any, key: any): void;
+
+  /**
+   * Selects and deletes part of the expression based on the cursor location.
+   * See inline comments for precise behavior of different cases.
+   * @param {cursor} cursor
+   * @private
+   */
+  _handleBackspace(cursor: any): void;
+  _handleLeftArrow(cursor: any): void;
+  _handleRightArrow(cursor: any): void;
+  _handleExponent(cursor: any, key: any): void;
+
+  /**
+   * Return the start node, end node, and full name of the command of which
+   * the initial node is a part, or `null` if the node is not part of a
+   * command.
+   * @param {node} initialNode - the node to included as part of the command
+   * @returns {null | {...}} - `null` or an object containing the start node
+   *   (`startNode`), end node (`endNode`), and full
+   *   name (`name`) of the command
+   * @private
+   */
+  _maybeFindCommand(initialNode: any): {|
+    name: string,
+    startNode: any,
+    endNode: any,
+  |} | null;
+
+  /**
+   * Return the start node, end node, and full name of the command to the left
+   * of `\\left(`, or `null` if there is no command.
+   * @param {node} leftParenNode - node where .ctrlSeq == `\\left(`
+   * @returns {null | {...}} - `null` or an object containing the start node
+   *   (`startNode`), end node (`endNode`), and full
+   *   name (`name`) of the command
+   * @private
+   */
+  _maybeFindCommandBeforeParens(leftParenNode: any): {|
+    name: string,
+    startNode: any,
+    endNode: any,
+  |} | null;
+  _selectNode(node: any, cursor: any): void;
+  _isFraction(node: any): any;
+  _isNumerator(node: any): any;
+  _isDenominator(node: any): any;
+  _isSubScript(node: any): any;
+  _isSuperScript(node: any): any;
+  _isParens(node: any): any;
+  _isLeaf(node: any): any;
+  _isSquareRoot(node: any): any;
+  _isNthRoot(node: any): any;
+  _isNthRootIndex(node: any): any;
+  _isInsideLogIndex(cursor: any): boolean;
+  _isInsideEmptyNode(cursor: any): boolean;
+  _handleBackspaceInRootIndex(cursor: any): void;
+  _handleBackspaceInLogIndex(cursor: any): void;
+  _handleBackspaceOutsideParens(cursor: any): void;
+  _handleBackspaceInsideParens(cursor: any): void;
+  _handleBackspaceAfterLigaturedSymbol(cursor: any): void;
+  contextForCursor(
+    cursor: any
+  ):
+    | "NONE"
+    | "IN_PARENS"
+    | "IN_SUPER_SCRIPT"
+    | "IN_SUB_SCRIPT"
+    | "IN_NUMERATOR"
+    | "IN_DENOMINATOR"
+    | "BEFORE_FRACTION";
+  _isAtTopLevel(cursor: any): boolean;
+}
+declare export default typeof MathWrapper;

package/dist/components/input/scroll-into-view.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A single function used to scroll a DOM node into view, optionally taking into
+ * account that it may be obscured by the custom keypad. The logic makes the
+ * strong assumption that the keypad will be anchored to the bottom of the page
+ * in calculating its height, as this method may be called before the keypad has
+ * animated into view.
+ *
+ * TODO(charlie): Move this scroll logic out of our components and into a higher
+ * level in the component tree--perhaps even into webapp, beyond Perseus.
+ */
+export declare const scrollIntoView: (containerNode: any, keypadNode: any) => void;

package/dist/components/input/scroll-into-view.js.flow

@@ -0,0 +1,20 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+/**
+ * A single function used to scroll a DOM node into view, optionally taking into
+ * account that it may be obscured by the custom keypad. The logic makes the
+ * strong assumption that the keypad will be anchored to the bottom of the page
+ * in calculating its height, as this method may be called before the keypad has
+ * animated into view.
+ *
+ * TODO(charlie): Move this scroll logic out of our components and into a higher
+ * level in the component tree--perhaps even into webapp, beyond Perseus.
+ */
+declare export var scrollIntoView: (
+  containerNode: any,
+  keypadNode: any
+) => void;

package/dist/components/keypad/button-assets.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 type KeyId = string;
-declare const buttonAsset: React.FC<{
+type Props = {
     id: KeyId;
-}>;
-export default buttonAsset;
+};
+export default function ButtonAsset({ id }: Props): React.ReactElement;
+export {};

package/dist/components/keypad/button-assets.js.flow

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 declare type KeyId = string;
-declare var buttonAsset: React.StatelessFunctionalComponent<{|
+declare type Props = {|
   id: KeyId,
-|}>;
-declare export default typeof buttonAsset;
+|};
+declare export default function ButtonAsset(x: Props): React.Element<any>;

package/dist/components/keypad/button.d.ts

@@ -6,8 +6,7 @@ type Props = {
     style?: StyleType;
     tintColor?: string;
 };
-type State = Record<any, any>;
-export default class Button extends React.Component<Props, State> {
+export default class Button extends React.Component<Props> {
     render(): React.ReactNode;
 }
 export {};

package/dist/components/keypad/button.js.flow

@@ -12,7 +12,6 @@ declare type Props = {|
   style?: StyleType,
   tintColor?: string,
 |};
-declare type State = { [key: any]: any };
-declare export default class Button extends React.Component<Props, State> {
+declare export default class Button extends React.Component<Props> {
   render(): React.Node;
 }

package/dist/components/keypad/keypad-page-items.d.ts

@@ -1,23 +1,28 @@
 import * as React from "react";
 import type { KeyConfig } from "../../data/key-configs";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
-export declare const KeypadPageContainer: React.FC<{
+type KeypadPageContainerProps = {
     children: React.ReactNode;
-}>;
-export declare const KeypadButton: React.FC<{
+};
+export declare const KeypadPageContainer: ({ children, }: KeypadPageContainerProps) => React.ReactElement;
+type KeypadButtonProps = {
     keyConfig: KeyConfig;
     tintColor?: string;
     style?: StyleType;
     onClickKey: (keyConfig: string) => void;
-}>;
-export declare const SecondaryKeypadButton: React.FC<{
+};
+export declare const KeypadButton: ({ keyConfig, onClickKey, tintColor, style, }: KeypadButtonProps) => React.ReactElement;
+type SecondaryKeypadButtonProps = {
     keyConfig: KeyConfig;
-    style?: any;
+    style?: StyleType;
     onClickKey: (keyConfig: string) => void;
-}>;
-export declare const KeypadActionButton: React.FC<{
+};
+export declare const SecondaryKeypadButton: ({ keyConfig, onClickKey, style, }: SecondaryKeypadButtonProps) => React.ReactElement;
+type KeypadActionButtonProps = {
     keyConfig: KeyConfig;
-    style?: any;
+    style?: StyleType;
     onClickKey: (keyConfig: string) => void;
-}>;
+};
+export declare const KeypadActionButton: ({ keyConfig, onClickKey, style, }: KeypadActionButtonProps) => React.ReactElement;
 export declare const PlaceHolderButton: () => React.ReactElement;
+export {};