@khanacademy/math-input 1.0.1 → 2.0.0

package/dist/store/actions.d.ts

@@ -1,4 +1,4 @@
-import type { Key } from "../data/keys";
+import Keys from "../data/keys";
 import type { KeypadConfiguration, KeyHandler, Cursor, ActiveNodesObj, Border } from "../types";
 type DismissKeypadAction = {
     type: "DismissKeypad";
@@ -54,11 +54,11 @@ type SetActiveNodesAction = {
 export declare const setActiveNodes: (activeNodes: ActiveNodesObj) => SetActiveNodesAction;
 type PressKeyAction = {
     type: "PressKey";
-    key: Key;
+    key: Keys;
     borders: Border;
     initialBounds: DOMRect;
     inPopover: boolean;
 };
-export declare const pressKey: (key: Key, borders: ("LEFT" | "BOTTOM" | undefined)[], initialBounds: DOMRect, inPopover: any) => PressKeyAction;
+export declare const pressKey: (key: Keys, borders: readonly (import("../enums").BorderDirection | 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

@@ -4,7 +4,8 @@
  * Flowgen v1.21.0
  * @flow
  */
-import type { Key } from "../data/keys";
+import * as $Flowgen$Import$_2e__2e__2f_enums from "../enums";
+import Keys from "../data/keys";
 import type {
   KeypadConfiguration,
   KeyHandler,
@@ -75,14 +76,14 @@ declare export var setActiveNodes: (
 ) => SetActiveNodesAction;
 declare type PressKeyAction = {|
   type: "PressKey",
-  key: Key,
+  key: Keys,
   borders: Border,
   initialBounds: DOMRect,
   inPopover: boolean,
 |};
 declare export var pressKey: (
-  key: Key,
-  borders: ("LEFT" | "BOTTOM" | void)[],
+  key: Keys,
+  borders: $ReadOnlyArray<$Flowgen$Import$_2e__2e__2f_enums.BorderDirection | void>,
   initialBounds: DOMRect,
   inPopover: any
 ) => PressKeyAction;

package/dist/store/shared.d.ts

@@ -1,4 +1,5 @@
-declare const defaultKeypadType: "EXPRESSION";
+import { KeypadType } from "../enums";
+declare const defaultKeypadType = KeypadType.EXPRESSION;
 declare const keypadForType: {
     readonly FRACTION: import("../types").KeypadLayout;
     readonly EXPRESSION: import("../types").KeypadLayout;

package/dist/store/shared.js.flow

@@ -5,7 +5,8 @@
  * @flow
  */
 import * as $Flowgen$Import$_2e__2e__2f_types from "../types";
-declare var defaultKeypadType: "EXPRESSION";
+import { KeypadType } from "../enums";
+declare var defaultKeypadType: KeypadType.EXPRESSION;
 declare var keypadForType: {|
   +FRACTION: $Flowgen$Import$_2e__2e__2f_types.KeypadLayout,
   +EXPRESSION: $Flowgen$Import$_2e__2e__2f_types.KeypadLayout,

package/dist/store/types.d.ts

@@ -1,8 +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 Keys from "../data/keys";
+import { LayoutMode, KeypadType } from "../enums";
 import type { Cursor, KeyHandler, Popover, Echo } from "../types";
 export interface InputState {
     keyHandler: KeyHandler | null;
@@ -23,7 +22,7 @@ export interface PagerState {
 }
 export interface GestureState {
     popover: Popover | null;
-    focus: Key | null;
+    focus: Keys | null;
     gestureManager: GestureManager;
 }
 export interface EchoState {
@@ -44,7 +43,7 @@ export interface LayoutState {
         pageWidthPx: number;
         pageHeightPx: number;
     };
-    layoutMode: keyof typeof LayoutModes;
+    layoutMode: LayoutMode;
     paginationEnabled: boolean;
     navigationPadEnabled: boolean;
 }

package/dist/store/types.js.flow

@@ -6,9 +6,8 @@
  */
 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 Keys from "../data/keys";
+import { LayoutMode, KeypadType } from "../enums";
 import type { Cursor, KeyHandler, Popover, Echo } from "../types";
 export interface InputState {
   keyHandler: KeyHandler | null;
@@ -29,7 +28,7 @@ export interface PagerState {
 }
 export interface GestureState {
   popover: Popover | null;
-  focus: Key | null;
+  focus: Keys | null;
   gestureManager: GestureManager;
 }
 export interface EchoState {
@@ -50,7 +49,7 @@ export interface LayoutState {
     pageWidthPx: number,
     pageHeightPx: number,
   |};
-  layoutMode: $Keys<typeof LayoutModes>;
+  layoutMode: LayoutMode;
   paginationEnabled: boolean;
   navigationPadEnabled: boolean;
 }

package/dist/types.d.ts

@@ -1,8 +1,7 @@
-import { BorderDirections, EchoAnimationTypes, KeyTypes, IconTypes } from "./consts";
+import Keys from "./data/keys";
+import { BorderDirection, EchoAnimationType, IconType, KeyType, KeypadType } from "./enums";
 import type { CursorContext } from "./components/input/cursor-contexts";
-import type { KeypadType } from "./consts";
-import type { Key } from "./data/keys";
-export type Border = Partial<Array<keyof typeof BorderDirections>>;
+export type Border = Partial<ReadonlyArray<BorderDirection>>;
 export type Bound = {
     top: number;
     right: number;
@@ -12,33 +11,33 @@ export type Bound = {
     width: number;
 };
 export type Popover = {
-    parentId: Key;
+    parentId: Keys;
     bounds: Partial<Bound>;
-    childKeyIds: Array<Key>;
+    childKeyIds: Array<Keys>;
 };
 export type Echo = {
     animationId: string;
-    animationType: keyof typeof EchoAnimationTypes;
+    animationType: EchoAnimationType;
     borders: Border;
-    id: Key;
+    id: Keys;
     initialBounds: DOMRect;
 };
-export type Icon = {
-    type: keyof typeof IconTypes;
+export type IconConfig = {
+    type: IconType;
     data: string;
 };
 export type KeyConfig = {
     ariaLabel: string;
-    id: Key;
-    type: keyof typeof KeyTypes;
-    childKeyIds: Array<Key>;
-    icon: Icon;
+    id: Keys;
+    type: KeyType;
+    childKeyIds: Array<Keys>;
+    icon: IconConfig;
 };
 export type KeypadConfiguration = {
     keypadType: KeypadType;
-    extraKeys?: ReadonlyArray<Key>;
+    extraKeys?: ReadonlyArray<Keys>;
 };
-export type KeyHandler = (key: Key) => Cursor;
+export type KeyHandler = (key: Keys) => Cursor;
 export type Cursor = {
     context: CursorContext;
 };

package/dist/types.js.flow

@@ -4,16 +4,16 @@
  * Flowgen v1.21.0
  * @flow
  */
+import Keys from "./data/keys";
 import {
-  BorderDirections,
-  EchoAnimationTypes,
-  KeyTypes,
-  IconTypes,
-} from "./consts";
+  BorderDirection,
+  EchoAnimationType,
+  IconType,
+  KeyType,
+  KeypadType,
+} from "./enums";
 import type { CursorContext } from "./components/input/cursor-contexts";
-import type { KeypadType } from "./consts";
-import type { Key } from "./data/keys";
-export type Border = $Rest<Array<$Keys<typeof BorderDirections>>, {}>;
+export type Border = $Rest<$ReadOnlyArray<BorderDirection>, {}>;
 export type Bound = {|
   top: number,
   right: number,
@@ -23,33 +23,33 @@ export type Bound = {|
   width: number,
 |};
 export type Popover = {|
-  parentId: Key,
+  parentId: Keys,
   bounds: $Rest<Bound, {}>,
-  childKeyIds: Array<Key>,
+  childKeyIds: Array<Keys>,
 |};
 export type Echo = {|
   animationId: string,
-  animationType: $Keys<typeof EchoAnimationTypes>,
+  animationType: EchoAnimationType,
   borders: Border,
-  id: Key,
+  id: Keys,
   initialBounds: DOMRect,
 |};
-export type Icon = {|
-  type: $Keys<typeof IconTypes>,
+export type IconConfig = {|
+  type: IconType,
   data: string,
 |};
 export type KeyConfig = {|
   ariaLabel: string,
-  id: Key,
-  type: $Keys<typeof KeyTypes>,
-  childKeyIds: Array<Key>,
-  icon: Icon,
+  id: Keys,
+  type: KeyType,
+  childKeyIds: Array<Keys>,
+  icon: IconConfig,
 |};
 export type KeypadConfiguration = {|
   keypadType: KeypadType,
-  extraKeys?: $ReadOnlyArray<Key>,
+  extraKeys?: $ReadOnlyArray<Keys>,
 |};
-export type KeyHandler = (key: Key) => Cursor;
+export type KeyHandler = (key: Keys) => Cursor;
 export type Cursor = {|
   context: CursorContext,
 |};

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.1",
+    "version": "2.0.0",
     "publishConfig": {
         "access": "public"
     },

package/src/components/compute-layout-parameters.ts

@@ -19,7 +19,7 @@
  * might need to be.
  */
 
-import {DeviceTypes, DeviceOrientations, LayoutModes} from "../consts";
+import {DeviceType, DeviceOrientation, LayoutMode} from "../enums";
 
 import {
     pageIndicatorHeightPx,
@@ -68,8 +68,8 @@ export const computeLayoutParameters = (
 
     // Then, compute the button dimensions based on the provided parameters.
     let buttonDimensions;
-    if (deviceType === DeviceTypes.PHONE) {
-        const isLandscape = deviceOrientation === DeviceOrientations.LANDSCAPE;
+    if (deviceType === DeviceType.PHONE) {
+        const isLandscape = deviceOrientation === DeviceOrientation.LANDSCAPE;
 
         // In many cases, the browser chrome will already have been factored
         // into `pageHeightPx`. But we have no way of knowing if that's
@@ -129,7 +129,7 @@ export const computeLayoutParameters = (
             widthPx: buttonWidthPx,
             heightPx: buttonHeightPx,
         };
-    } else if (deviceType === DeviceTypes.TABLET) {
+    } else if (deviceType === DeviceType.TABLET) {
         buttonDimensions = {
             widthPx: maxButtonSize,
             heightPx: maxButtonSize,
@@ -151,7 +151,7 @@ export const computeLayoutParameters = (
         buttonDimensions,
         layoutMode:
             keypadWidth >= pageWidthPx
-                ? LayoutModes.FULLSCREEN
-                : LayoutModes.COMPACT,
+                ? LayoutMode.FULLSCREEN
+                : LayoutMode.COMPACT,
     };
 };

package/src/components/echo-manager.tsx

@@ -5,19 +5,19 @@
 import * as React from "react";
 import {TransitionGroup, CSSTransition} from "react-transition-group";
 
-import {KeyTypes, EchoAnimationTypes} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import Keys from "../data/keys";
+import {KeyType, EchoAnimationType} from "../enums";
 
 import KeypadButton from "./keypad-button";
 import * as zIndexes from "./z-indexes";
 
-import type {Key} from "../data/keys";
 import type {Border, Bound} from "../types";
 
 type EchoProps = {
     animationDurationMs: number;
     borders: Border;
-    id: Key;
+    id: Keys;
     initialBounds: Bound;
     onAnimationFinish: () => void;
 };
@@ -53,7 +53,7 @@ class Echo extends React.Component<EchoProps> {
             <div style={containerStyle}>
                 <KeypadButton
                     icon={icon}
-                    type={KeyTypes.ECHO}
+                    type={KeyType.ECHO}
                     borders={borders}
                 />
             </div>
@@ -63,9 +63,9 @@ class Echo extends React.Component<EchoProps> {
 
 type EchoPropType = {
     animationId: string;
-    animationType: keyof typeof EchoAnimationTypes;
+    animationType: EchoAnimationType;
     borders: Border;
-    id: Key;
+    id: Keys;
     initialBounds: Bound;
 };
 
@@ -82,17 +82,17 @@ class EchoManager extends React.Component<EchoManagerProps> {
         let animationTransitionName;
 
         switch (animationType) {
-            case EchoAnimationTypes.SLIDE_AND_FADE:
+            case EchoAnimationType.SLIDE_AND_FADE:
                 animationDurationMs = 400;
                 animationTransitionName = "echo-slide-and-fade";
                 break;
 
-            case EchoAnimationTypes.FADE_ONLY:
+            case EchoAnimationType.FADE_ONLY:
                 animationDurationMs = 300;
                 animationTransitionName = "echo-fade-only";
                 break;
 
-            case EchoAnimationTypes.LONG_FADE_ONLY:
+            case EchoAnimationType.LONG_FADE_ONLY:
                 animationDurationMs = 400;
                 animationTransitionName = "echo-long-fade-only";
                 break;
@@ -114,7 +114,7 @@ class EchoManager extends React.Component<EchoManagerProps> {
 
         return (
             <span>
-                {Object.keys(EchoAnimationTypes).map((animationType) => {
+                {Object.keys(EchoAnimationType).map((animationType) => {
                     // Collect the relevant parameters for the animation type, and
                     // filter for the appropriate echoes.
                     const {animationDurationMs, animationTransitionName} =

package/src/components/expression-keypad.tsx

@@ -6,12 +6,12 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {BorderStyles} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import {BorderStyles} from "../enums";
 import {View} from "../fake-react-native-web/index";
 
 import {valueGrey, controlGrey} from "./common-style";
-import * as CursorContexts from "./input/cursor-contexts";
+import {CursorContext} from "./input/cursor-contexts";
 import ManyKeypadButton from "./many-keypad-button";
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
@@ -19,7 +19,6 @@ 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;
@@ -60,31 +59,31 @@ class ExpressionKeypad extends React.Component<Props> {
         let dismissOrJumpOutKey;
         if (dynamicJumpOut) {
             switch (cursorContext) {
-                case CursorContexts.IN_PARENS:
+                case CursorContext.IN_PARENS:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_PARENTHESES;
                     break;
 
-                case CursorContexts.IN_SUPER_SCRIPT:
+                case CursorContext.IN_SUPER_SCRIPT:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_EXPONENT;
                     break;
 
-                case CursorContexts.IN_SUB_SCRIPT:
+                case CursorContext.IN_SUB_SCRIPT:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_BASE;
                     break;
 
-                case CursorContexts.BEFORE_FRACTION:
+                case CursorContext.BEFORE_FRACTION:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_INTO_NUMERATOR;
                     break;
 
-                case CursorContexts.IN_NUMERATOR:
+                case CursorContext.IN_NUMERATOR:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_NUMERATOR;
                     break;
 
-                case CursorContexts.IN_DENOMINATOR:
+                case CursorContext.IN_DENOMINATOR:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_DENOMINATOR;
                     break;
 
-                case CursorContexts.NONE:
+                case CursorContext.NONE:
                 default:
                     dismissOrJumpOutKey = KeyConfigs.DISMISS;
                     break;

package/src/components/fraction-keypad.tsx

@@ -6,18 +6,17 @@
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {BorderStyles} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import {BorderStyles} from "../enums";
 import {View} from "../fake-react-native-web/index";
 
-import * as CursorContexts from "./input/cursor-contexts";
+import {CursorContext} from "./input/cursor-contexts";
 import Keypad from "./keypad";
 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;
 
@@ -49,31 +48,31 @@ class FractionKeypad extends React.Component<Props> {
         let dismissOrJumpOutKey;
         if (dynamicJumpOut) {
             switch (cursorContext) {
-                case CursorContexts.IN_PARENS:
+                case CursorContext.IN_PARENS:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_PARENTHESES;
                     break;
 
-                case CursorContexts.IN_SUPER_SCRIPT:
+                case CursorContext.IN_SUPER_SCRIPT:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_EXPONENT;
                     break;
 
-                case CursorContexts.IN_SUB_SCRIPT:
+                case CursorContext.IN_SUB_SCRIPT:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_BASE;
                     break;
 
-                case CursorContexts.BEFORE_FRACTION:
+                case CursorContext.BEFORE_FRACTION:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_INTO_NUMERATOR;
                     break;
 
-                case CursorContexts.IN_NUMERATOR:
+                case CursorContext.IN_NUMERATOR:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_NUMERATOR;
                     break;
 
-                case CursorContexts.IN_DENOMINATOR:
+                case CursorContext.IN_DENOMINATOR:
                     dismissOrJumpOutKey = KeyConfigs.JUMP_OUT_DENOMINATOR;
                     break;
 
-                case CursorContexts.NONE:
+                case CursorContext.NONE:
                 default:
                     dismissOrJumpOutKey = KeyConfigs.DISMISS;
                     break;
@@ -107,8 +106,8 @@ class FractionKeypad extends React.Component<Props> {
                             // then when the cursor was inside a parenthetical
                             // expression in a numerator or denominator, this check
                             // would fail.
-                            cursorContext === CursorContexts.IN_NUMERATOR ||
-                            cursorContext === CursorContexts.IN_DENOMINATOR
+                            cursorContext === CursorContext.IN_NUMERATOR ||
+                            cursorContext === CursorContext.IN_DENOMINATOR
                         }
                         style={roundTopRight && roundedTopRight}
                     />

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

@@ -1,4 +1,4 @@
-import type {Key} from "../data/keys";
+import Keys from "../data/keys";
 
 /**
  * The state machine that backs our gesture system. In particular, this state
@@ -26,17 +26,17 @@ type Options = {
 };
 
 type TouchState = {
-    activeNodeId: Key;
+    activeNodeId: Keys;
     pressAndHoldIntervalId: number | null;
     longPressTimeoutId: number | null;
     swipeLocked: boolean;
     startX: number;
 };
 
-type TouchStateMap = Record<Key, TouchState>;
+type TouchStateMap = Record<Keys, TouchState>;
 
 type SwipeState = {
-    touchId: Key;
+    touchId: Keys;
     startX: number;
 };
 
@@ -49,16 +49,16 @@ const defaultOptions: Options = {
 class GestureStateMachine {
     handlers: Handlers;
     options: Options;
-    swipeDisabledNodeIds: Partial<[Key]>;
-    multiPressableKeys: Partial<[Key]>;
+    swipeDisabledNodeIds: Partial<[Keys]>;
+    multiPressableKeys: Partial<[Keys]>;
     touchState: Partial<TouchStateMap>;
     swipeState: SwipeState | null;
 
     constructor(
         handlers: Handlers,
         options: Partial<Options>,
-        swipeDisabledNodeIds?: [Key],
-        multiPressableKeys?: [Key],
+        swipeDisabledNodeIds?: [Keys],
+        multiPressableKeys?: [Keys],
     ) {
         this.handlers = handlers;
         this.options = {

package/src/components/icon.tsx

@@ -5,14 +5,14 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {IconTypes} from "../consts";
+import {IconType} from "../enums";
 
 import {offBlack} from "./common-style";
 import MathIcon from "./math-icon";
 import SvgIcon from "./svg-icon";
 import TextIcon from "./text-icon";
 
-import type {Icon as IconPropType} from "../types";
+import type {IconConfig} from "../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 const focusedColor = "#FFF";
@@ -20,7 +20,7 @@ const unfocusedColor = offBlack;
 
 type Props = {
     focused: boolean;
-    icon: IconPropType;
+    icon: IconConfig;
     style?: StyleType;
 };
 
@@ -34,10 +34,10 @@ class Icon extends React.PureComponent<Props> {
         ];
 
         switch (icon.type) {
-            case IconTypes.MATH:
+            case IconType.MATH:
                 return <MathIcon math={icon.data} style={styleWithFocus} />;
 
-            case IconTypes.SVG:
+            case IconType.SVG:
                 // TODO(charlie): Support passing style objects to `SvgIcon`.
                 // This will require migrating the individual icons to use
                 // `currentColor` and accept a `className` prop, rather than
@@ -49,7 +49,7 @@ class Icon extends React.PureComponent<Props> {
                     />
                 );
 
-            case IconTypes.TEXT:
+            case IconType.TEXT:
                 return (
                     <TextIcon character={icon.data} style={styleWithFocus} />
                 );