@khanacademy/math-input 1.0.0 → 1.0.1

package/dist/store/actions.d.ts

@@ -0,0 +1,64 @@
+import type { Key } from "../data/keys";
+import type { KeypadConfiguration, KeyHandler, Cursor, ActiveNodesObj, Border } from "../types";
+type DismissKeypadAction = {
+    type: "DismissKeypad";
+};
+export declare const dismissKeypad: () => DismissKeypadAction;
+type ActivateKeypadAction = {
+    type: "ActivateKeypad";
+};
+export declare const activateKeypad: () => ActivateKeypadAction;
+/**
+ * Configure the keypad with the provided configuration parameters.
+ */
+type ConfigureKeypadAction = {
+    type: "ConfigureKeypad";
+    configuration: KeypadConfiguration;
+};
+export declare const configureKeypad: (configuration: KeypadConfiguration) => ConfigureKeypadAction;
+type SetPageSizeAction = {
+    type: "SetPageSize";
+    pageWidthPx: number;
+    pageHeightPx: number;
+};
+export declare const setPageSize: (pageWidthPx: number, pageHeightPx: number) => SetPageSizeAction;
+type RemoveEchoAction = {
+    type: "RemoveEcho";
+    animationId: string;
+};
+export declare const removeEcho: (animationId: string) => RemoveEchoAction;
+type SetKeyHandlerAction = {
+    type: "SetKeyHandler";
+    keyHandler: KeyHandler;
+};
+export declare const setKeyHandler: (keyHandler: KeyHandler) => SetKeyHandlerAction;
+type SetCursorAction = {
+    type: "SetCursor";
+    cursor: Cursor;
+};
+export declare const setCursor: (cursor: Cursor) => SetCursorAction;
+type OnSwipeChangeAction = {
+    type: "OnSwipeChange";
+    dx: number;
+};
+export declare const onSwipeChange: (dx: number) => OnSwipeChangeAction;
+type OnSwipeEndAction = {
+    type: "OnSwipeEnd";
+    dx: number;
+};
+export declare const onSwipeEnd: (dx: number) => OnSwipeEndAction;
+type SetActiveNodesAction = {
+    type: "SetActiveNodes";
+    activeNodes: any;
+};
+export declare const setActiveNodes: (activeNodes: ActiveNodesObj) => SetActiveNodesAction;
+type PressKeyAction = {
+    type: "PressKey";
+    key: Key;
+    borders: Border;
+    initialBounds: DOMRect;
+    inPopover: boolean;
+};
+export declare const pressKey: (key: Key, borders: ("LEFT" | "BOTTOM" | undefined)[], initialBounds: DOMRect, inPopover: any) => PressKeyAction;
+export type Action = DismissKeypadAction | ActivateKeypadAction | ConfigureKeypadAction | SetPageSizeAction | RemoveEchoAction | SetKeyHandlerAction | SetCursorAction | OnSwipeChangeAction | OnSwipeEndAction | SetActiveNodesAction | PressKeyAction;
+export {};

package/dist/store/actions.js.flow

@@ -0,0 +1,100 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { Key } from "../data/keys";
+import type {
+  KeypadConfiguration,
+  KeyHandler,
+  Cursor,
+  ActiveNodesObj,
+  Border,
+} from "../types";
+declare type DismissKeypadAction = {|
+  type: "DismissKeypad",
+|};
+declare export var dismissKeypad: () => DismissKeypadAction;
+declare type ActivateKeypadAction = {|
+  type: "ActivateKeypad",
+|};
+declare export var activateKeypad: () => ActivateKeypadAction;
+/**
+ * Configure the keypad with the provided configuration parameters.
+ */
+declare type ConfigureKeypadAction = {|
+  type: "ConfigureKeypad",
+  configuration: KeypadConfiguration,
+|};
+declare export var configureKeypad: (
+  configuration: KeypadConfiguration
+) => ConfigureKeypadAction;
+declare type SetPageSizeAction = {|
+  type: "SetPageSize",
+  pageWidthPx: number,
+  pageHeightPx: number,
+|};
+declare export var setPageSize: (
+  pageWidthPx: number,
+  pageHeightPx: number
+) => SetPageSizeAction;
+declare type RemoveEchoAction = {|
+  type: "RemoveEcho",
+  animationId: string,
+|};
+declare export var removeEcho: (animationId: string) => RemoveEchoAction;
+declare type SetKeyHandlerAction = {|
+  type: "SetKeyHandler",
+  keyHandler: KeyHandler,
+|};
+declare export var setKeyHandler: (
+  keyHandler: KeyHandler
+) => SetKeyHandlerAction;
+declare type SetCursorAction = {|
+  type: "SetCursor",
+  cursor: Cursor,
+|};
+declare export var setCursor: (cursor: Cursor) => SetCursorAction;
+declare type OnSwipeChangeAction = {|
+  type: "OnSwipeChange",
+  dx: number,
+|};
+declare export var onSwipeChange: (dx: number) => OnSwipeChangeAction;
+declare type OnSwipeEndAction = {|
+  type: "OnSwipeEnd",
+  dx: number,
+|};
+declare export var onSwipeEnd: (dx: number) => OnSwipeEndAction;
+declare type SetActiveNodesAction = {|
+  type: "SetActiveNodes",
+  activeNodes: any,
+|};
+declare export var setActiveNodes: (
+  activeNodes: ActiveNodesObj
+) => SetActiveNodesAction;
+declare type PressKeyAction = {|
+  type: "PressKey",
+  key: Key,
+  borders: Border,
+  initialBounds: DOMRect,
+  inPopover: boolean,
+|};
+declare export var pressKey: (
+  key: Key,
+  borders: ("LEFT" | "BOTTOM" | void)[],
+  initialBounds: DOMRect,
+  inPopover: any
+) => PressKeyAction;
+export type Action =
+  | DismissKeypadAction
+  | ActivateKeypadAction
+  | ConfigureKeypadAction
+  | SetPageSizeAction
+  | RemoveEchoAction
+  | SetKeyHandlerAction
+  | SetCursorAction
+  | OnSwipeChangeAction
+  | OnSwipeEndAction
+  | SetActiveNodesAction
+  | PressKeyAction;

package/dist/store/echo-reducer.d.ts

@@ -1,5 +1,4 @@
+import type { Action } from "./actions";
 import type { EchoState } from "./types";
-declare const echoReducer: (state: {
-    readonly echoes: readonly [];
-} | undefined, action: any) => EchoState;
+declare const echoReducer: (state: EchoState | undefined, action: Action) => EchoState;
 export default echoReducer;

package/dist/store/echo-reducer.js.flow

@@ -4,11 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
+import type { Action } from "./actions";
 import type { EchoState } from "./types";
-declare var echoReducer: (
-  state: {|
-    +echoes: [],
-  |} | void,
-  action: any
-) => EchoState;
+declare var echoReducer: (state: EchoState | void, action: Action) => EchoState;
 declare export default typeof echoReducer;

package/dist/store/index.d.ts

@@ -1,46 +1,10 @@
 import * as Redux from "redux";
-import GestureManager from "../components/gesture-manager";
 import type { GestureState } from "./types";
 export declare const createStore: () => Redux.Store<Redux.EmptyObject & {
     input: import("./types").InputState;
-    keypad: import("./types").KeypadState | {
-        readonly extraKeys: readonly ["x", "y", "THETA", "PI"];
-        readonly keypadType: "EXPRESSION";
-        readonly active: false;
-    };
-    pager: import("./types").PagerState | {
-        readonly animateToPosition: false;
-        readonly currentPage: number;
-        readonly dx: 0;
-        readonly numPages: number;
-        readonly pageWidthPx: 0;
-        readonly velocityTracker: import("../components/velocity-tracker").default;
-    };
-    gestures: GestureState | {
-        readonly popover: null;
-        readonly focus: null;
-        readonly gestureManager: GestureManager;
-    };
-    echoes: import("./types").EchoState | {
-        readonly echoes: readonly [];
-    };
-    layout: import("./types").LayoutState | {
-        readonly gridDimensions: {
-            readonly numRows: number;
-            readonly numColumns: number;
-            readonly numMaxVisibleRows: number;
-            readonly numPages: number;
-        };
-        readonly buttonDimensions: {
-            readonly widthPx: 48;
-            readonly heightPx: 48;
-        };
-        readonly pageDimensions: {
-            readonly pageWidthPx: 0;
-            readonly pageHeightPx: 0;
-        };
-        readonly layoutMode: "FULLSCREEN";
-        readonly paginationEnabled: false;
-        readonly navigationPadEnabled: false;
-    };
+    keypad: import("./types").KeypadState;
+    pager: import("./types").PagerState;
+    gestures: GestureState;
+    echoes: import("./types").EchoState;
+    layout: import("./types").LayoutState;
 }, Redux.AnyAction>;

package/dist/store/index.js.flow

@@ -5,65 +5,18 @@
  * @flow
  */
 import * as $Flowgen$Import$_2e__2f_types from "./types";
-import * as $Flowgen$Import$_2e__2e__2f_components_2f_velocity_2d_tracker from "../components/velocity-tracker";
 import * as Redux from "redux";
-import GestureManager from "../components/gesture-manager";
 import type { GestureState } from "./types";
 declare export var createStore: () => Redux.Store<
   {|
     ...Redux.EmptyObject,
     ...{|
       input: $Flowgen$Import$_2e__2f_types.InputState,
-      keypad:
-        | $Flowgen$Import$_2e__2f_types.KeypadState
-        | {|
-            +extraKeys: ["x", "y", "THETA", "PI"],
-            +keypadType: "EXPRESSION",
-            +active: false,
-          |},
-      pager:
-        | $Flowgen$Import$_2e__2f_types.PagerState
-        | {|
-            +animateToPosition: false,
-            +currentPage: number,
-            +dx: 0,
-            +numPages: number,
-            +pageWidthPx: 0,
-            +velocityTracker: $Flowgen$Import$_2e__2e__2f_components_2f_velocity_2d_tracker.default,
-          |},
-      gestures:
-        | GestureState
-        | {|
-            +popover: null,
-            +focus: null,
-            +gestureManager: GestureManager,
-          |},
-      echoes:
-        | $Flowgen$Import$_2e__2f_types.EchoState
-        | {|
-            +echoes: [],
-          |},
-      layout:
-        | $Flowgen$Import$_2e__2f_types.LayoutState
-        | {|
-            +gridDimensions: {|
-              +numRows: number,
-              +numColumns: number,
-              +numMaxVisibleRows: number,
-              +numPages: number,
-            |},
-            +buttonDimensions: {|
-              +widthPx: 48,
-              +heightPx: 48,
-            |},
-            +pageDimensions: {|
-              +pageWidthPx: 0,
-              +pageHeightPx: 0,
-            |},
-            +layoutMode: "FULLSCREEN",
-            +paginationEnabled: false,
-            +navigationPadEnabled: false,
-          |},
+      keypad: $Flowgen$Import$_2e__2f_types.KeypadState,
+      pager: $Flowgen$Import$_2e__2f_types.PagerState,
+      gestures: GestureState,
+      echoes: $Flowgen$Import$_2e__2f_types.EchoState,
+      layout: $Flowgen$Import$_2e__2f_types.LayoutState,
     |},
   |},
   Redux.AnyAction

package/dist/store/input-reducer.d.ts

@@ -1,7 +1,4 @@
-import type { Cursor, KeyHandler } from "../types";
+import type { Action } from "./actions";
 import type { InputState } from "./types";
-declare const inputReducer: (state: {
-    keyHandler: KeyHandler | null;
-    cursor: Cursor;
-} | undefined, action: any) => InputState;
+declare const inputReducer: (state: InputState | undefined, action: Action) => InputState;
 export default inputReducer;

package/dist/store/input-reducer.js.flow

@@ -4,13 +4,10 @@
  * Flowgen v1.21.0
  * @flow
  */
-import type { Cursor, KeyHandler } from "../types";
+import type { Action } from "./actions";
 import type { InputState } from "./types";
 declare var inputReducer: (
-  state: {|
-    keyHandler: KeyHandler | null,
-    cursor: Cursor,
-  |} | void,
-  action: any
+  state: InputState | void,
+  action: Action
 ) => InputState;
 declare export default typeof inputReducer;

package/dist/store/keypad-reducer.d.ts

@@ -1,9 +1,4 @@
+import type { Action } from "./actions";
 import type { KeypadState } from "./types";
-declare const keypadReducer: (state: {
-    readonly extraKeys: readonly ["x", "y", "THETA", "PI"];
-    readonly keypadType: "EXPRESSION";
-    readonly active: false;
-} | undefined, action: {
-    type: string;
-}) => KeypadState;
+declare const keypadReducer: (state: KeypadState | undefined, action: Action) => KeypadState;
 export default keypadReducer;

package/dist/store/keypad-reducer.js.flow

@@ -4,15 +4,10 @@
  * Flowgen v1.21.0
  * @flow
  */
+import type { Action } from "./actions";
 import type { KeypadState } from "./types";
 declare var keypadReducer: (
-  state: {|
-    +extraKeys: ["x", "y", "THETA", "PI"],
-    +keypadType: "EXPRESSION",
-    +active: false,
-  |} | void,
-  action: {|
-    type: string,
-  |}
+  state: KeypadState | void,
+  action: Action
 ) => KeypadState;
 declare export default typeof keypadReducer;

package/dist/store/layout-reducer.d.ts

@@ -1,21 +1,4 @@
+import type { Action } from "./actions";
 import type { LayoutState } from "./types";
-declare const layoutReducer: (state: {
-    readonly gridDimensions: {
-        readonly numRows: number;
-        readonly numColumns: number;
-        readonly numMaxVisibleRows: number;
-        readonly numPages: number;
-    };
-    readonly buttonDimensions: {
-        readonly widthPx: 48;
-        readonly heightPx: 48;
-    };
-    readonly pageDimensions: {
-        readonly pageWidthPx: 0;
-        readonly pageHeightPx: 0;
-    };
-    readonly layoutMode: "FULLSCREEN";
-    readonly paginationEnabled: false;
-    readonly navigationPadEnabled: false;
-} | undefined, action: any) => LayoutState;
+declare const layoutReducer: (state: LayoutState | undefined, action: Action) => LayoutState;
 export default layoutReducer;

package/dist/store/layout-reducer.js.flow

@@ -4,27 +4,10 @@
  * Flowgen v1.21.0
  * @flow
  */
+import type { Action } from "./actions";
 import type { LayoutState } from "./types";
 declare var layoutReducer: (
-  state: {|
-    +gridDimensions: {|
-      +numRows: number,
-      +numColumns: number,
-      +numMaxVisibleRows: number,
-      +numPages: number,
-    |},
-    +buttonDimensions: {|
-      +widthPx: 48,
-      +heightPx: 48,
-    |},
-    +pageDimensions: {|
-      +pageWidthPx: 0,
-      +pageHeightPx: 0,
-    |},
-    +layoutMode: "FULLSCREEN",
-    +paginationEnabled: false,
-    +navigationPadEnabled: false,
-  |} | void,
-  action: any
+  state: LayoutState | void,
+  action: Action
 ) => LayoutState;
 declare export default typeof layoutReducer;

package/dist/store/pager-reducer.d.ts

@@ -1,13 +1,4 @@
-import VelocityTracker from "../components/velocity-tracker";
+import type { Action } from "./actions";
 import type { PagerState } from "./types";
-declare const pagerReducer: (state: {
-    readonly animateToPosition: false;
-    readonly currentPage: number;
-    readonly dx: 0;
-    readonly numPages: number;
-    readonly pageWidthPx: 0;
-    readonly velocityTracker: VelocityTracker;
-} | undefined, action: {
-    type: string;
-}) => PagerState;
+declare const pagerReducer: (state: PagerState | undefined, action: Action) => PagerState;
 export default pagerReducer;

package/dist/store/pager-reducer.js.flow

@@ -4,19 +4,10 @@
  * Flowgen v1.21.0
  * @flow
  */
-import VelocityTracker from "../components/velocity-tracker";
+import type { Action } from "./actions";
 import type { PagerState } from "./types";
 declare var pagerReducer: (
-  state: {|
-    +animateToPosition: false,
-    +currentPage: number,
-    +dx: 0,
-    +numPages: number,
-    +pageWidthPx: 0,
-    +velocityTracker: VelocityTracker,
-  |} | void,
-  action: {|
-    type: string,
-  |}
+  state: PagerState | void,
+  action: Action
 ) => PagerState;
 declare export default typeof pagerReducer;

package/dist/store/types.d.ts

@@ -1,6 +1,7 @@
 import GestureManager from "../components/gesture-manager";
 import VelocityTracker from "../components/velocity-tracker";
 import { LayoutModes } from "../consts";
+import type { KeypadType } from "../consts";
 import type { Key } from "../data/keys";
 import type { Cursor, KeyHandler, Popover, Echo } from "../types";
 export interface InputState {
@@ -9,7 +10,7 @@ export interface InputState {
 }
 export interface KeypadState {
     extraKeys: ReadonlyArray<string>;
-    keypadType: any;
+    keypadType: KeypadType;
     active: boolean;
 }
 export interface PagerState {

package/dist/store/types.js.flow

@@ -7,6 +7,7 @@
 import GestureManager from "../components/gesture-manager";
 import VelocityTracker from "../components/velocity-tracker";
 import { LayoutModes } from "../consts";
+import type { KeypadType } from "../consts";
 import type { Key } from "../data/keys";
 import type { Cursor, KeyHandler, Popover, Echo } from "../types";
 export interface InputState {
@@ -15,7 +16,7 @@ export interface InputState {
 }
 export interface KeypadState {
   extraKeys: $ReadOnlyArray<string>;
-  keypadType: any;
+  keypadType: KeypadType;
   active: boolean;
 }
 export interface PagerState {

package/dist/types.d.ts

@@ -48,3 +48,16 @@ export type KeypadLayout = {
     numPages: number;
     maxVisibleRows: number;
 };
+type ActiveNodesObjPopover = {
+    parentId: string;
+    childIds: ReadonlyArray<string>;
+};
+export type ActiveNodesObj = {
+    popover: ActiveNodesObjPopover | null;
+    focus: string | null;
+};
+export type LayoutProps = {
+    initialBounds: DOMRect;
+    borders: Border;
+};
+export {};

package/dist/types.js.flow

@@ -59,3 +59,15 @@ export type KeypadLayout = {|
   numPages: number,
   maxVisibleRows: number,
 |};
+declare type ActiveNodesObjPopover = {|
+  parentId: string,
+  childIds: $ReadOnlyArray<string>,
+|};
+export type ActiveNodesObj = {|
+  popover: ActiveNodesObjPopover | null,
+  focus: string | null,
+|};
+export type LayoutProps = {|
+  initialBounds: DOMRect,
+  borders: Border,
+|};

package/less/overrides.less

@@ -121,9 +121,3 @@
         display: inline-block !important;
     }
 }
-
-// The keypad sets its own color styles for KaTeX elements that are rendered in
-// its keys, so prevent any external styling.
-.keypad-container .katex {
-    color: inherit !important;
-}

package/package.json

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

package/src/components/keypad/index.tsx

@@ -31,7 +31,7 @@ const allPages = function (props: Props): React.ReactElement {
     return pages;
 };
 
-export default class PreAlgebraKeypad extends React.Component<Props, State> {
+export default class Keypad extends React.Component<Props, State> {
     state: State = {
         selectedPage: "Numbers",
     };

package/src/components/keypad-container.tsx

@@ -2,9 +2,9 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {setPageSize} from "../actions/index";
 import {KeypadTypes, LayoutModes} from "../consts";
 import {View} from "../fake-react-native-web/index";
+import {setPageSize} from "../store/actions";
 
 import {
     innerBorderColor,

package/src/components/keypad.tsx

@@ -7,8 +7,8 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
-import {removeEcho} from "../actions/index";
 import {View} from "../fake-react-native-web/index";
+import {removeEcho} from "../store/actions";
 
 import EchoManager from "./echo-manager";
 import PopoverManager from "./popover-manager";

package/src/components/node-manager.ts

@@ -1,4 +1,4 @@
-import type {Border} from "../types";
+import type {Border, LayoutProps} from "../types";
 /**
  * A manager for our node-to-ID system. In particular, this class is
  * responsible for maintaing a mapping between DOM nodes and node IDs, and
@@ -122,7 +122,7 @@ class NodeManager {
      * @returns {object} - the bounding client rect for the given node, along
      *                     with its borders
      */
-    layoutPropsForId(id: string): {initialBounds: DOMRect; borders: Border} {
+    layoutPropsForId(id: string): LayoutProps {
         if (!this._cachedBoundingBoxesById[id]) {
             const node = this._nodesById[id];
 

package/src/components/popover-state-machine.ts

@@ -1,3 +1,5 @@
+import type {ActiveNodesObj} from "../types";
+
 /**
  * A state machine for the popover state. In particular, this class manages the
  * mapping of parent nodes to their children, and translates touch events that
@@ -5,16 +7,6 @@
  * is present.
  */
 
-type ActiveNodesObjPopover = {
-    parentId: string;
-    childIds: ReadonlyArray<string>;
-};
-
-type ActiveNodesObj = {
-    popover: ActiveNodesObjPopover | null;
-    focus: string | null;
-};
-
 type Handlers = {
     onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
     onClick: (keyId: string, domNodeId: string, inPopover: boolean) => void;

package/src/components/provided-keypad.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unsafe */
 import * as React from "react";
 import ReactDOM from "react-dom";
 import {Provider} from "react-redux";
@@ -9,7 +8,7 @@ import {
     configureKeypad,
     setCursor,
     setKeyHandler,
-} from "../actions/index";
+} from "../store/actions";
 import {createStore} from "../store/index";
 
 import KeypadContainer from "./keypad-container";
@@ -24,21 +23,13 @@ type Props = {
 };
 
 class ProvidedKeypad extends React.Component<Props> {
-    mounted?: boolean;
     store: any;
 
-    UNSAFE_componentWillMount() {
+    constructor(props) {
+        super(props);
         this.store = createStore();
     }
 
-    componentDidMount() {
-        this.mounted = true;
-    }
-
-    componentWillUnmount() {
-        this.mounted = false;
-    }
-
     activate: () => void = () => {
         this.store.dispatch(activateKeypad());
     };